$authWithOAuthPopup flow ending up in auth.firebase.com/blank/page.html - ionic-framework

I'm trying to authorize app-users via google in an ionic app based on angularfire. The complete flow is working fine on my workstation's chrome browser (using ionic serve) but fails when deploying on my android device:
$authWithOAuthPopup, when used on Android (via 'ionic run', i.e. installed as apk) results in browser getting stuck in auth.firebase.com/blank/page.html.
All is working fine in html (via 'ionic serve') so I assume, that firebase and google configuration are fine. cordova.js is included properly.
The cordova inapp browser is installed and can open other urls. I have whitelisted firebase(io) and google domains and also allowed everything else. I am using cordova-plugin-inappbrowser 1.0.2-dev "InAppBrowser" and
cordova-plugin-whitelist 1.0.0 "Whitelist". I have tried older versions of the inappbrowser as well.
I am not using ionic livereload to avoid any potential cross-domain/proxy issues
When remote debugging, no errors are being reported: after $authWithOAuthPopup control gets lost somewhere deep in the minified firebase.js code and never returns to angularfire level
The following traffic is generated (detailed urls below):
1) firebase code calls auth.firebase.com/v2//auth/google, 2) accounts.google.com returns to 3)auth.firebase.com/v2.... which transfers to 4) auth.firebase.com/blank/page.html.
On the blank page I can see cookies.
Thanks for any advice in advance...
Detailed URLs from the webflow:
Initiator: firebase.js:147:
https: //auth.firebase.com/v2/gastrohub/auth/google?&v=js-2.2.6&transport=redirect&suppress_status_codes=true&requestId=p2k757pm4hsjv5531z7045voxcyuelsi0wt3&redirectTo=https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html
https: //accounts.google.com/o/oauth2/auth?response_type=code&redirect_uri=https%3A%2F%2Fauth.firebase.com%2Fv2%2Fgastrohub%2Fauth%2Fgoogle%2Fcallback&scope=%20profile&state=%7B%22firebase%22%3A%22gastrohub%22%2C%22requestId%22%3A%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22%2C%22redirectTo%22%3A%22https%3A%2F%2Fauth.firebase.com%2Fblank%2Fpage.html%22%2C%22transport%22%3A%22redirect%22%2C%22v%22%3A%22js-2.2.6%22%7D&client_id=434498505800-p5rjvl6basvlsf4fh3t1ta9ej4pt2i28.apps.googleusercontent.com
https: //auth.firebase.com/v2/gastrohub/auth/google/callback?state=%7B%22firebase%22:%22gastrohub%22,%22requestId%22:%22p2k757pm4hsjv5531z7045voxcyuelsi0wt3%22,%22redirectTo%22:%22https://auth.firebase.com/blank/page.html%22,%22transport%22:%22redirect%22,%22v%22:%22js-2.2.6%22%7D&code=4/vgz4uJ8SgIswewKQHcMiXZbwddU_F9llfWKaRfEhOMI
https: //auth.firebase.com/blank/page.html

Related

Any cordova plugin to add WebAuthn API to Android WebView?

We've developed a cordova app that shows one of our websites (which is also accessible using a web browser).
Recently, FIDO2 authentication using WebAuthn has been added to that website. This works fine in the tested browsers (Chrome and Firefox), but not in our cordova application, as it uses Android WebView, which doesn't implement the WebAuthn API.
Does anybody know if there is any cordova plugin to add this API to Android WebView?
Is there any website with information about the Android WebView roadmap (bugs that will be fixed in next release, new features that will be added, ...)?
You're correct that Android WebView doesn't support WebAuthn in Android 13. We hope to address that in the Android 14 timeframe but, for now, you have to inject Javascript hooks and use a Javascript bridge to implement it. It's certainly possible to do but I'm not aware of any packaged solutions that do it.

Ionic InAppBrowser issues with SSO login

