Authenticate Using Google Sign-In with JavaScript
–
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
<script
src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
<script>
// 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': 'user@code-sample.com'
});
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;
});
I hope you are enjoying with this post! Please share with you friends. Thank you so much!