Boilerplate JWT Auth0 Angular4
Need: Boilerplate code to enable users to authenticate for Angular 4 applications. Secure sending of authentication to APIs on other domains will be required in some cases.
Using Auth0 allows us to easily get authentication up without having to fuss with a database or server side code. I believe it is better to focus on the requirements of the application rather than worrying about doing boilerplate authentication code on both the client and server machines for everything. More info on the actual code in below sections.
JWT enables us to send the authentication to other servers. PHP can easily consume a JWT token and check it against a public key (or also generate them against the private key). Similarly, if you implement more complex REST API services on an external VPS you can use the same JWT token to validate against the additional API(s).
The demo can be found here. It is a very simple login. The credentials for this example are:
You will first see this page:
This contains the login component within the router-outlet of the index component. Clicking login calls the Auth0 external login:
Login with the credentials provided above, or if you want with your Google account. You can also sign up and make your own account – but that is a feature you would typically disable on a real administrative login. Upon hitting the login button you should get the admin area:
This is the example component that is restricted with CanActivate within our Angular App. You can also see the appearance of a Log Out button in the navigation – other navigation could also be added.
High Level Overview
I started with the samples by the Auth0 team but found that on traditional hosting like Namecheap (i.e. where the only server side scripts you could really run are PHP, no Node, .Net, etc) that the samples broke because the crawlback URL wouldn’t actually resolve due to the limited server and the authentication handler method wasn’t actually called. I updated the boilerplate code to have routes restricted using CanActivate, like in the previous post, so that there can be administrative routes as well as unprotected ones. In addition, there is an index component that contains the navigation and router outlet as well as a login component that is routed when the user is not authenticated.
The full code for this can be found on GitHub.
One of the main updates to the original sample code is implementing an AuthGuard so that routes can be protected by CanActivate. Let’s see that code below:
This time the canActivate method returns an actual boolean, rather than an Observable<boolean>.
I created an index component that the navigation and router-outlet sit within. See below for the HTML:
Within the TypeScript file we tell the index to handle authentication if there are any hash tags in the URL. This is an important update because Auth0 will callback to the main URL with the token info appended to a hashtag, i.e. #key-here. You can’t use Hash based routing because of this without some fuss, and if the routed URL is requested you will get a 404 without proper server setup. I fixed this by just redirecting the routes to the main app, but that means the hash tag would either be removed if a callback route is called or a 404 would be called without a redirect. Having the index handle the token callback fixes this:
I also wanted to have a specific component that is called when the user is not authorized. It might seem weird to call it a “login” component – but you could actually embed the auth0 login into your website and use this page to serve it, or you could have other features on the unauthorized page like links or other Angular components. For this example the HTML is quite simple:
And the TypeScript file:
Let’s see how you can now set up routes to your components:
All that is necessary is to call canActivate property with AuthGuard, you can also use canActivateChild like in the other authentication post to decrease the amount of typing required. There you go! I hope you find this boilerplate code useful for your application.