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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!