Module 5: Authentication

Goals

In this module, our goals are to:

• Learn about Angular services

• Connect the “Register” page with the Firebase backend

• Create a “Login” component, and connect that to Firebase

Learn about Angular Services

We’ve talked about Angular “components”, now we need to discuss “services”. What’s the need they fill? Why bother? Well, here are the 2 main benefits to using services.

• Shared memory location -

  What if we need to transfer and maintain some information between components? A single service can be shared throughout the entire website, and used to hold shared information. Keep track of who is logged in, what name to display in the header, what name should be listed as the “author” for a new message, what kinds of permissions (admin vs not) the user has.

• Shared functions -

  Not only can we share stored information (variables) across our website, we can also share functions. If you constantly need to make similar database queries, why not write one function in a service and use that instead? This way you don’t have to write the same database query over and over again. This makes it easier to update and debug.

It’s generally considered best practice to make queries to your backend from a service as opposed to inside components.

Create a service

Let’s create a service now - and luckily the Angular CLI handles a lot of the work for us again. The following code creates a service named “AuthService” inside a “services” folder. If the folder doesn’t exist (and it doesn’t - not for us right now), then the CLI will create that folder.

ng generate service services/auth

As usual, we need to inform the “boss” file. Add this import to app.module.ts.

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

Pattern in app.module.ts

Maybe you’ve noticed a pattern inside app.module.ts regarding in which array we list things. Notice how all of the components we’ve created are listed under declarations? What about all the modules being listed under imports? You might be wondering where services go right now, and if you guessed under providers then you would be 100% correct! Include the service we just created.

providers: [
    AuthService
  ],

Now, serve your app and make sure you have no errors.

Next, we'll start with our registration.

Registration