Auth0 badgeAuth0 University

Angular JS Authentication: Securing your app with Auth0

Angular JS Authentication: Securing your app with Auth0

  1. Course Catalog
  2. Angular JS Authentication: Securing your app with Auth0
  3. Redirecting on Invalid Requests

Redirecting on Invalid Requests

Okay, so we need some way to handle the case where a user makes a request to the server with a JSON Web Token that is no longer valid. Maybe it expired or somebody tried tampering with it so the digital signature can no longer be verified. Whatever the case might be, it would signal to us that the user needs to login again. And what we can do to handle this is register an HTTP interceptor that looks for a status code, like a 401, for example.

And if that status code is received, it will sign the user out on the front end and redirect them to the home route where they can login again. So let's set up that interceptor. We'll go back over here to our app.js file. And let's set up the interceptor in the config block. So let's come down just above this HTTP provider here. And this is where we can create a function to register the interceptor.

So we'll call it redirect. So function redirect. And this will take any dependencies that we need to inject. We're going to need Q, which is the async service from AngularJS. We'll need Angular's injector. And then we're going to need our auth service and our store service. And then also, once again, location. All right, so here in the function body is where we actually set the interceptor up.

And what we'll do is return an object. So this object is going to have a response error, so response error goes here as the first property. And that's going to be a function. And this will receive a rejection if there's one present, so that can go in as our parameter to our function. And what we want to check for is if we get a rejection, so if a rejection comes through in the response, and if the status of that rejection is 401, so if the server tells us that we're not authorized, well then we can go auth signout.

And that will set the user's authentication status in our auth service to false. And then we also want to remove the items in local storage so we'll remove the profile and we'll also remove the ID token. And then we want to send the user back to the home route, so we'll do location path home. And that, of course, will be the spot from which they can again login. And so this function is going to need to return something. And what we need to do is return a rejection from Q.

So we'll do return Q reject the rejection. Okay, so we've wired up what we want to happen when a 401 rejection comes back, but we still need to let Angular know about this interceptor. And to make that happen, we first need to create a factory out of it. So we can use the provide service that we injected up here, and we can use the factory method to create a quick factory. So we want to create a factory called redirect.

And that is going to take our redirect function. And now, with this redirect factory in place, we can actually push it onto the array of HTTP interceptors. So we'll just copy this, paste it here, and let's push onto it this redirect factory. Okay, so let's see if this all works now in our application. Back over here at our app, let's logout and then let's refresh. And we'll login once again.

So we've got our JSON Web Token and our profile. Now, let's go to the profile page and we can get a secret message. And that goes through as we'd expect. And what we'll do now is we'll say, maybe, tamper with the JSON Web Token a little bit. Let's remove just one letter. And the way that our Angular storage library works is it actually caches what we have here in local storage. So, just to see the effects of this, let's refresh one more time.

And now, let's send a request. We'll do get secret message. And as you see, we get redirected here to the home route. And if we take a look at some other areas here in our dev tools, we can see we've got our 401 error being reported in the console. And then if we take a look at the network tab, in the requests that went through we see we've got our 401 unauthorized error. So now, anytime that the JSON Web Token gets expired, whenever the user makes a request with it and that request inevitably gets rejected, it will send the user to the home route so that they can go in and login again.

So, as far as the Angular side goes, we've pretty much got all of our bases covered for handling authentication. In the next lecture, we'll cover some more of the features that Auth0 provides and we'll see how to get up and running with social login, and also multi-factor authentication.