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)
});
}
Hope you enjoyed this simple hack!! Follow for more such weekly tricksπ¨βπ»π©βπ»
Top comments (3)
A slight correction,
const isNewUser = result._tokenResponse.isNewUser;
//currently isNewUser is within _tokenResponse obj
Thanks ,I am trying to solve this issue from tomorrow .After searching since 1 day ,I am able to solve it now
Very helpful, thanks for this bro.
Thanks for you comment.