Module 5.3: Login Component & Firebase
Now let’s create a login component. Run ng generate component login in your terminal.
Next, open login.component.ts and create 2 variables, and a function, we need to declare one variable for the user’s email, and another variable for the user’s password. Make your login.component.ts look like the following:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
userEmail = '';
userPassword = '';
constructor() { }
ngOnInit() {
}
loginUser() {
// ensure the form has been completed correctly.
if (this.userEmail.trim() === '' || this.userPassword.trim() === '') {
// If any of the above are true, stop the function.
return;
}
// TO DO: send info to firebase
console.log('this.userEmail is now:', this.userEmail);
console.log('this.userPassword is now:', this.userPassword);
}
}Notice that we added userEmail and userPassword, and the loginUser() function.
Next, we'll put in our HTML. Open login.component.html and make sure it looks like the following:
Next, we'll need to style it a bit, so put the following in your login.component.css file:
And this is all great! Except, we can’t get to the login page yet because we haven’t set up the routing! Open our boss file, app.module.ts, and include the login route, make sure routes looks like the following, remember to keep ** last.
Now we need to update the links in the header - remember how we have a button in the navbar that says “Login”? That should probably direct the user to this login component we are building. Right now the “Login” button runs a login() function via a click handler.
Open header.component.html and find the Login button. Remove that click handler - instead, add a routerLink to redirect the user. The div should look like this, notice we removed the click handler and added in a routerLink to login.
Open header.component.ts and delete this old “login” function. Now, serve up the app and test the routing. Clicking on the “Login” button should route you to the /login page, where you should see the login form we’ve built. There should be no errors in the console, but if you try to use the login form, nothing happens! We haven’t actually added the code yet to link the input fields with our variables, or the Submit button with the “loginUser” function!
Next, open login.component.html and add the code to link the input fields with our variables. While we’re at it, let’s also make the enter button call the loginUser() function.
This should have been a review from when we did the Registration component previously. Serve up the website and try out the registration form. When you hit the submit button, if the form was completely filled out then our function should print the values to the console.
Connecting Login to Firebase
So we have things printing to the console, but we still need to actually pass this information to Firebase! While we’re dealing with the login component, let’s adjust it now, open login.component.ts and edit the file to reference a loginUserToFirebase() function that we will create later in our authentication service. We will create this function in our AuthService, so we will need to import and declare that too. Let's make our login.component.ts look like this:
You should see your editor putting a red underline underneath loginUserToFirebase becuase we haven't made that function yet. So, let’s make that loginUserToFirebase function. Open auth.service.ts and create that function now. While we’re in here, let’s clean up our existing register function by removing a few of the console.logs that we no longer need. See the finished product below.
So, now when you try and login you should see the information logged to the console! Now, let's make it actually work. The AngularFire2 package not only has that pre-built function that we used to handle registration, but it also has one to handle logging in! (and logging out, when we get there, eventually). Make your loginUserToFirebase look like this:
Give it a shot and try to login - it should succeed without and errors in the console. Not much will happen when you press Submit, no indication of success other than our console diplaying "Yay Logged In!", but no errors. Let’s work on that next - some kind of indication of success - some visual indicator that the user is currently logged in vs not. Next, we'll update the header on login, and redirect on register and login.
Last updated