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

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;

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 :

Web Technologies