Firebase Google Sign-up vs Sign-In

#firebase #react

Recently while making a Blog Website, I faced an issue.
I only wanted to allow existing users to Sign In using Firebase Google Authentication.

But there are no separate functions available to do SignUp and SignIn. After lots of errors and talking with the community, I came up with a work around.

Google Authentication Function

Firebase is really kind to provide us with a lot of different Authentication functions. I have not used all of them, as Google Authentication is all we need right?
Below is a short demo of the authentication functions :

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
      .signInWithPopup(provider)
      .then((result) => { 
  var loggedInUser = result.user;
  console.log(loggedInUser);
  }
 }).catch((error) => {
  var errorMessage = error.message;
  console.error(errorMessage)
 });
}

This is simple right? But wait.
Even new users can Sign In.

So how do we get past it?

Check if the user is new

Firebase provides us the result object on successful Google Sign In that has properties including :

credentials
user
additionalUserInfo

Among these, for identifying new users, the 3rd one is of importance to us.

If we go ahead and log the `result.additionalUserInfo` we get the following data :

 {
   isNewUser: false,
   profile:{
     email: "vinitman35@gmail.com",
     family_name: "Gupta",
     given_name: "Vinit",
     granted_scopes:      
      "https://www.googleapis.com/auth/userinfo.email, 
      https://www.googleapis.com/auth/userinfo.profile",
     id: "some__id",
     locale: "en",
     name: "Vinit Gupta",
     picture: "https://lh3.googleusercontent.com/a-/AOh14GjmIVT8JkOa- 6uOlTrBMayyqyZktgj3Hh0wDYiEHtU=s96-c",
    verified_email: true
   }
  [[Prototype]]: Object
providerId: "google.com"
 }

As you can see, the isNewUser is set to false for a user that has already been signed-up.

We can use this property to check if the user is Signing In for the first time

Prevent New User from Signing In

Now that we have a way to differentiate the old and new users, we can move ahead.

To prevent a new user, we will take the following steps:

Let the user Sign In ( I know we have to prevent this, just bear with me 🙇‍♂️🙇‍♂️
Check if the result.additionalUserInfo.isNewUser returns true or false.
If its false, then we can proceed, no issues.
If its true, we have to do 2 things :
- Delete the user
- Sign Out the user from the browser

Implementation of the above process :

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

    function handleGoogleSignIn(){

      firebase.auth()
      .signInWithPopup(provider)
      .then((result) => {
  var loggedInUser = result.user;
  const isNewUser = result.additionalUserInfo.isNewUser;

  if(isNewUser){
    //delete user if the user is new
     loggedInUser.delete().then(()=>{
      firebase.auth().signOut().then(() => {
        console.log("Signed Out!")
        alert("Please Sign Up as an Admin First!!")
      })
     });
  }
  console.log("is new user :", result.additionalUserInfo.isNewUser)
//redirect to home page
else {
    console.log("is new user :", result.additionalUserInfo.isNewUser)
    window.location = "/";
  }
}).catch((error) => {
  var errorMessage = error.message;
  console.error(errorMessage)
});
  }