I have an Ionic/Capacitor project which requires SSO login from an external Federation web page.
I am able to display the login page successfully using the InAppBrowser plugin (I have experimented with the capacitor plugin as well as the "awesome" cordova plugin).
My problem is that when I press the login button on our test ADFS server, the page just refreshes. I don't believe the login call is ever executed.
Note that if I try this with an external browser on the phone it works fine. Also if I try other API links on the in-app browser, that works fine too.
Is there any reason why SSO would not work within an InAppBrowser?
Should I try the Cordova plugin (rather than "awesome" plugin?). I could try the capacitor plugin again, but it does not seem to be as feature-rich on callbacks.

LoopBack with Ionic

I am trying to run a LoopBack server with ionic client, but I am getting the "Error: Cannot GET /cordova.js" error.
My code can be cloned from github at: https://github.com/giladba/BetterTrader2.git
Problem description:
I created a LoopBack application, and at the client directory I created an Ionic tabs application.
After that, I ran these commands on the client directory:
ionic platform add android
ionic build android
In server/middleware.json I redirected the index.html folder to the Ionic www folder like so:
"files": {
"loopback#static": {
"params": "$!../client/www"
}
but when I run node . I get cordova.js not found when I open http://localhost:3000/ in the browser:
note that even though there is an exception the application seems to be working fine.
Any idea how I can fix the exception?
Cordova gets injected into the app when deployed on a mobile device. When you use the ionic serve command locally, for example, cordova.js always 404s. You don't need it unless you're on a mobile device in a cordova app, and it will be deployed automatically in that case.

Ionic missing InAppBrowser plugin error When doing custom authentication

I've created an Ionic app and I'm trying to use the Custom Authentication option eg. Ionic.Auth.login('custom', authOptions, data).then(success, failure); However, I get an error message in the failure saying "Missing InAppBrowser plugin".
The plugin is installed and I've tried to uninstall and reinstall the plugin with no luck. When I use 'basic' the request goes through fine.
How do I fix this or get around it?
Plugins only work when running in native devices. You can't use them on browser with ionic serve.
You may want to start testing on a real android device or emulator.
Alternatively, there's a chrome plugin called Ripple that emulate an real devices with native-like features, allowing you to use some plugins on browser.

Ionic workflow questions and facebook authentication issue

I'm trying to implement mobile application using Ionic. I'm following this, but unfortunately logging in doesn't work on real device. It works fine in the browser and the emulator. I did every step from the tutorial, I did the tutorial 2-3 times and still get the same error.
I am logged in successfully on my device but then I see the following screen:
I already have both urls as redirect urls in my application settings in FB.
http://localhost:5000/oauthcallback.html
https://www.facebook.com/connect/login_success.html
I tried to debug OpenFB with alerts. I can see "cordova events" alert but then I have alerts on the first lines of loginWindow_loadStartHandler and loginWindow_exitHandler but they are not executed. I guess that the problem is there but I have no idea how to fix it.
if (runningInCordova) {
alert("cordova events");
loginWindow.addEventListener('loadstart', loginWindow_loadStartHandler);
loginWindow.addEventListener('exit', loginWindow_exitHandler);
}
Also I have some questions about Ionic and Phonegap.
I use Ubuntu and I am trying to build iOS and Android applications.
My application's structure is:
app/
hooks/
platforms/
plugins/
scss/
www/
Also I have InAppBrowser plugin:
cordova plugin add org.apache.cordova.inappbrowser
but this plugin is not part of app/www folder.
I am trying to build a phonegap application in their site. I made a .rar file of the app/www folder content and upload it. Everything seems to be fine. But in Phonegap site when I click PLUGINS, I see This application has no plugins. How should I add inappbrowser to the application, maybe that is the reason why my FB authentication doesn't work. If I build the whole app folder, again I see the same message - This application has no plugins.
So when create an archive file of the content for Phonegap, which folder I should archive - the whole app folder with all subfolders or only app/www? What is the correct flow? Also how crossplatform app should now about added plugins?
I ran into this issue today, if someone is still looking for the solution for this:
loginWindow.addEventListener('loadstart',
loginWindow_loadStartHandler);
is implemented in the js file, but the loadstart event never fires on my Android (but works on WindowsPhone cordova javascript app), instead i added:
loginWindow.addEventListener('loadstop',
loginWindow_loadStartHandler);
,which works on both Android and WP (with InAppBrowser 1.2.0), IOS test is still ahead.