Angular 2 Dashboard Tutorial - Part 2: Email Authentication

Nov 24, 2016 • Han Che, Klaus Welle

UPDATE (24. Juli 2017):
This article was published when Angular 2 was still unstable. Since then, the Angular team published two major (breaking) releases. Struggling with limited time and resources, we are not able to provide support for angular 2 and the contents of this blog post. We also deprecated our Platform V1 to be able to focus on the release of a stable Version 2 where we focus on a better user and tenant management. If you are interested in receiving news of our platform V2, feel free to subscribe to our newsletter at Selfbits.io.

Create your Angular 2 Dashboard - Part 2: Email Authentication

This part will cover a simple email sign up and sign in.
If you haven’t done the setup yet, please go to Part 1 to do so.
Feel free to skip this part to go directly to social (facebook) authentication using Selfbits.

wait for the change to set in and type into the address line of your browser

http://localhost:3000

Now it should redirect the url to the login page

http://localhost:3000/#/login

Note: We’ll create later our own AuthModule with more advanced routing features in Part 2.5.

Step 2: Connect ng2-admin to Selfbits

In order to connect to the Selfbits app we’ve created earlier, we need to provide ng2-admin the
credentials of our Selfbits app. We can provide them globally using the providers property inside our app.module
and use the @Inject decorator to retrieve them wherever we need.

Note: Step 2 illustrates a couple of cool Angular 2 concepts. For faster implementation you can skip this step and go to Step 3 where we’ll achieve the same thing with a SDK from Selfbits in much shorter time.

Step 2.1 Create Auth Service

First let’s create an AuthService. Following the StyleGuide, we create a shared folder inside src and then a services folder to house our auth.service.ts

First we import the AuthService (since we already know it’s location) and declare a typing for our config variable.

You should have the next two blocks already in place, if you’ve followed the setup from part 1. We need to provide the Selfbits app credentials to our ng2-admin. The best way to accomplish it is by using Angular’s ngModule.

As you can see the signup method is basically a http post wrapper containing the information provided by the APPCONFIG variable in app.module.

Note: the signup method returns an Observable of type Response, which is the default return type of Angular’s http requests. Also in order to be able to use Http, you need to have import the HttpModule, which ng2-admin did already in the app.module.

**Note:** There's is another approach to create forms in Angular 2 called **template-driven** approach, which is faster to implement but offers less control. For authorization I always recommend using the data-driven approach.

Inside register component’s constructor you can see that the form has 2 controls (‘name’ and ‘email’) and 1 control group (‘passwords’), which consists of 2 controls (‘password’ and ‘repeatPassword’). Each of them have some basic Angular 2 validators, which we’ll leave for now.

Import and inject our AuthService into the constructor and call the signup method from our service.

As signup returns an Observable, we need to subscribe to it. If the http request was successful, it should pop an alert with a response of status 200. Alternatively console.log the response instead of using alert.

Change the type of values to any to avoid TypeScript Errors.

Let’s test it! Wait for the app to compile, go to

http://localhost:3000/#/register

Type in some credentials and click Sign up!

Note: The form validators we’ve left untouched are now kicking in. For example, each field needs to be longer than 4 characters or it’ll be invalid.

In fact, let’s head back to our Selfbits app and check if the user is registered!

Enter the credentials of the user we’ve just created. If everything goes right, we should get redirected to

http://localhost:3000/#/pages/dashboard

Step 4: Error Handling

So what happens if the user types in the wrong email or password? We need to prompt the user in case there has been an error.

First, let’s see what happens if the user does login with the wrong password.

Go to

http://localhost:3000

and type in the user email with a wrong password

The console will log out the the error, in particular the response body will contain the error message. In this case it’s as expected a 401 Unauthorized error.

We could now add more if statement for various response status. The proper way however is to fully utilize our response observable by adding a 2nd callback to the subscribe method. Below is a simple example on how to add error message for the user.

Summary

In this first part we’ve covered a basic email authentication process, upon which the user will get redirected to a default page. We’ve connected our ng2-admin to a live backend services and learned how to provide and retrieve variables globally in our angular 2 app.

In the next part we’ll cover the famous social authentication with facebook!