Authentication for traditional web applications is fairly straight-forward: we send our credentials to the server, a session is created, and a cookie is returned to be saved in the browser. This method works well for round-trip applications, but it isn't a good way to do authentication in modern single page apps, like those built with AngularJS.
In this course we are going to learn about the challenges associated with traditional authentication and how to use what is arguably the best alternative: the JSON Web Token.
Using that knowledge, we'll implement authentication in an AngularJS app that makes calls to an Express API. We'll cover how to address all the challenges associated with keeping a single page application in check when it comes to stateless authentication. This can be a tricky matter since the front end and backend apps are effectively separated, but we'll find out how to leverage our user's JWT to address the challenges.
We'll use Auth0 as an identity and authentication server so that we don't have to roll our own.
Thanks for taking the course! I'm Ryan, and I want to teach you how to secure your AngularJS application with JSON Web Tokens.
Let's take a look at the application we'll build and where you can get the source code.
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.
To demonstrate how to protect data resources that are on a server, we'll set up a simple Express app that will expose two routes: one that is public and the other that is private.
We need some methods for allowing users to log in and log out. Let's create those methods and use them to call Auth0's Lock widget so that we can retrieve a JWT for the user.
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.
Since the AngularJS app is stateless with respect to the backend, whenever we refresh the page, the user's authentication status will be lost. Let's set up some logic to fix this.
What happens if the user sends a request with an invalid JWT that gets rejected by the server? Ideally we should redirect them to the spot they login from automatically. Let's set up some logic to handle that.
Many people prefer to authenticate into an application using a social identity provider. Let's see how we can easily set up Twitter as a social provider.
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!
When he's not coding, Ryan is hanging out with his wife, playing guitar, or nerding out about outer space.