Google Login using Firebase Vuejs

Objective:-
We are going to implement Google login using firebase in Vuejs, user will be able to login using his/her google account for which we are going to use firebase authentication.

Pre-requisite:-
- Firebase account.
- Basic knowlage of Javascript and Vuejs.

Step 1
first, you have to create a Firebase account and create your project or open an existing one to add Firebase Authentication.

Step 2
After creating a new account or opening an existing one, you have to create a Web application under firebase your account.

Once you follow all the steps for creating a web application you will get a firebase config JSON (just like below)which we are going to use further in our code.

Step 3
After creating a web application under your firebase project, go to the left side panel and click on the Authentication tab then on the sign-in-method panel choose what kind of authentication you want to integrate into your app, for now, enable google authentication as we are going to integrate google login into our app

Note:- when you choose third-party authentication other than google like ( Facebook, Twitter ) you will have to configure the app not only on the firebase console but also at the partner’s own control panel as they have their API to handle authentication and other connection.

with all of the above steps done you are good with firebase console-setup, now we have to write some code to integrate firebase and configure it into your project.

Step 4
First, you have to install the firebase npm module in your app.

once you install the Firebase SDK in your app import it within your Vuejs component just like below.

Now we are going to initialize Firebase in your app, Replace the following with your app’s Firebase project configuration which we earlier saved in step 2


// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field

Note:- It’s recommended to initialize firebase in mounted method under your Vuejs component

firebase config-sample JSON, (below is the sample of config JSON which is provided by firebase to configure their SDK for WEB applications).

and with that, we are successfully initialized Firebase SDK in your project, now we have to initiate google sign-in authentication using firebase.

Step 4
after initializing the Firebase SDK now we are going to call the firebase authentication method for that first create a simple button on which we can invoke google sign-in

now you have to initiate the authentication flow, by following the code you can Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

  • To sign in with a pop-up window, call signInWithPopup
    // Create an instance of the Google provider object:
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
/** @type {firebase.auth.OAuthCredential} */
var credential = result.credential;

// This gives you a Google Access Token. You can use it to
access the Google API.
var token = credential.accessToken; // The signed-in user info, it will give you all basic info
of logged-in user
var user = result.user;

}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;

});
}
}

Also notice that you can retrieve the Google provider’s OAuth token which can be used to fetch additional data using the Google APIs.

  • To sign in by redirecting to the sign-in page, call signInWithRedirect
    // Create an instance of the Google provider object:
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider); }
}

Then, you can also retrieve the Google provider’s OAuth token by calling getRedirectResult when your page loads:

Note:- call get getRedirectResult on component load to retrieve token and other data after successfully redirected from google sign-in page.

And boom that's it! You successfully authenticate users with google now you can store the data, request the user’s full profile, or anything. It’s a good idea to start a session and save the user’s name, user ID, and perhaps email address for further reference.