How to implement Google 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 Google.
  • Using Facebook 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 SDKs to 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 google login in our app by following these steps:

  • Go to the Firebase console and open Auth section
  • Enable google sign on the sign in method tab and save the settings.
  • In your app create a google provider object to handle login flow.
const GoogleAuth = new firebase.auth.GoogleAuthProvider();
  • 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.
//To sign in with pop-up.
firebase.auth().signInWithPopup(googleAuth);

//To sign in with redirect. 
firebase.auth().signInWithRedirect(googleAuth);

  • Google 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

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from "react";
import firebase from 'firebase';
  
class tutorial extends Component{
render(){
return(
<div>
   <button
         onClick={() => {
           
     // Google provider object is created here.
    const googleAuth = 
          new firebase.auth.GoogleAuthProvider();
               
    // using the object we will authenticate the user.
    firebase.auth().signInWithPopup(googleAuth);
                    }} >
          Sign in with Google
    </button>
 </div>
   );
  }
 }
 export default tutorial;

chevron_right


Code for your Firebase.ts file:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


Output:




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 contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.