AngularJS Authentication: Secure Your App with Auth0

Traditional session-based authentication for web applications has worked well up until now, but there are limitations to this approach when building single page applications. Let's look at how traditional authentication works and the associated problems.

Adding authentication to AngularJS apps can be tricky. Let's look at what the challenges are and how we can solve them.

JSON Web Token (JWT) is an open standard for transmitting claims securely. This means it can be used as an authentication mechanism, and it turns out that it's the perfect way to authenticate an AngularJS app.

To add authentication to our AngularJS app we need to be able to issue JSON Web Tokens. We could write the code to do this ourselves, but Auth0 does it for us for free. Let's register and configure our account.

We need an AngularJS application to add authentication to. Let's set up a simple app that will have a home and profile route.

The first step in adding authentication to our AngularJS app is to give users a way to log in. Let's redirect them to Auth0 where they can do so.

We're getting the result of a successful authentication transaction back at our AngularJS application, but we need to make use of it somehow. Let's take a look at how we can use the parseHash method from auth0.js to do so.

Logging a user out of the application is just a matter of removing their tokens from local storage. Since there's no stateful session on the server to worry about, log out becomes a client-side only concern.

Auth0 gives us immediate access to our users' profiles which is very useful for setting up a dedicated profile area for them. Let's use the the payload of the ID token that comes back after authentication to show a profile area.

Probably the most useful thing we can do with the JSON Web Tokens we get back from Auth0 is protect resources at a data API that we create. Let's see how to set up an authentication middleware to use at a protected endpoint.

To access our protected resources from the server, we need to add the user's JWT as an Authorization header on each request we send. Let's see how to set that up using Angular's HTTP interceptors.

We've got everything in place but there are a couple areas that could be cleaned up a bit.

Multi-factor authentication can strengthen our application's security in a big way. Let's see how we can apply it to our authentication flow.

Thanks for taking the course!