Firebase Google Sign-up vs Sign-In
Tags: firebase, react
Published: 2021-08-09 06:35:18

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 :
```javascript
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 : 
```javascript
 {
   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:
1. Let the user Sign In ( I know we have to prevent this, just bear with me 🙇‍♂️🙇‍♂️
2. Check if the `result.additionalUserInfo.isNewUser` returns true or false.
3. If its `false`, then we can proceed, no issues.
4. If its `true`, we have to do 2 things : 
    * Delete the user
    * Sign Out the user from the browser

#### Implementation of the above process : 

```javascript
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)
});
  }
``` 

Hope you enjoyed this simple hack!! Follow for more such weekly tricks👨‍💻👩‍💻