Firebase Features

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

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 providerOptional
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!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions