Firebase Auth - Cordova - iOS - signInWithRedirect - about:blank

[MatthewPringle]

[REQUIRED] Describe your environment

• Operating System version: iOS
• Browser version: iOS Cordova
• Firebase SDK version: 5
• Firebase Product: auth

[REQUIRED] Describe the problem

The Firebase / Cordova intergration instructions are now missing a step and without it signInWithRedirect will not redirect back to the app and instead show a blank page with the url about:blank.

This issue arises because the app goes to sleep when the browsertab is opened and it never receives the callback once Facebook / Google / Twitter has authenticated the credentials.

This can be solved by installing the Cordova plugin cordova-plugin-background-mode

The sign if flow should now enable background mode before opening the browsertab and disable it after the process has completed.

window.cordova.plugins.backgroundMode.enable();

const auth = await this.get( 'firebaseService' ).auth();

var result = await auth.signInWithRedirect( provider ).then(function() { return auth.getRedirectResult(); }).catch(function( error ) { return self.handleError( error ); });

window.cordova.plugins.backgroundMode.disable();

The firebaseService is an Ember intergration and can be replaced with the standard Firebase way.

[MatthewPringle]

I also need to point out that cordova-plugin-browsertab should no longer be used.

It installs cordova-plugin-compat which will cause Cordova to no longer build Android apps.

Dependancy on that plugin should be removed and instead cordova-plugin-safariviewcontroller should probably be used.

[wongpeiyi]

@MatthewPringle thanks for the workaround – was struggling with this.

That said, I agree browsertab should be replaced with safariviewcontroller

[rommelpe]

Sorry for the late response, @MatthewPringle. I would like to check if you are still having issues here. If so, you may share a working repro, and we are happy to look into it.

[MatthewPringle]

Unfortunately I do not have a working repo at the moment.

The issue with Firebase JS and Cordova is that the instructions provided by Firebase for Cordova integration are no longer valid.

Some plugins have stopped working, some need replacing and some haven't been updated to support the latest mobile SDKs.

Browsertab should be replaced with safariviewcontroller

Firebase should also not check for all the Cordova plugins and then fail when they are not installed. It is easy enough to trick it, but instead Firebase should not rely on any one Cordova plugin.

[rommelpe]

Thanks for the inputs, @MatthewPringle. Let me reproduce it first on my end so I can relay this to the right person, but it'd be great if you can provide the working repro to speed up the investigation.

[gannonbarnett]

@MatthewPringle How were you able to trick Firebase to get around the auth/invalid-cordova-configuration error?

[MatthewPringle]

@gbarnett you will need to use SafariViewController rather than browsertab, I used the code below to trick Cordova. I fire this as my app boots.

/* Check Plugins */
if ( window.cordova.plugins === undefined ) {
    window.cordova.plugins = {};
}

/* Browsertab */
window.cordova.plugins.browsertab = {};

/* Browsertab - Is Available */
window.cordova.plugins.browsertab.isAvailable = function( success ) {
    window.SafariViewController.isAvailable( success );
}

/* Browsertab - Open Url */
window.cordova.plugins.browsertab.openUrl = function( url ) {
    window.SafariViewController.show( { url: url } , function() {} , function() {} );
}

/* Browsertab - Close */
window.cordova.plugins.browsertab.close = function() {
    window.SafariViewController.hide();
}

with the following plugins

<plugin name="cordova-plugin-buildinfo" spec="2.0.3"/>
<plugin name="cordova-plugin-background-mode" spec="0.7.3"/>
<plugin name="cordova-plugin-customurlscheme" spec="4.4.0">
    <variable name="URL_SCHEME" value="your.url.here"/>
    <variable name="ANDROID_SCHEME" value=" "/>
    <variable name="ANDROID_HOST" value=" "/>
    <variable name="ANDROID_PATHPREFIX" value="/"/>
</plugin>
<plugin name="cordova-plugin-inappbrowser" spec="^3.1.0"/>
<plugin name="cordova-plugin-safariviewcontroller" spec="^1.6.0"/>
<plugin name="cordova-universal-links-plugin" spec="https://github.com/walteram/cordova-universal-links-plugin"/>
<universal-links>
    <host name="XXX.page.link" scheme="https"/>
    <host name="XXX.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

