Module 5.1: Registration

Write the registration function

Open the auth.service.ts file. We are going to write a few functions in this file related to authentication so that, eventually we’ll have a function for registering new users, another function for logging in existing users, and another function for signing out existing users.

Let’s start out with the function to handle registration, we’ll name it registerUserWithFirebase since that’s a nice descriptive name of what the function’s purpose is. This function will need to accept 2 arguments - the email, and the password. The function will then take care of creating a new user in Firebase. But for now, let’s just log the arguments to the console to make sure we’re receiving them without issue.

registerUserWithFirebase(email, password) {
    console.log('registerUser() received the following email:', email);
    console.log('registerUser() received the following password:', password);
  }

Now we need our “RegisterComponent” to access this new function we just created and pass it the email and password that we’re pulling out of the input fields. Open register.component.ts and import our newly created service.

import { AuthService } from '../services/auth.service';

Now here’s something we haven’t dealt with yet - one file is referencing another!

Anytime we need to reference an outside file, that file not only needs to be imported, but it also needs to be instantiated via the constructor. This is similar to what we do in app.module.ts where we import something at the top of the file, but then we also have to list it under “declarations”, “imports”, or “providers”. Same idea here, but we have to list it inside the “constructor” function. The generally accepted convention is to make the first letter lowercase.

Add some code to make our constructor look like this:

  constructor(private authService: AuthService) { }

What this says is that we are going to create a “private” variable (meaning not exported, other files can’t access this variable) named “authService”, and this variable is of type “AuthService” - the structure that we create in the auth.service.ts file, with the variables and functions that we create. (Right now it’s kinda sparse - our AuthService doesn’t have any variables, and only one function - named registerUserWithFirebase).

And now, we can access functions and variables of that “AuthService” file by referencing authService! We already know that we want to access that registerUserWithFirebase function we just made… Let’s edit our existing registerUser so it references the function in our service file - remember, we want to pass it the email and password from our registration form.

Replace the console logs in registerUser with the following:

  this.authService.registerUserWithFirebase( this.newUserEmail.trim(), this.newUserPassword.trim() );

Serve up your website and make sure you don’t have any errors in the console. Enter some simple information for a new user, and submit the form. You should see the information appear in the console, this time printed from the AuthService.

Next, we'll be setting up Firebase to actually be able to create users in the DB!