For this week’s blog I will explain two ways to create a simple and easy user authentication process. The first method is through email and password, and I will also discuss on how to do this through a third party authenticator. For this example, I will use Google’s authenticator.
I will focus on these functions:
- auth.signInWithPopup()
- auth.onAuthStateChanged()
- auth.createUserWithEmailAndPassword()
First, we have to understand what is an open subscription. auth.onAuthStateChanged() is an open messaging system between our application and our firebase app. Whenever any changes occur on on firebase from any source relating to our application, Firebase sends out a message that says that the status of the user has updated whether they’ve signed in through some service such as our Google sign or our email and password sign up or they’ve signed out, and then they will give us back two things, an unsubscribe function, and a user object, and we could call a function to put the returned user object into the state.
To use this on our react lifecycle process, we would create an unsubscribe function and bind it to the returned function on component did mount. Then on component will unmount, we would call the unsubscribe from auth function.
Next, to sign in with a third party authenticator, you would create a function like this
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account'});
export const signInWithGoogle = () = > auth.signInWithPopup(provider);
This snip of code exports the function auth.signInWithPopup and uses the google provider object.
And that’s all, you just have to import this function and bind it to any button you would like, and the google sign in will popup and take care of the rest.
With a third party authenticator, users can just use sign and with Google a lot sign and is actually a very tedious and difficult thing to set up from scratch, but by using firebase we got access to it with just a couple configurations and that’s why firebase is such an incredible platform.