[shawns582]

@MatthewPringle is your fix still working? I tried it and was able to confirm that it is launching the SafariViewController instead of browsertab, but I am still getting the about:blank page after login. I do have the background-mode plugin installed and enabled before auth and disabled after.

[MatthewPringle]

@shawns582 do you have the universal links plugin working and check in Xcode that the field "URL Types" under "Info" has been set to your URL Scheme.

[shawns582]

@MatthewPringle thanks for the quick response. I managed to get it working on a test project by removing the platform, node_modules and plugins and then reinstalling. I dont think this was actually necessary, but in the process I realized that there are multiple universal links plugins that look similar. There is

cordova-plugin-universal-links
cordova-universal-links-plugin
cordova-universal-links-plugin-fix

Which can be misleading. I needed to have the last two to make it work. I will make sure to keep an eye on the URL Types in Xcode also. Thanks again for the quick response.

[MatthewPringle]

I think there is an issue with Cordova where if you delete everything and then add it all it adds any custom values, such as the app url scheme you specify in the config.xml but if you add the plugin the normal way the custom value in not added.

I have moved over to Capacitor now, a kinda Cordova successor, where it is much easier to use native code.

https://capacitor.ionicframework.com

That has a native Firebase plugin for auth https://github.com/baumblatt/capacitor-firebase-auth

[shawns582]

Thanks @MatthewPringle I've heard about Capacitor but haven't really ventured to look into it much since Ive been heads down working on a production Ionic 3 app. Seems like adding Capacitor might make things easier and more reliable long term.

[MatthewPringle]

@shawns582 I believe the latest Ionic uses Capacitor so hopefully going forward it will become well supported

[jj449]

if backgroundmode plugin not allowed for app store .... ?

[jessk77]

has anyone knows if there is an alternative for browsertab in android?

[mattsputnikdigital]

@jessk77 SafariViewController works on Android https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller

[lucascardial]

@gbarnett you will need to use SafariViewController rather than browsertab, I used the code below to trick Cordova. I fire this as my app boots.

/* Check Plugins */
if ( window.cordova.plugins === undefined ) {
    window.cordova.plugins = {};
}

/* Browsertab */
window.cordova.plugins.browsertab = {};

/* Browsertab - Is Available */
window.cordova.plugins.browsertab.isAvailable = function( success ) {
    window.SafariViewController.isAvailable( success );
}

/* Browsertab - Open Url */
window.cordova.plugins.browsertab.openUrl = function( url ) {
    window.SafariViewController.show( { url: url } , function() {} , function() {} );
}

/* Browsertab - Close */
window.cordova.plugins.browsertab.close = function() {
    window.SafariViewController.hide();
}

with the following plugins

<plugin name="cordova-plugin-buildinfo" spec="2.0.3"/>
<plugin name="cordova-plugin-background-mode" spec="0.7.3"/>
<plugin name="cordova-plugin-customurlscheme" spec="4.4.0">
    <variable name="URL_SCHEME" value="your.url.here"/>
    <variable name="ANDROID_SCHEME" value=" "/>
    <variable name="ANDROID_HOST" value=" "/>
    <variable name="ANDROID_PATHPREFIX" value="/"/>
</plugin>
<plugin name="cordova-plugin-inappbrowser" spec="^3.1.0"/>
<plugin name="cordova-plugin-safariviewcontroller" spec="^1.6.0"/>
<plugin name="cordova-universal-links-plugin" spec="https://github.com/walteram/cordova-universal-links-plugin"/>
<universal-links>
    <host name="XXX.page.link" scheme="https"/>
    <host name="XXX.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

So many thanks! That's worked great to me!

[hicreate]

Implementing the above solution I still randomly get the about:blank redirect screen - has anyone else encountered this? I can login the first time, then if I change accounts and login with a separate auth provider I get the blank screen.

Thanks

[louisameline]

cordova-plugin-background-mode looks abandoned to me. It hangs in iOS, not usable at all, so no workaround.

@rommelpe Are you still waiting for a repro case? No one has looked into this in 18 months?

Between this bug and issue 4256 the auth process with Firebase is just a major failure right now, I'll have to just disable third-party providers in iOS altogether to submit the app, I'm screwed.

[jpike88]

Just had this happen while testing.