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. Setting Up the NodeJs App

Setting Up the NodeJs App

SETTING UP MIDDLEWARE

Okay, the next thing we're going to want to do is set up our server. So let's head over to the command line, and what we need to do is actually set up a brand new project. We need to set up a separate project for the backend, because remember, our front end and our backends are effectively separated. So we need to go through the npm init stages again for a separate project.

But why don't we keep the same route directory. Let's go into our angularjs-auth directory that we've already set up, and let's create a new directory called server. So we'll mkdir server, and then let's go into server. Within server, why don't we actually do npm init again. So npm init. And the name for this one can be kept as server, or we can do something like angularjs-auth-server. We can keep the defaults here. We'll say okay to that.

And then we need to install the dependencies here. What we'll need are just a few dependencies, so let's install Express. We'll also want express-jwt, which is going to be a package that provides us some middleware that allows us to check for a JSON Web Token when it comes in, and then pass the user through to access the resource they're looking for if they have a valid JWT. And then, because we're doing cross-origin requests, we'll need cors.

Once that gets installed, let's head back over to our editor, and we can actually set things up in our server directory here. So you see, we've got our node_modules and our package.json file. Let's set up just one more file that we'll need, and let's call this one index.js.

And then here, within our index file, let's require the things we'll need. So we're going to need express. So our var express = require('express'), and then we can initialize our app. So we can say our var app = express(). Then we'll need our JWT middleware, so let's say our var jwt = require('express-jwt'). And then, finally, we'll need cors. So our var cors = require('cors'). Then after this, the first thing we should actually do is tell our app that it should be using cors. So we can do app.use(cors()).

Then why don't we set up our middleware next? If you're not too familiar with middleware, essentially what it does is it allows us to provide this layer of protection that requests to our endpoints have to pass through in order to get at what they're looking for. This is useful for us, because it allows us to set up some checks before the request is able to pass through to the resource.

So instead of checking within each of our endpoints explicitly, whether the user has a valid JSON Web Token, what we can do is instead set up a middleware once, and then just apply that middleware to our different endpoints. So let's see what that looks like. We can say var authCheck. That will be the name of our middleware. We'll say that's equal to jwt, which is our middleware package. What we want to do is provide it a configuration object. On this object, what we need is our secret. This is going to come from Auth0.

The secret keys that come from Auth0 are Base64URL encoded, so we need to actually decode these. So let's do a new Buffer, and the first argument to this is going to be our secret. To get the secret, we can go over here to our Auth0 dashboard, and then within our applications that we have listed here, we can go to our default app. And we can just copy over our secret.

I'll be changing this secret key of mine right after this video is done, so there's no sense in trying to use it, just as a heads up. Then after this argument, we need to say base64. So that's going to decode it as Base64. And then the next key is going to be our audience. The audience is going to be our Auth0 Client ID. So we come over here, we can grab our public client ID. We'll copy that over, and we can just put that in as a string.

SETTING UP THE ENDPOINTS

All right, so that's our JWT middleware. And this middleware can now be applied anywhere we want. And we can get a sense of that if we set up some endpoints. This is going to be a really simple app. All we really need are two endpoints, one being public and the other being private, just so we can see how it works when we actually protect our data api.

The first one we'll do is our public endpoint. So we'll do app.get, and we want to point this to api/public. So a really simple endpoint called public, and then let's give a callback that takes a request and a response. For the response, let's respond with some JSON. So we'll do response.json, and it's going to be an object that we return with a message. And we'll say, maybe, "Hello, from a public endpoint. You don't need to be authenticated." All right, cool. So that's our public endpoint.

Now, let's just do what is, essentially, almost the same thing, except protected by our middleware for a private endpoint. So up here, let's change this over to private. And within the message now, we can say, "This is going to be a private endpoint." And we do need to be authenticated to see this endpoint.

Now, all we really need to do to protect this endpoint is pass in our middleware. And the middleware goes as the second argument. So we can pass in authCheck, just like that. So now, this endpoint will be protected by our authCheck middleware, and it will require that there's an Authorization header present before it allows the user to get through to this endpoint.

Then, as the final step, let's just do app.listen. We'll listen, maybe, on port 3001. And then, maybe let's just log to the console that everything is working. So we'll say, "Listening on localhost 3001."

Okay, so now we can test this out to see if it's working properly. So let's go over here to the console, and let's do node index.js to fire up the server. We get "Listening on port 3001." And then we can just go over to a new tab, and let's go to localhost 3001. We'll go to api, and let's try the public endpoint. So there we go. We've got our JSON response. We've got our message coming through just fine.

And if we go to private now, what we see is we've got "No authorization token found." So this private endpoint is now protected and not accessible unless the user sends a valid json web token.

So this is really powerful, because now you can set up any kind of private endpoints that you want. You can set up endpoints where you maybe retrieve some data from a database, and only if the user has a valid JWT will they be able to get that data. So the routes are protected. But, of course, now we need to actually get a json web token for our users, and we need to be able to send it from Angular to our back end when we make an HTTP request for these resources.

We'll take a look at how to do that in the next lecture.