Authentication is one of those things like death and taxes; at some point we all have to write an application that has it. Angular makes it dead simple wire up authentication through mechanisms like:
- Route Guards
- Request Handlers
- Error Handlers
I want to walk you through building some simple authentication in Angular using JWT as the authentication mechanism.
Route Guards
Route guards give you the ability to control access to a particular route in your application. I’m not going to go into too much detail on this because there is a huge list of amazing resources discussing this. For this, we want to focus on creating a route guard with the CanActivate implementation.
In the above example, in our canActivate function, we check if our token is expired. If its expired, we want to navigate the user to the login page.
Next, we need to hook this up into our routes we want to protect. Its pretty simple, in the route definition all you have to do is add a property called canActivate and reference our new auth guard.
In this example, we want to protect the dashboard from being access but we need to let anyone access the login page.
Auth Service
Next, we need to create a service that will handle our authentication and handling our JWT token. Wait what is a JWT? JWT stands for JSON Web Token. Essentially its a token that represents a claim between 2 parties; client and server in our case. These tokens typically have a id (user id) and expiration attached to them.
This service will handle:
- Getting the token from local storage
- Setting the token in local storage
- Checking if the token is expired
- HTTP Post to log us in
Request Handlers
JWT tokens are not like cookies, they aren’t automatically sent when you make requests. You have to manually add them to the header or the query string. So that means every request we make needs to attach this token to the header so our server can validate it. Angular has a variety of ways we can do this, I decided to go with overriding the BaseRequestOptions and automatically appending headers to every request.
Now, we need to tell Angular to use this class instead of the base one, we can do that via providers like so:
Error Handlers
If a user gets logged out or happens to try to visit a page that they are not authorized to visit, our server might throw a 403 error. We can globally handle this overriding the ErrorHandler class and redirecting them there.
Next we need to tell Angular to use this error handler instead of the default like so:
Wrapping Up
This was relatively easy to wire up using Angular’s amazing framework’s hooks. In summary, we did the following:
- Using Route Guards to prevent unauthorized to routes
- Automatically appending authentication tokens to HTTP requests
- Handling 403 errors via a global error handler class
I hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript tips/opinions/projects/articles/etc!
