Sign in Users to Your Application with AngularFire Auth
In our application, we have a login page but it currently doesn't do anything. We need to let users login, and after successful login, we'll redirect them to the tasks page.
To do this, we'll inject the AngularFire Auth dependency and call signInWithEmailAndPassword when the user clicks the login button.
Jorge Vergara: [0:00] When the user clicks on the Continue button, they are going to call the handleOfForm method and they are going to pass the credentials.
[0:10] If we go into the Class, this is a placeholder method we have right here that takes an email and a password and needs to handle the logic differently depending on if the user is going to log in, sign up, or reset their password.
[0:26] First, to start using Firebase authentication, we are going to inject it into the Constructor. We import it from AngularFireAuth. Once we have that, we are going to handle what to do when the user logs in.
[0:42] For that, Firebase has a function called SignInWithEmailAndPassword. This function takes a couple of parameters. First, it takes the authentication instance that we are running. We get that with this.of. Second, it takes the email and third, it takes the user password.
[1:09] Once the user successfully logs in, this returns a promise and we want to be able to navigate the user to somewhere else. In our case, it can be the Home page. For that, let's grab here the Angular router. Then we can go back to our method, and after the user successfully logs in, we are going to call the navigateByURL function.
[1:42] To test that this is working, we're going to go into our Firebase console and here in the Authentication panel, we're going to add a new user. Then we're going to go back into our application and we're going to log in with that user.
[2:06] Once we successfully log in, we are redirected to the home page.