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

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. If a custom domain is used instead of the Firebase provisioned firebaseapp.com domain, the custom domain should be used instead.
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.
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.
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 and created a Dynamic Links domain, do so now.
  
  If you already created a Dynamic Links domain, take note of it. A Dynamic Links domain typically looks like the following example:
```
example.page.link
```
  You will need this value when you configure your Apple or Android app to intercept the incoming link.
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.

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-fix --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

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="example.page.link" scheme="https" />
    <host name="example-app.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

If a custom domain auth.custom.domain.com is used, substitute my-app.firebaseapp.com with that.

For Android application singleTask should be used for launchMode.

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

Handle the sign-in flow with the Firebase SDK

Firebase Auth depends on deviceReady event in order to determine correctly the current Cordova environment. Ensure the Firebase App instance is initialized after that event is triggered.

Create an instance of the Google provider object:

Web

import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();auth_create_google_provider.js

Web

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

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

Web

import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });auth_cordova_sign_in_redirect.js

Web

firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).then((result) => {
  /** @type {firebase.auth.OAuthCredential} */
  var credential = result.credential;

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

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

Web

import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

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

Web

firebase.auth().getRedirectResult().then((result) => {
  if (result.credential) {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

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

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