Authenticate Using OAuth Providers with Cordova

With the Firebase JS SDK, you can let your Firebase users authenticate using any supported OAuth provider in a Cordova environment. You can integrate any supported OAuth provider either by using the Firebase SDK to perform the sign-in flow, or by carrying out the OAuth flow manually and passing the resulting OAuth credential to Firebase.

Set up Firebase Authentication for Cordova

  1. Add Firebase to your JavaScript project. When adding the Firebase snippet, take note of the authDomain configuration variable, which should look like my-app.firebaseapp.com.

  2. To set up an Android app, add your Android app to the Firebase console and enter your app details. You do not need the generated google-services.json.

  3. To set up an iOS app, create an iOS application and add it to the Firebase console. You will need the iOS bundle ID to add later when installing the custom URL scheme plugin.

  4. Enable Firebase Dynamic Links:

    1. In the Firebase console, open the Dynamic Links section.
    2. If you have not yet accepted the Dynamic Links terms, select Get Started. Go back to the main Dynamic Links dashboard.
    3. Take note of your Dynamic Link Domain. It should look like abc123.app.goo.gl.
  5. Enable Google Sign-In in the Firebase console:

    1. In the Firebase console, open the Auth section.
    2. On the Sign in method tab, enable the Google sign-in method and click Save.
  6. Install the required plugins in your Cordova project.

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
    cordova plugin add cordova-plugin-buildinfo --save
    # Plugin to handle Universal Links (Android app link redirects)
    cordova plugin add cordova-universal-links-plugin --save
    # Plugin to handle opening secure browser views on iOS/Android mobile devices
    cordova plugin add cordova-plugin-browsertab --save
    # Plugin to handle opening a browser view in older versions of iOS and Android
    cordova plugin add cordova-plugin-inappbrowser --save
    # Plugin to handle deep linking through Custom Scheme for iOS
    # Substitute com.firebase.cordova with the iOS bundle ID of your app.
    cordova plugin add cordova-plugin-customurlscheme --variable \
      URL_SCHEME=com.firebase.cordova --save
    

  7. Add the following configuration to your Cordova config.xml file, where AUTH_DOMAIN is the domain from step (1), and DYNAMIC_LINK_DOMAIN is the domain from step (3c).

    <universal-links>
        <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
        <host name="AUTH_DOMAIN" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    An example configuration might look like:

    <universal-links>
        <host name="abc123.app.goo.gl" scheme="https" />
        <host name="my-app.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    For Android application singleTask should be used for launchMode.

    <preference name="AndroidLaunchMode" value="singleTask" />
    

Handle the sign-in flow with the Firebase SDK

  1. Create an instance of the Google provider object:

    var provider = new firebase.auth.GoogleAuthProvider();
    

  2. Authenticate with Firebase using the Google provider object using signInWithRedirect. Note that signInWithPopup is not supported in Cordova.

    firebase.auth().signInWithRedirect(provider).then(function() {
      return firebase.auth().getRedirectResult();
    }).then(function(result) {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    

  3. To handle the case where the app activity is destroyed before the sign-in operation completes, call getRedirectResult when your app loads.

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a Google Access Token.
        // You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    

    The same mechanism can be used to link a new provider via linkWithRedirect or to reauthenticate with an existing provider using reauthenticateWithRedirect.

Send feedback about...

Need help? Visit our support page.