How To Authenticate Using Google Sign-In with JavaScript in Firebase?

Let’s start to authenticate with firebase using Google Accounts. Before start to authentications follow the below steps.

1. Add Firebase to your JavaScript project

2. Enable Google Sign-In in the Firebase console

Add Firebase to your JavaScript project -

// Set the configuration for your app

// Initialize Firebase

var config = {

apiKey: "AIza33ACyqBfafJ32Rtt5R12MVvXSBvHa6fD1Q4X",

authDomain: "fir-demo-63b26.firebaseapp.com",

databaseURL: "https://fir-demo-63b26.firebaseio.com",

projectId: "fir-demo-63b16",

storageBucket: "fir-demo-63b26.appspot.com",

messagingSenderId: "44244534636121"

};

firebase.initializeApp(config);

</script>

Create an instance of the Google Provider -

var provider = new firebase.auth.GoogleAuthProvider();

Specify additional OAuth 2.0 scopes - Optional

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

To localize the provider's OAuth flow - Optional

firebase.auth().languageCode = 'pt';

// To apply the default browser preference instead of explicitly setting it.

// firebase.auth().useDeviceLanguage();

Specify additional custom OAuth provider - Optional

provider.setCustomParameters({

'login_hint': '[email protected]'

});

Authenticate with Firebase using the Google provider object-

firebase.auth().signInWithPopup(provider).then(function(result) {

// This gives you a Google Access Token. You can use it to access the Google API.

var token = result.credential.accessToken;

// The signed-in user info.

var user = result.user;

// ...

}).catch(function(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;

});

To sign in by redirecting to the sign-in page, call signInWithRedirect -

firebase.auth().signInWithRedirect(provider);

We can also retrieve the Google provider's OAuth token by calling getRedirectResult -

firebase.auth().getRedirectResult().then(function(result) {

if (result.credential) {

// This gives you a Google Access Token. You can use it to access the Google API.

var token = result.credential.accessToken;

// ...

}

// The signed-in user info.

var user = result.user;

}).catch(function(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;

});

Stayed Informed - Firebase Tutorial for Android and IOS

I hope you are enjoying with this post! Please share with you friends. Thank you so much!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.