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.
var firebaseConfig = {
apiKey: “AIzaSyBVcySiao1hFDqAbPcaIS1obhlAXifINZI”,
authDomain: “chat-app-1d1c0.firebaseapp.com”,
databaseURL: “https://chat-app-1d1c0.firebaseio.com",
projectId: “chat-app-1d1c0”,
storageBucket: “chat-app-1d1c0.appspot.com”,
messagingSenderId: “428785263912”,
appId: “1:428785263912:web:cbbdbf4a099af93e059c1d”
};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.
npm install --save firebaseonce you install the Firebase SDK in your app import it within your Vuejs component just like below.
import firebase from "firebase/app";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
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 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).
var firebaseConfig = {
apiKey: “AIzaSyBVcySiao1hFDqAbPcaIS1obhlAXifINZI”,
authDomain: “chat-app-1d1c0.firebaseapp.com”,
databaseURL: “https://chat-app-1d1c0.firebaseio.com",
projectId: “chat-app-1d1c0”,
storageBucket: “chat-app-1d1c0.appspot.com”,
messagingSenderId: “428785263912”,
appId: “1:428785263912:web:cbbdbf4a099af93e059c1d”
};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
<template>
<Button @click={handleGoogleLogin}>
Login with Google
</Button>
</template>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
methods: {
handleGoogleLogin(path, data) { // 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
methods: {
handleGoogleLogin(path, data) { // 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:
firebase.auth()
.getRedirectResult()
.then((result) => {
if (result.credential) {
/** @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.
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;
});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.
