Things I Have Learned Using Google Firebase Part II
For the past few weeks, I have been coding and learning how to use firebase with my project, and in my last blog, we were going over the some of the features that firebase provides. And in today’s part II of the firebase blog series, we will be going over authentication using Google Firebase.
In my last blog, we went over how to setup firebase as a project, and web app, and how to use the database service that firebase provides. Today we will dive deeper into firebase and its authentication service. As we all know by now, authentication is very important but tedious at the same time, spending hours of research and coding, while the results might not be as fancy and visible to the users. Thanks to third party authentication service such as Google Firebase, we don’t have to write our own authentications. We simply start by setting up our authentication method through firebase (shown in the image below), and for demonstration purpose, we are only using email/password to sign in, but firebase offer so many other ways to link your accounts to your app.
Notice how there is email link (password-less sign-in) option that we didn’t enable, if we enable the feature, it will mean that firebase will send email to first time users and allow them to click on a link to verify and sign in their account. On a side note here, if we scrolled down the authentication page on firebase, we will see the image below with authorized domains, this means that only the following domains will be able to authorize the authentication services on our app, which is one of the cool security feature that firebase provides.
Once we enable allow users to sign up using their email and password, we need to add a few changes to our codes to access the authentication service. Remember in our last blog, we went over how to setup a file called firebase.js to import all the firebase services. One of the important feature we added was that we called db as firebase database, auth as firebase authentication, and storage as firebase storage service. Now it is time to access the authentication service by calling it in our codes.
Once we import the firebase.js file import { db, auth, storage } from './firebase'; we can quickly access the authentication service by calling auth.createUserWithEmailAndPassword() in our signup function, this function is pretty self explanatory, we are trying to access firebase authentication sign up with email and password. On the side note, we always want to use event.preventDefault() because it will allow the form (signup/ sign-in) to not refresh when we submit the form. the email and password was a state management tool that we used and stored, this way the user information will be stored and passed to the firebase authentication, and we will try to catch and display any error with an alert message. So firebase provides back-end validation for us, shown in the image below. Yes! firebase gives us free validation service and tells us if our email address is not valid when we sign up.
Before I explain the code .then( (authUser)=>{}), we need to take a look at another piece of code that will explain what authUser does. The code snippet shown below explains in details of what authUser does. We use React Hooks useEffect function, we use a listener auth.onAuthStateChanged(), this will listen for any single time any authentication changes, this function will run. If the user has logged in, set current user to the authUser, otherwise the user has logged out. And the last line of code in the snippet below means that every time the user and username state changes, the useEffect function will run. One note that we have in this code is that we set auth.onAuthStateChange function to a variable unsub, and then return it at the end of our useEffect function. This is to prevent too many listeners that will be fired off at the same time with useEffect, therefore we make it into a variable and return it at the end of the function, so it will perform some cleanup actions before the function will run again.
Once we setup our current user, we are tracking our current user with the state management, now we are updating our user profile on firebase to make sure the displayName is the username that we created with. And we can see with the image below, we can see bunch of test users that we created through our app and firebase has all the info of the users that we created.
In the previous code snippet, we also has a function called signIn, which is also very self explanatory. We are trying to create a sign-in method and verify the users who signs into our app. auth.signInWithEmailAndPassword(email, password) is the way that we access firebase authentication service and let them help us determine whether the user is signing in with correct email and password. And if there is any error, we will display that error message with an alert shown in the image below. We can see that firebase helped us determined whether it is our email or password is wrong when we try to sign in ( yes, we can change the error message for security purposes!)
Now that we have firebase authentication fully setup, feel free to play around with it! In the next blog of the firebase series, we will go over more features that Google Firebase has offered! Thanks for reading and stay tuned for the next part! In the mean time, feel free to check out my last blog about firebase part I and chat with me through my LinkedIn! Checkout the app that I built with google firebase!
