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.
Before you begin
- Add Firebase to your JavaScript project.
- On the Facebook for Developers
site, get the App ID and an App Secret for your app.
- Enable Facebook Login:
- In the Firebase console, open the Auth section.
- On the Sign in method tab, enable the Facebook sign-in
method and specify the App ID and App Secret you got from Facebook.
- Then, make sure your OAuth redirect URI (e.g.
my-app-12345.firebaseapp.com/__/auth/handler
)
is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the
Facebook for Developers site in the
Product Settings > Facebook Login config.
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:
var provider = new firebase.auth.FacebookAuthProvider();
- Optional: Specify additional OAuth 2.0 scopes that you
want to request from the authentication provider. To add a scope, call
addScope
. For example:
provider.addScope('user_birthday');
See the authentication provider
documentation.
- Optional: Specify additional custom OAuth provider parameters
that you want to send with the OAuth request. To add a custom parameter, call
setCustomParameters
on the initialized provider with an object containing the key
as specified by the OAuth provider documentation and the corresponding value. For example:
provider.setCustomParameters({
'display': 'popup'
});
Reserved required OAuth parameters are not allowed and will be ignored.
See the
authentication provider reference for more details.
- 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, call
signInWithPopup
:
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook 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 email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
Also notice that you can retrieve the Facebook provider's OAuth token which can be used to fetch additional data using the Facebook APIs.
This is also where you can catch and handle errors. For a list of error codes have a look at the Auth Reference Docs.
- To sign in by redirecting to the sign-in page, call
signInWithRedirect
:
firebase.auth().signInWithRedirect(provider);
Then, you can also retrieve the Facebook provider's OAuth token by calling
getRedirectResult
when your page loads:
firebase.auth().getRedirectResult().then(function(result) {
if (result.credential) {
// This gives you a Facebook Access Token. You can use it to access the Facebook 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 email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
This is also where you can catch and handle errors. For a list of error codes have a look at the Auth Reference Docs.
Handling account-exists-with-different-credential Errors
If you enabled the One account per email address setting in the Firebase console,
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 error
auth/account-exists-with-different-credential
is thrown along with an
AuthCredential
object (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
former AuthCredential
(Facebook access token).
Popup mode
If you use signInWithPopup
, you can handle
auth/account-exists-with-different-credential
errors with code like the following
example:
// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(function(error) {
// An error happened.
if (error.code === 'auth/account-exists-with-different-credential') {
// Step 2.
// User's email already exists.
// The pending Facebook credential.
var pendingCred = error.credential;
// The provider account's email address.
var email = error.email;
// Get registered providers for this email.
auth.fetchProvidersForEmail(email).then(function(providers) {
// Step 3.
// If the user has several providers,
// the first provider in the list will be the "recommended" provider to use.
if (providers[0] === 'password') {
// Asks the user his password.
// In real scenario, you should handle this asynchronously.
var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
auth.signInWithEmailAndPassword(email, password).then(function(user) {
// Step 4a.
return user.link(pendingCred);
}).then(function() {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
return;
}
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = getProviderForProviderId(providers[0]);
// At this point, you should let the user know that he already has an account
// but with a different provider, and let him validate the fact he wants to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
auth.signInWithPopup(provider).then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account he owns.
// Step 4b.
// Link to Facebook credential.
// As we have access to the pending credential, we can directly call the link method.
result.user.link(pendingCred).then(function() {
// Facebook account successfully linked to the existing Firebase user.
goToApp();
});
});
});
}
});
Redirect mode
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 the
developer docs.
Be sure to configure Facebook Login with your Facebook app ID:
<script src="//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:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
-
After you integrate Facebook Login, add a Facebook Login button on your web pages:
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large"></fb:login-button>
- In the Facebook auth state callback, exchange the auth token from Facebook's auth response for a Firebase credential and sign-in Firebase:
function checkLoginState(event) {
if (event.authResponse) {
// User is signed-in Facebook.
var unsubscribe = firebase.auth().onAuthStateChanged(function(firebaseUser) {
unsubscribe();
// Check if we are already signed-in Firebase with the correct user.
if (!isUserEqual(event.authResponse, firebaseUser)) {
// Build Firebase credential with the Facebook auth token.
var credential = firebase.auth.FacebookAuthProvider.credential(
event.authResponse.accessToken);
// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = 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 the Auth Reference Docs.
- Also you should check that the Facebook user is not already signed-in Firebase to avoid un-needed re-auth:
function isUserEqual(facebookAuthResponse, firebaseUser) {
if (firebaseUser) {
var providerData = firebaseUser.providerData;
for (var i = 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.
return true;
}
}
}
return false;
}
Advanced: Authenticate with Firebase in Node.js
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
the Handle the sign-in
flow manually section, 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:
// Build Firebase credential with the Facebook access token.
var credential = firebase.auth.FacebookAuthProvider.credential(access_token);
// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(credential).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
Next steps
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, 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 the Auth
object. You can then get the user's
basic profile information from the User
object. See
Manage Users.
In your Firebase Realtime Database and Firebase Storage
Security Rules, you can
get the signed-in user's unique user ID from the auth
variable,
and use it to control what data a user can access.
You can allow users to sign in to your app using multiple authentication
providers by linking auth provider credentials to an
existing user account.
To sign out a user, call
signOut
:
firebase.auth().signOut().then(function() {
// Sign-out successful.
}, function(error) {
// An error happened.
});