Stay organized with collectionsSave and categorize content based on your preferences.
You can let your users authenticate with Firebase using their Facebook accounts
by integrating Facebook Login into your app. You can integrate Facebook Login
either by using the Firebase SDK to carry out the sign-in flow, or by carrying
out the Facebook Login flow manually and passing the resulting access token to
Firebase.
On theSign in methodtab, enable theFacebooksign-in
method and specify theApp IDandApp Secretyou got from Facebook.
Then, make sure yourOAuth redirect URI(e.g.my-app-12345.firebaseapp.com/__/auth/handler)
is listed as one of yourOAuth redirect URIsin your Facebook app's settings page on theFacebook for Developerssite in theProduct Settings > Facebook Loginconfig.
Handle the sign-in flow with the Firebase SDK
If you are building a web app, the easiest way to authenticate your users
with Firebase using their Facebook accounts is to handle the sign-in flow with
the Firebase JavaScript SDK. (If you want to authenticate a user in Node.js
or other non-browser environment, you must handle the sign-in flow manually.)
To handle the sign-in flow with the Firebase JavaScript SDK, follow these
steps:
Create an instance of the Facebook provider object:
Optional: To localize the provider's OAuth flow to the user's preferred
language without explicitly passing the relevant custom OAuth parameters, update the language
code on the Auth instance before starting the OAuth flow. For example:
Web
import{getAuth}from"firebase/auth";constauth=getAuth();auth.languageCode='it';// To apply the default browser preference instead of explicitly setting it.// auth.useDeviceLanguage();
Optional: Specify additional custom OAuth provider parameters
that you want to send with the OAuth request. To add a custom parameter, callsetCustomParameterson the initialized provider with an object containing the key
as specified by the OAuth provider documentation and the corresponding value. For example:
Authenticate with Firebase using the Facebook provider object. You can
prompt your users to sign in with their Facebook accounts either by opening a
pop-up window or by redirecting to the sign-in page. The redirect method is
preferred on mobile devices.
To sign in with a pop-up window, callsignInWithPopup:
Web
import{getAuth,signInWithPopup,FacebookAuthProvider}from"firebase/auth";constauth=getAuth();signInWithPopup(auth,provider).then((result)=>{// The signed-in user info.constuser=result.user;// This gives you a Facebook Access Token. You can use it to access the Facebook API.constcredential=FacebookAuthProvider.credentialFromResult(result);constaccessToken=credential.accessToken;// IdP data available using getAdditionalUserInfo(result)// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// The AuthCredential type that was used.constcredential=FacebookAuthProvider.credentialFromError(error);// ...});
firebase.auth().signInWithPopup(provider).then((result)=>{/** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// The signed-in user info.varuser=result.user;// IdP data available in result.additionalUserInfo.profile.// ...// This gives you a Facebook Access Token. You can use it to access the Facebook API.varaccessToken=credential.accessToken;// ...}).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});
Then, you can also retrieve the Facebook provider's OAuth token by callinggetRedirectResultwhen your page loads:
Web
import{getAuth,getRedirectResult,FacebookAuthProvider}from"firebase/auth";constauth=getAuth();getRedirectResult(auth).then((result)=>{// This gives you a Facebook Access Token. You can use it to access the Facebook API.constcredential=FacebookAuthProvider.credentialFromResult(result);consttoken=credential.accessToken;constuser=result.user;// IdP data available using getAdditionalUserInfo(result)// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// AuthCredential type that was used.constcredential=FacebookAuthProvider.credentialFromError(error);// ...});
firebase.auth().getRedirectResult().then((result)=>{if(result.credential){/** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// This gives you a Facebook Access Token. You can use it to access the Facebook API.vartoken=credential.accessToken;// ...}// The signed-in user info.varuser=result.user;// IdP data available in result.additionalUserInfo.profile.// ...}).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});
If you enabled theOne account per email addresssetting in theFirebaseconsole,
when a user tries to sign in a to a provider (such as Facebook) with an email that already
exists for another Firebase user's provider (such as Google), the errorauth/account-exists-with-different-credentialis thrown along with anAuthCredentialobject (Facebook access token). To complete the sign in to the
intended provider, the user has to sign first to the existing provider (Google) and then link to the
formerAuthCredential(Facebook access token).
Popup mode
If you usesignInWithPopup, you can handleauth/account-exists-with-different-credentialerrors with code like the following
example:
This error is handled in a similar way in the redirect mode, with the difference that the pending
credential has to be cached between page redirects (for example, using session storage).
Advanced: Handle the sign-in flow manually
You can also authenticate with Firebase using a Facebook account by handling
the sign-in flow with the Facebook Login JavaScript SDK:
Integrate Facebook Login into your app by following thedeveloper docs.
Be sure to configure Facebook Login with your Facebook app ID:
<scriptsrc="//connect.facebook.net/en_US/sdk.js"></script>
<script>FB.init({/*********************************************************************** TODO(Developer): Change the value below with your Facebook app ID. ***********************************************************************/appId:'<YOUR_FACEBOOK_APP_ID>',status:true,xfbml:true,version:'v2.6',});</script>
We also setup a listener on the Facebook auth state:
In the Facebook auth state callback, exchange the auth token from Facebook's auth response for a Firebase credential and sign-in Firebase:
Web
import{getAuth,onAuthStateChanged,signInWithCredential,signOut,FacebookAuthProvider}from"firebase/auth";constauth=getAuth();functioncheckLoginState(response){if(response.authResponse){// User is signed-in Facebook.constunsubscribe=onAuthStateChanged(auth,(firebaseUser)=>{unsubscribe();// Check if we are already signed-in Firebase with the correct user.if(!isUserEqual(response.authResponse,firebaseUser)){// Build Firebase credential with the Facebook auth token.constcredential=FacebookAuthProvider.credential(response.authResponse.accessToken);// Sign in with the credential from the Facebook user.signInWithCredential(auth,credential).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// The AuthCredential type that was used.constcredential=FacebookAuthProvider.credentialFromError(error);// ...});}else{// User is already signed-in Firebase with the correct user.}});}else{// User is signed-out of Facebook.signOut(auth);}}
functioncheckLoginState(response){if(response.authResponse){// User is signed-in Facebook.varunsubscribe=firebase.auth().onAuthStateChanged((firebaseUser)=>{unsubscribe();// Check if we are already signed-in Firebase with the correct user.if(!isUserEqual(response.authResponse,firebaseUser)){// Build Firebase credential with the Facebook auth token.varcredential=firebase.auth.FacebookAuthProvider.credential(response.authResponse.accessToken);// Sign in with the credential from the Facebook user.firebase.auth().signInWithCredential(credential).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});}else{// User is already signed-in Firebase with the correct user.}});}else{// User is signed-out of Facebook.firebase.auth().signOut();}}
This is also where you can catch and handle errors. For a list of error codes have a look at theAuth Reference Docs.
Also you should check that the Facebook user is not already signed-in Firebase to avoid un-needed re-auth:
Web
import{FacebookAuthProvider}from"firebase/auth";functionisUserEqual(facebookAuthResponse,firebaseUser){if(firebaseUser){constproviderData=firebaseUser.providerData;for(leti=0;i<providerData.length;i++){if(providerData[i].providerId===FacebookAuthProvider.PROVIDER_ID&&providerData[i].uid===facebookAuthResponse.userID){// We don't need to re-auth the Firebase connection.returntrue;}}}returnfalse;}
functionisUserEqual(facebookAuthResponse,firebaseUser){if(firebaseUser){varproviderData=firebaseUser.providerData;for(vari=0;i<providerData.length;i++){if(providerData[i].providerId===firebase.auth.FacebookAuthProvider.PROVIDER_ID&&providerData[i].uid===facebookAuthResponse.userID){// We don't need to re-auth the Firebase connection.returntrue;}}}returnfalse;}
To authenticate with Firebase in a Node.js application:
Sign in the user with their Facebook Account and get the user's Facebook
access token. For example, sign in the user in a browser as described in
theHandle the sign-in
flow manuallysection, but send the access token to your Node.js
application instead of using it in the client app.
After you get the user's Facebook access token, use it to build a
Credential object and then sign in the user with the credential:
Web
import{getAuth,signInWithCredential,FacebookAuthProvider}from"firebase/auth";// Sign in with the credential from the Facebook user.constauth=getAuth();signInWithCredential(auth,credential).then((result)=>{// Signed inconstcredential=FacebookAuthProvider.credentialFromResult(result);}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// The AuthCredential type that was used.constcredential=FacebookAuthProvider.credentialFromError(error);// ...});
// Sign in with the credential from the Facebook user.firebase.auth().signInWithCredential(credential).then((result)=>{// Signed invarcredential=result.credential;// ...}).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});
Customizing the redirect domain for Facebook sign-in
On project creation, Firebase will provision a unique subdomain for your project:https://my-app-12345.firebaseapp.com.
This will also be used as the redirect mechanism for OAuth sign in. That domain would need to be
allowed for all supported OAuth providers. However, this means that users may see that
domain while signing in to Facebook before redirecting back to the application:Continue to: https://my-app-12345.firebaseapp.com.
To avoid displaying your subdomain, you can set up a custom domain withFirebase Hosting:
Follow steps 1 through 3 inSet up your domain forHosting. When you verify
your domain ownership,Hostingprovisions an SSL certificate for your custom domain.
Add your custom domain to the list of authorized domains in theFirebaseconsole:auth.custom.domain.com.
In the Facebook developer console or OAuth setup page, whitelist the URL of the redirect page,
which will be accessible on your custom domain:https://auth.custom.domain.com/__/auth/handler.
When you initialize the JavaScript library, specify your custom domain with theauthDomainfield:
After a user signs in for the first time, a new user account is created and
linked to the credentials—that is, the user name and password, phone
number, or auth provider information—the user signed in with. This new
account is stored as part of your Firebase project, and can be used to identify
a user across every app in your project, regardless of how the user signs in.
In your apps, the recommended way to know the auth status of your user is to
set an observer on theAuthobject. You can then get the user's
basic profile information from theUserobject. SeeManage Users.
In yourFirebase Realtime DatabaseandCloud StorageSecurity Rules, you can
get the signed-in user's unique user ID from theauthvariable,
and use it to control what data a user can access.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-05 UTC."],[],[],null,[]]
