Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Firebase Authentication

Hello, everyone. This is Reggie Dawson. Welcome to the use Firebase as your back end course for Tuts+. So far, we have set up our product listing in our admin area in our project. In this video, we're going to use Firebase authentication to add users to our project and control access to pages. With the features in Firebase, we could have easily built our own authentication system. Instead of us having to worry about things like verifying in emails in the proper format, Firebase will take care of this for us. Firebase allows us to use email password, Facebook, Twitter, GitHub, Google, anonymous, and custom authentication. We can add authentication to our app in the Firebase dashboard. Let's go to the Log In & Auth link. Here we will see tabs for the various authentication methods available to us. In order to use one, we first have to click on the Enable check box on the tab that we want to use. Let's Enable Email & Password Authentication. Once we enable, we will get a password reset form and a list of registered users. With the password reset form, we can format the email users receive when they need to recover their password. The register users will display any users we have, as well as letting you delete their user account and reset their password. We also have a user UID which is an ID generated by Firebase. This ID is how your authentication is tracked in Firebase. Also at the top we have a drop down for session length which controls how long a user will remain logged into your system. This setting will apply to any authentication provider that you use. After we turn on our authentication provider, next we need to go to our product listing.js. Since the product listing is the entry to our admin area, we need to check for authentication before we allow access to this area of our site. The first thing we need to do is add a variable to hold our authorization data. We use the Firebase getOff() method to check if an authorized user is logged in. After that, we can respond accordingly. getOff() if we return null if there's no logged in user, so if we have data users logged in. If a user of our site is not logged in, then they should not be able to access this page. We will navigate to the login page if they aren't logged in. Next, we will create a register page which allows a user to register with the site. Let's create a page called registered.html. We're starting with the standard HTML file like we've been setting up in this whole project. Again we have our bootstrap and custom CSS file references. We also changed the page title to register user. First, we add our div with the class of container fluid, then we add a form tag followed by a text input. The form has a ID of register form and the input is for the user's email address. Then we add two more inputs for the password and to confirm the password. When we set the input type to password, the characters in this input will be obscured. Finally, we add our buttons. Once again we have disabled our button until we have validated our data. The last thing we need to do is add our references to our Javascript files. And as you can see I've added a reference to the register.js file. After that, let's create register.js. First you add our Firebase reference and some global variables, then we're going to set up a change event listener in the register forum. As far as the validation is concerned, we're just going to make sure that the passwords match. We don't need to validate the emails in a proper format as Firebase will take care of that for us. First, we grab our password inputs. Next we need to make sure that the values of the password inputs match. If they do match you'll enable the button. Otherwise, we will disable the button. Then we will create a function called registerUser. The first thing we need to do in this function is grab the email and password. Then we use our Firebase reference with the createUser method. We use the email and password from our forum in our createUser function. Then we are going to use a callback again. Let's add the callback just above the registerUser function, this returns any errors as well as the saved userData. First, we will check for an error. Inside we will use a switch statement to check the return error code and give the user a feedback. We will alert the user if the email is taken or the email is not a valid format. Remember I said the advantage of using Firebase for authentication is that it handles the details such as these, now if there isn't an error this means the registration is good, in that case we will let the user know. After alerting the user we will navigate to the index.html page. Next, we have to add the cancel function. If the user clicks the Cancel button. We will navigate to the index.html page as well. The last thing we need to do is set up the click event handler for our buttons. After that, our register page is ready. Now we need a way to log in once we are registered. Copy register.html and rename it to login.html. First we will change the title to login. Then we will remove the confirm password input. Next we will add a logon button to the register and cancel buttons that we are going to keep. Finally we change the script reference from register.js to login.js, then create login.js. First we will add the cancelLogin function. Nothing special here. All we are doing is changing location when the user cancels. The registerUser function also just navigates to a page. This time the register page. Next, we create our logInUser function. First, we're going to grab our email and password inputs. Then we add our Firebase reference. This time we are declaring it inside of our function, as opposed to globally, since no other function is needed. Then we're going to use the Firebase authWithPassword method to log in with the email and password provided in the text inputs. Firebase includes methods for each different authentication provider. Again we're going to add our callback, the callback will take our usual format every and returns either an error or authentication data. We're going to alert on an error and change location to the index page when we log on successfully. We could have also navigated directly to the admin page, but we will leave it up to the user to click on the link. Finally, we just need a click event listeners. After that we are finished with the login page. Before we continue, I wanna set up a way to notify users that they are logged in. We also need a way to log the user out of they are logged in. Go back to product listing.js. We could add our notification on all pages, but for now we would just put it on our product listing page. Inside of our authorization check, we're going to add to the nav bar. We're using the property to display the email address of the logged in user. Then we add a button that allows the user to log out. After that we append the HTML to the nav bar and configure a click listener for the log out button. The last thing we need to do is add the logAll function. We are using the Firebase unAuth method to log the user out. After that, we navigate to the home page. Save everything in Preview. Click on the Admin button and register an account. I had to fix the register button, because it still had the disabled attached to it. After that, we should be able to log in. When we log in and navigate to the admin area, we should see our email address displayed. If you log out you should be unable to navigate to the admin area. Our catalog is pretty much complete, but before we finish, I wanna briefly talk about another layer of security in Firebase. We can also set up read and write rules in the Security & Rules tab of our Firebase dashboard. Here we could specify by UID of our users who is capable of saving new products. If we really wanted to lock down our app we could get as precise as we like. We can also configure data validation here to ensure the data that we are getting is in the desired format. Check out the Firebase documentation for an idea on what you can do with security rules. Our app is now complete. In the next video, we will deploy our app to Firebase hosting.

Back to the top