# 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.

```javascript
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.

```javascript
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:

```javascript
  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:

```javascript
  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!
