Skip to content
Related Articles
Open in App
Not now

Related Articles

How to implement Google Login in your Web app with Firebase ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 12 Jun, 2020
Improve Article
Save Article

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.


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 SDKs to 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 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.

//To sign in with redirect. 

  • Google 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{
         onClick={() => {
     // Google provider object is created here.
    const googleAuth = 
          new firebase.auth.GoogleAuthProvider();
    // using the object we will authenticate the user.
                    }} >
          Sign in with Google
 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
Related Articles

Start Your Coding Journey Now!