Sign in Facebook sign in
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, calladdScope. For example:
provider.addScope('user_birthday');
See the authentication provider documentation.
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:
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:
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.
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;
}).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
Popup mode
// Step 1.
// User tries to sign in to Facebook.
auth.signInWithPopup(newfirebase.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 sign-in methods for this email.
auth.fetchSignInMethodsForEmail(email).then(function(methods) {
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[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.
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = getProviderForProviderId(methods[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.
Related Posts:
- How do i change my Name
- How to edit date of birth on Facebook
- Vidio Facebook
- Reset my Ig Password
- Enter date of Birth
- Facebook book app Download
- How to share to a group on Facebook
- Call Instagram Help
- Change the language on Facebook
- Vacation countdown clock for Facebook
- I can t deactivate my Facebook Account
- Who Viewed My Instagram Account
- Facebook Login In Mobile Phone l
- How To Create A Poll On Facebook Profile
// 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.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred){
// Facebook account successfully linked to the existing Firebase user.
0 comments:
Post a Comment
Facebook has greatly reduced the distribution of our stories in our readers' newsfeeds and is instead promoting mainstream media sources. When you share to your friends, however, you greatly help distribute our content. Please take a moment and consider sharing this article with your friends and family. Thank you.