Fixed : Firebase Auth in Cordova lead to a about:blank page on iOS device

Posted byjj449

Lately , was trying to integrate third party login to cordova app , let’s say twitter . After completing all steps firebase introduced , when run the app and start Oauth with firebase , we got a blank page at the end of process , and never get callback to original app .


You can find Firebase’s document here : https://firebase.google.com/docs/auth/web/cordova

Problem :
1. cordova-plugin-browsertab  : this plugin dependent on compat plugin , but compat plugin deprecated , so will lead to build android failed .


2. When firebase auth start ,will open in another webview , app go to background mode that make app never receive callback .

How to fix :

  1. replace cordova-plugin-browsertab with : cordova-plugin-safariviewcontroller

after install cordova-plugin-safariviewcontroller , we need to add some code in our javascript to replace browsertab with safariviewcontroller. 

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();
        }

2. we need to install background plugin to make app wake up while waiting callback . You can find the plugin here : https://github.com/katzer/cordova-plugin-background-mode

After these fixes above , finally get callback data correctly :

reference : https://github.com/firebase/firebase-js-sdk/issues/1555