Firebase Basic Authentication Part 1

Lukas Ruebbelke: [00:00] Hello, this is Lukas Ruebbelke, and welcome to part one of two of a series that I'm going to do showing you how to handle user authentication in your AngularJS application using the Firebase Simple login service.

[00:16] What I have here is a simple form that takes an email address and a password, and then I have two buttons, login and register, that we are going to wire up over the course of this video. In the code, we have two test fields that I've set the NG model to be newuser.email and newuser.password, respectively.

[00:40] On our two buttons, I'm calling login and register and passing in the email and password value. Then in our JavaScript, I have a main controller with a new user object to handle the state of the form, current user, which is null until we actually update it with the result of the login and register value.

[01:00] Then we have the login and register method, which we're going to be filling out, and then a reset form method that just resets the new user object to clear the form. The first thing that we need to do to enable authentication on our application is go to the forge by pointing that to our Firebase endpoint.

[01:18] There is a simple login button. We will scroll down to the authentication providers, and we are going to use email and password in this case, and check the enabled button to enable email/password authentication in our application.

[01:36] We'll scroll down and we'll see that we actually do not have any users registered with this application. I'm going to go ahead and add in an email address and a password to register, so we can use this to actually log in for the first time.

[01:55] Then we need to add in the Firebase Simple login JavaScript file in addition to our Firebase and AngularFire source file. Let me just paste that in. Now, we're ready to actually instantiate the Firebase Simple login service.

[02:15] I'm going to inject that into our main controller and then instantiate it, and assign the value to login service. The Firebase Simple login takes one parameter, which is a new Firebase reference, which takes one parameter as well, which is a Firebase endpoint.

[02:45] From here, we are ready to actually wire up our login method. Using our login service, we're going to call login. This method takes two parameters, the authentication provider that we want to use, which in this case is password, and a parameter object, where we will pass in the email and password values.

[03:17] Now, this method returns a promise with a single value which is the user that is returned from the login operation. We are going to set the current user value to the user object returned by calling login. Then we will go ahead and just reset the form to clear it out.

[03:44] Let's see this in action. I'll refresh the page, and then I will put in my username or my email address and password. Now, you can see that I'm displaying the email address on the user object that was returned.

[04:08] We're able to login, but let's go ahead and add in registration functionality. Using our login service, I'm going to call create user and pass in email and password. This also returns a promise, and we are essentially going to do the same thing that we were doing when we called login, which assign the user value to current user and then reset the form.

[04:39] Let's just refresh the page, and I want to register a new email address. Now, you can see I'm actually logged in with this new user, and I'm displaying the email address that I used to register. Let's actually jump into the forge and make sure that the email address that I used to register is actually in Firebase.

[05:07] I'll choose the email and password authentication provider, and I'll scroll down. You can see that both of the users that I registered actually are, indeed, there. Let's just review what we've done real quick.

[05:20] I added in the Firebase Simple login JavaScript file. I injected the Firebase Simple login service into my controller. I instantiated the Firebase Simple login service by passing in a new Firebase reference that was pointed to my Firebase endpoint.

[05:38] From there, I fleshed out the login functionality by calling login, sending in the appropriate authentication provider, as well as the email and password that I wanted to use, and then I set current user to the value of the promise that was returned. Then I did the same thing in register, but I called create user.

[06:02] This concludes part one of this two part series. Stay tuned for the next part, and I will catch you next time.