Here we have Part II of Ado Kukic's series on Angular 2 authentication. Don't forget to read Part I if you missed it!
Adding Authentication to Your Angular 2 App
The majority of apps require some type of authentication. Our application today is no different. In the next section, I am going to show you how to add authentication to your Angular 2 application the right way. We are going to be using Auth0 as our identity platform. We'll use Auth0 as it allows us to easily issue JSON Web Tokens (JWTs), but the concepts we'll cover can be applied to any token based authentication system. If you don't already have an Auth0 account, sign up for a free one now.
Login to your Auth0 management dashboard and navigate to the client app you wish to use. Get the Domain, Client Id, and Client Secret of this app. That's all we'll need for now.
Securing Our Server
Before we implement authentication on the front end in our Angular 2 application, let's secure our backend server. Open up the
server.js file located in your
server directory and make the following edits:
That's all we'll need to do on the server. Restart the server and try to navigate to
localhost:3001/api/deals/private and you'll see an error message saying missing authorization header. Our private API route is now secured. Let's get to implementing authentication in our Angular 2 app.
Adding Authentication to the Front-End
We'll make use of the Angular 2 JWT library to provide us the foundation for implementing authentication in our app. You can get the library for your app by running
npm install angular2-jwt --save.
We'll first start by creating an authentication service that we can use throughout our app. Create a new file titled
auth.service.ts. Out auth service implementation follows:
As we saw from our authentication service, we'll be using the Auth0 Lock widget. Lock is a powerful and beautiful widget that handles many authentication use cases including username and password sign in, account sign up, social connections, enterprise federation, and more. You can learn about all of Lock's functionality from the docs.
Let's make sure to include the Lock widget in our application. Open your
index.html file and we'll load Lock from the Auth0 CDN.
Angular 2 Authentication All In
The Angular 2 router comes with a powerful feature called route guards that allows us to programmatically determine whether a user can access the route or not. Route guards in Angular 2 can be compared to middleware in Express.js for example.
We'll create an authentication route guard that will check to see if a user is logged in before displaying the route. Create a new file titled
auth-guard.service.tsand add the following code:
To implement this route guard in our routes, let's go ahead and open our
app.routing.ts file. Here, we'll include our auth guard service and enable it on our secret route. Let's take a look at the implementation.
That's all there is to it. Our route is now protected at the routing level.
If you recall we included a stub for the AuthService in our deal components. Since the authentication service is now implemented our placeholder functionality will just work. We'll see the correct behavior displayed based on user state.
We will need to update our root component though as we didn't include authentication specific functionality there. I did this on purpose so we could go through the example line by line. Let's do that next.
There is one final update we need to make. If you try to access the
/secretroute now, even if you are logged in, you won't get the list of secret deals. This is because we are not passing the JWT to the backend. We'll have to update our deal service.
Updating the Deal Service
We need to update the call to the
/api/deals/private to include our JWT. There are a couple of different ways to accomplish this. We could use the existing
http call and add the correct header, but there is an easier way. The Angular 2 JWT library comes with an AuthHTTP method that will automatically take care of this for us. Let's see how we're going to implement this in our application.
That's it. We are now ready to test our application. If your Node.js server is not running, make sure to start it up first. Head over to
localhost:4200 and you should automatically be redirected to
localhost:4200/deals and see the list of public deals.
Next, click on the login screen and you will be presented with the Lock widget. Login or sign up and you will be redirected back to the deals page, but now the UI will look slightly different. The main menu will have a new option for Private Deals, and the message at the bottom will also show you a link to the private deals. Instead of the Login link in the navbar, you'll also be presented with a Logout link instead. Finally, click on the Public Deals link to see our list of exclusive private deals.
You just wrote and authenticated an Angular 2.0 app. Congrats!
Angular 2 is finally out and ready for prime time. It's been a long time coming, but it's finally here and I couldn't be more excited. In this tutorial, we looked at some of the ways you can write Angular 2 components and services. We implemented token based authentication with Auth0 and Lock. But that's just scratching the surface.
Angular 2 provides a lot of great features out of the box like pipes, i18n, and much more. Auth0 can help secure your Angular 2 apps with not just state of the art authentication, but enhanced features like multifactor auth, anomaly detection, enterprise federation, single sign-on (SSO), and more.