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.


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

  • Go to 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 –>


<!–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>

  • 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: "",
  databaseURL: "",
  projectId: "your-project-id",
  storageBucket: "",
  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.


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

Code for the button component:






import React, { Component } from "react";
import firebase from 'firebase';
class tutorial extends Component{
   <button> {
         // Facebook provider object is created here.
          const FacebookAuth = 
              new firebase.auth.FacebookAuthProvider();
         // using the object we will authenticate the user.
              }} >
          Sign in with Facebook
 export default tutorial;


Code for your Firebase.ts file:






import * as firebase from 'firebase';
const firebaseConfig = {
  apiKey: "****",
    authDomain: "****",
    databaseURL: "https://*****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"
class Firebase {
  constructor() {
export default Firebase;




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.