7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Login Page and Controller

In this lesson, we'll build a login page for the app and create a controller that will allow users to log in.

3.4 Login Page and Controller

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as Your Back-End course for Tuts+. In this video, we are going to create our login page in our controller. We are also going to add some more functionality to our user service. First, let's create a template in our Templates folder called login.html. Inside login.html, we will first add our front banner. The name, which corresponds to our state, is going to be login, with the controller called login controller. Next, we will add a div with the class of grid container. Then we add an H1 element that says login, followed by a form tag. Inside, we will add two text inputs, one for the email address, the other for the password. Again, we have added the NG model so we can access the values of the form elements. Then finally, we will add our buttons. Here we are going to disable the login button if either input is empty. This button will execute the login user function when this button is clicked. The register user button will execute the register user function. After that, the login page is done. Let's go back to services.js so we can add some more methods to the user service. First, we are going to add an empty object to the service. Next, we need a way to track the currently logged in user. What we will do is use the service to set the currently logged in user. The setCurrentUser method takes an argument of user and stores it in the empty object that we just set up. Now that we have a current user, we need a way to retrieve that user. All this method does is return the value of the current object, then we need a way to return all of the users we have. This method is using the Firebase array to return all of our data. The last thing we need to add is a way to set our user status online. The user online method takes ideas in argument. We are going to use the ID, which in this case will be the Firebase ID generated when we saved the user profile. Using this ID, we will grab the correct record and update the online status to true with the Save method. After that, our service is finished for the moment. Let's go back to our controllers.js. I'm going to fold up our other controllers for the moment, just to get them out of our way. Then I am going to add a new controller named loginController. The controller has scope, state, myAuth, and userService injected. We will first add an empty object. Then we will add the login user function. Inside of this function, we will use the Angular Fire off with password method to login with Firebase authentication. Here we are passing the email and password supplied in the text inputs. Of course, we follow this by a success callback, and here's where we'll have to do some work to load the correct profile when we log on. Remember, we store the user login information in Firebase. This information is indexed by a random Firebase ID generated when we save the data. This profile also contains the Firebase authentication UID, the email address, and the online status of the user. The callback returns the authorization data of the user that has just logged in. Then we store this authorization data in a variable. Next, we check if we have authorization data and if so, we will grab all of the users with the getUser method. After that, we are going to use the angularFireLoaded method to handle the data once it is returned. The angularFireLoaded method also includes success and failure callbacks. Inside the success callback, we will set up a loop. We are cycling the loop over the returned user data, then we will check the login ID of the data versus the UID of the authorization data. Remember the login ID is the same as the UID returned from the auth data. If we find a match, we will set the matching data to the tempUser object. Here we are setting the ID of the Firebase record, the login ID, which is the UID of the authorization, and the user, which is the email. Then we set the user status to online. This will use the FBI ID, which again, is the ID generated when we add a record to Firebase to grab the user record. Then it will set the user status to online. Then we set the current user using the tempUser object we created. Remember the service is set up to accept an object as the current user. Then we will navigate home. If there is no off data, we will navigate home, as well. Then we will add our error call back for our off with password method. Here we are just logging the error that could cause authentication to fail. Also note that we could have added an error callback to the loaded method, but it is optional. Finally, we will add the register user function, which will allow users to register with the site. After that, our login controller is finished. In the next video, we will finish up our star controller and user service. After that, we will configure the home.html page.

Back to the top