Use token authentication with JWTs to generate an encrypted and signed payload.
- We'll need to allow the user to authenticate themselves each time they reload the Angular App, so that they don't have to keep logging in over and over. Traditionally, this is done with cookies and one is stored on the server and another on the client and this is passed with every request so the server knows who the user is. But cookies are not as flexible as tokens or as safe, in some respects. With a token, the server generates the token which contains the user ID and is assigned against the secret.
The token is then sent upon registering, or logging in, to the front end and is somehow kept on the browser. But more on this later. The token is then passed back with every secure request and the server then decrypts the token with the secret and knows who sent the token, since it does contain the user ID. It's very simple, since it's stateless, unlike a cookie. There is a lot more to it, but that's all we will need to know for now to start working with it. So, we know we will need to create a token upon registration, so let's install a token library for Node.
So let's create the new instance of our terminal, and then I'll type in npm install jsonwebtoken--save. Once it's installed, let's require at the top of our server gs. And I'll create a variable called jwt, short for jsonwebtoken, and I'll require('jsonwebtoken'); and now let's go back to our register function so we can use it.
Let's begin by creating a new line and creating a variable for our token. Then we'll set it to jwt.sign and we'll need to pass in the user ID at this point since that's all we'll be using for the token's payload, even though we could supply other claims, such as an expiry iss AD token, et cetera. So to make it simple, I'll create another variable called user and set that to req.body; and then for the first parameter in jwt.sign I'll pass in user.id and the second parameter will need to be our secret.
Which, in a production environment, we would get from a configuration file, but to keep things simple, I'll just set it to a string of '123' and I would just like to reiterate that in a production environment, for security reasons, you would not hardcode the secret and the reason I am doing it now is to allow us to focus on the teaching point and not to add to many architectural distractions. Notice that we are passing in the user ID, yet we're not setting that anywhere, and that's because our back end will need to generate a user ID, typically in the case where you add a user to a database, the result comes back with an ID.
But since we're not using a database, we can simply use the index of our user's array. And to do that, I'll take line 39 and cut it and paste it at the top, and set that to a new variable I'll call index. And then I'll subtract it by one, since users.push gives us the length and subtracting by one will give us the index. At this point, we can modify line 39 to get the user from users and then we just pass in the index.
Then let's add a final line to set the ID. And I'll just set that back to the index. Now that we have our token, let's send it as a response. And I'll do that with res.json and I'll simply pass in the token. Let's save that, and make sure Node is running, and let's try it out. So let's go back to our Angular App, making sure our form is filled, let's hit register. Now, if we go into our network tab and click on the last request, and then hit response, we can see we're getting our token.
And that's all there is to registering on the back end, for now. We now have our token on the front end, let's look at what to do with it next.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.