How To Authenticate Facebook Login Using Firebase

Firebase is a portable and web application stage with instruments and framework intended to enable engineers to construct amazing applications. Firebase is comprised of reciprocal highlights that engineers can blend and-match to fit their needs. Administrations gave by Firebase that can enable designers to assemble and dispatch applications speedier includes:

  • Cloud Messaging
  • Validation
  • Realtime Database
  • Capacity
  • Crash Reporting to keep your applications steady and free from bugs.
  • Test Lab to convey brilliant applications.

Users can authenticate with Firebase using their Facebook accounts by integrating Facebook Login into the 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.

How To Authenticate Facebook Login Using Firebase

Prerequisites

  1. Add Firebase to your JavaScript project.
  2. On the Facebook for Developers site, get the App ID and an App Secret for your app
  3. Enable Facebook Login:
  1. In the Firebase console, open the Auth section.
  1. On the Sign in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
  1. 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.

Step 1:
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.)

Step 2:
Create an instance of the Facebook provider object

var provider = new firebase.auth.FacebookAuthProvider();

Step 3:
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');

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:

firebase.auth().languageCode = 'fr_FR';
// To apply the default browser preference instead of explicitly setting
it.
// firebase.auth().useDeviceLanguage();

Step 4:
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.

Step 5:
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;
// ...
});

Now the steps for authenticating facebook login are completed. You can successfully authenticate facebook login with firebase.

Check out the top 3 Cloud hosting services:

HostArmada
$1.79 /mo
Starting price
Visit HostArmada
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.5
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.0
IONOS
$1.00 /mo
Starting price
Visit IONOS
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.3
Hostinger
$1.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top