In the last part, we set up our data models and integrated them into our Angular app. If you need to catch up you can read the last part here. In this part, we’re going to start using our services to build sign in and sign up pages so users can sign up for the app.

Angular Material

Before we start with any code, I’m going to need a little help. I’m not much of a CSS wiz so I’m going to install the Angular Material library to help me out. If you’re unfamiliar with Angular Material you’re in for a treat. It is a component library for Angular that includes all the components you’ll need to create a full application. As the name implies, it provides you with drop-in components that implement Google’s Material Design. Google is the pioneer of Material design so it’s exciting to be able to use a library created by Google implementing its own design principle.

I’m also going to use the Teradata Covalent add on for Angular Material. The Covalent library gives us a few things that the basic Angular Material library does not, and it’s honestly a nice add on to use.

To get started we need to install 4 packages.

npm i -s @angular/material @angular/cdk @covalent/core hammerjs

Next, we’re going to import hammerjs into the main.ts file.

After that’s done we need to import BrowserAnimationsModule in app.module.ts .

Theming

Angular Material and Covalent give us some killer theming mechanisms.

By integrating the material and covalent theme using the built-in Angular Material color schemes we now have a global theme in 12 lines.

The last thing you have to do is import the Covalent platform styles in your angular.json file.

If you forget to do this then none of the Covalent stuff will work!

The Auth Page

Right now we have this Auth page that has a router placeholder for the sign-in and sign-up pages. We are going to style the auth page in a way that will render these two pages inside a card.

First, we’ll have to import the MatSidenav and MatCard modules in our AuthModule

Then we can go ahead with our layout and the styles.

auth.component.scss

Now we get this nice placeholder for our auth routes

The Sign In Page

Angular has some pretty awesome built-in form handling mechanisms, which we’re going to use quite a lot. Before we can use any of it, we have to import all our modules into the sign-in.module.ts

Then we’re going to layout a blank sign-in form

Now we have something resembling a proper sign-in form with a link to sign up.

Now that we have a nice form it actually has to do something. To do that we’re going to use FormGroup and FormControl from Angular’s core library.

Now we can integrate that into our form.

You can see that we have added visual error for the user as well as disabling the sign-in button before the user has entered all their information.

Validation works!

Lastly, we need to have a method that takes all this information and send it to our AuthService .

import the auth service

create a sign-in method that sends the email and password to Firebase Auth

make sure the form uses the signIn method on submit

The only thing we really have to do is import the AuthService in the constructor and Angular’s dependency injection will take care of the rest for us. Now we’re clear to pass in the email and password to the signIn function and then tack on the submit method in the form.

Once the button inside the form is pressed it will trigger the signIn function, which will pass the email and password tot he auth.signIn functions, which will call Firebase Auth, and then if the user gives their correct info the auth.signIn function will send the user to the /main/notes page. The last thing we’ll do to this is add a title so users know what page they’re on.

A simple h2 tag will suffice

The Sign Up Page

There really won’t be anything different about the sign-up page. There is really only a small difference in the component TypeScript file.

sign-up.component.ts

Obviously we’re going to try and get the user’s first and last name, but what we’re going to do is construct an IUser object in the signUp method. If you’ll remember from the auth.service.ts the signUp method there takes an IUser as well as a password so that’s what we’ll give it. You’ll notice immediately that the Id , ProfilePhoto , FCMToken , and CreatedOn are all set as blank. This is because the signIn method in auth.service.ts takes care of setting the Id and CreatedOn for us. The FCMToken and ProfilePhoto really isn’t that much of a concern at the moment.

Error Handling

What happens if the user doesn’t enter the right email or password? What we have now doesn’t exactly give good user feedback because it will basically not do anything. This isn’t really the kind of user experience we want, so I’ve devised a universal auth error handling strategy.

Whenever we get an auth error Firebase Auth will send a code and a message.