JWT Authentication Setup

Man 1: [00:01] Here we have an app where we can get random users. Our goal for this video is to add authentication to this application.

[00:09] The first thing that we're gong to need is a form. Instead of an action we'll have an ng-Submit="vm.login(vm.username, vm.password)."

[00:18] Then we'll have an ng label input with the out label of Username and the type is text and the model is vm.username. Then we'll have another one of these for password. It will be a type password. We'll also add a break to make things look nice. Then we'll have a button with login and it's type submit.

[00:39] Let's go to our app. We'll have a vm.login = login. Login takes a user name and password. We'll create a user factory that will have the login. That takes the username, password. Then we'll say VM.user equals the data that we get back.

[00:58] In case of failure, we're going to make a simple function called handleError. We'll define that here. That will take a response and it will simply alert ('Error: ' + response.data). We'll use that function here, as well.

[01:12] Let's create this user factory, app.factory Userfactory. Function login takes your user name and password and it will return $HTTP.get. Actually, it will be a post because we're locking. We're going to post the data. API_URL/login and the data will be userName, userName, password, password.

[01:36] Then we'll export that and we'll inject HTTP_API_URL. Then we'll want to inject the user factory here.

[01:46] Let's go ahead and refresh. We have user name, kentcdodds and cannot post a login because we haven't created that yet but we can still get these users. That's important for now.

[01:55] We'll go to server and we'll make a login. App.post/login. Now we need to authenticate the user. We're gong to ass a middleware function here, authenticate. We'll have our util functions. Authenticate will be one of those that takes a request, a response.

[02:13] And then, next, now we need to be able to read the .JSON that comes back in the requests. Specifically the user name and password.

[02:21] To do that we're going to install a module called body-parser. That will give Express the ability to parse the body that comes in. We'll require body-parser, and just like with CORS, we'll say, App.use(bodyParser.json()).

[02:36] Now we have a body on the request. If there's not a body.username or not a body.password then we'll send with a response, "Status of 400 must provide user name or password."

[02:52] Now we need to have a user name and password to check against. Normally you would obviously store all of your users in a database but in our case, just to make things simple, we're going to make a mini database here that's just of our user = object with the username kentcdodds and a password P.

[03:11] If the body.username is not equal to the user.username or the body.password it not equal to the user.password then we'll send her a status of 401, "User name or password incorrect."

[03:30] Then we'll send them to the next function handler.

[03:33] If they made it this far we know that they are authenticated. We'll simply send the user back. We'll refresh the page. Now, if we log in you see we've got no error. If we look in our network tab here we'll try and log in again.

[03:45] We hit the log in and let's make this big here. Look at the preview. We have the password and user name. We have the whole user object.

[03:53] Obviously, generally you wouldn't want to send a password over the wire but we'll just be simple for now.

[03:58] That's a simple log in authentication. We can still hit the endpoint to get random users. We can still get the random user here.

[04:07] Our next video is going to be protecting this resource behind authentication. That's where we'll start to use JWS.