Authenticate Using OAuth Providers with Cordova
Stay organized with collections
Save and categorize content based on your preferences.
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:
- In the
Firebase console
, open the
Dynamic Links
section.
-
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:
- In the
Firebase console
, open the
Auth
section.
- 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 modular API
import { GoogleAuthProvider } from "firebase/auth/cordova";
const provider = new GoogleAuthProvider();
Web namespaced API
var provider = new firebase.auth.GoogleAuthProvider();
Authenticate with Firebase using the Google provider object using
signInWithRedirect
. Note that
signInWithPopup
is
not supported in Cordova.
Web modular API
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;
});
Web namespaced API
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;
});
To handle the case where the app activity is destroyed before the sign-in
operation completes, call
getRedirectResult
when your app
loads.
Web modular API
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;
});
Web namespaced API
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;
});
The same mechanism can be used to link a new provider via
linkWithRedirect
or to reauthenticate with an existing provider
using
reauthenticateWithRedirect
.
Except as otherwise noted, the content of this page is licensed under the
Creative Commons Attribution 4.0 License
, and code samples are licensed under the
Apache 2.0 License
. For details, see the
Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-04-25 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]