How to implement Facebook login in your Web app with Firebase ?

Firebase offers a great number of options to implement Login in your app. Some of which are:

Using Email.
Using Phone number.
Using Facebook.
Using Google, etc.

The best part is you don’t have to worry about handling the login flow, Firebase takes care of it.

Approach:

First of all, create a Firebase project by following these steps:

Go to https://console.firebase.google.com/ and login with your google account.
Create a project on Firebase.
Add Firebase Software Development Kit(SDK) in your App.

<!– Insert these scripts inside your body tag –>

<body>

<!–This is the most important script that has to be added –>

<script src=”/__/firebase/7.14.4/firebase-app.js”></script>

<!– In order to use Google login add this script –>

<script src=”/__/firebase/7.14.4/firebase-auth.js”></script>
</body>

Now that we have added these scripts in our app, we will now initialize the Firebase in our app.
In the Firebase console go to the app settings, from there copy App config object and paste it in your code.
App config object looks like this.

var firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "the-sender-id",
  appId: "the-app-id",
  measurementId: "G-measurement-id",
};

If you followed these steps correctly your app will be registered with Firebase.

Now we will enable Facebook login in our app by following these steps:

Open Facebook for developers, and create a new app.
After the app is created, go to the basic settings and you can get your App Id and an app secret from there.
Go to the Firebase console and open Auth section
Enable Facebook sign on the sign in method tab and enter your App Id and App secret there.
Firebase will provide you with your OAuth redirect URI, update this URI in Facebook settings:
Product -> Settings -> Valid OAuth Redirect URIs.
In your app create a Facebook provider object to handle login flow.

const FacebookAuth = new firebase.auth.FacebookAuthProvider();

Authenticate user by using the instance of object that you created with the Firebase.
You can either redirect the user to sign in page or open a pop-up window.

firebase.auth().signInWithPopup(FacebookAuth); //To sign in with pop-up.
firebase.auth().signInWithRedirect(FacebookAuth);//To sign in with redirect.

Facebook Login method is implemented in your app, now you are good to go.

Example:

We will create a simple react based web app with just the login button.

Code for the button component:

Javascript

import React, { Component } from "react"; 

import firebase from 'firebase'; 

class tutorial extends Component{ 
render(){ 

return( 
<div> 

   <button> { 

         // Facebook provider object is created here. 

          const FacebookAuth =  

              new firebase.auth.FacebookAuthProvider(); 

         // using the object we will authenticate the user. 

             firebase.auth().signInWithPopup(FacebookAuth); 

              }} > 

          Sign in with Facebook 

    </button> 

 </div> 

   ); 

  } 

 } 

 export default tutorial;

Code for your Firebase.ts file:

Javascript

import * as firebase from 'firebase'; 
const firebaseConfig = { 

  apiKey: "****", 

    authDomain: "****.firebaseapp.com", 

    databaseURL: "https://*****.firebaseio.com", 

    projectId: "****", 

    storageBucket: "****.appspot.com", 

    messagingSenderId: "****", 

    appId: "****", 

    measurementId: "****"
}; 
class Firebase { 

  constructor() { 

    firebase.initializeApp(firebaseConfig); 

  } 
} 

export default Firebase;

Output:

Article Tags :

JavaScript

ReactJS

Web Technologies

JavaScript-Questions