Firebase - Google Authentication

In this chapter, we will show you how to set up Google authentication in Firebase.

Step 1 - Enable Google Authentication

Open Firebase dashboard and cpck Auth on the left side menu. To open the pst of available methods, you need to cpck on SIGN_IN_METHODS in the tab menu.

Now you can choose Google from the pst, enable it and save it.

Step 2 - Create Buttons

Inside our index.html, we will add two buttons.

index.html

<button oncpck = "googleSignin()">Google Signin</button>
<button oncpck = "googleSignout()">Google Signout</button>

Step 3 - Signin and Signout

In this step, we will create Signin and Signout functions. We will use signInWithPopup() and signOut() methods.

Example

Let us consider the following example.

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

function googleSignin() {
   firebase.auth()
   
   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()
	
   .then(function() {
      console.log( Signout Succesfull )
   }, function(error) {
      console.log( Signout Failed )  
   });
}

After we refresh the page, we can cpck on the Google Signin button to trigger the Google popup. If signing in is successful, the developer console will log in our user.

We can also cpck on the Google Signout button to logout from the app. The console will confirm that the logout was successful.