1 00:00:00,080 --> 00:00:00,410 All right. 2 00:00:00,410 --> 00:00:04,680 So we can successfully register a user as well as login. 3 00:00:04,700 --> 00:00:05,600 Now what? 4 00:00:05,630 --> 00:00:10,260 Well, now we want to send back the Json web token. 5 00:00:10,280 --> 00:00:12,770 So effectively the way it's going to work. 6 00:00:12,800 --> 00:00:15,800 The moment user can log in. 7 00:00:16,480 --> 00:00:19,600 He or she will receive a Json web token. 8 00:00:19,780 --> 00:00:28,240 And then in order to access all of the resources aka jobs and also info about the user will be looking 9 00:00:28,240 --> 00:00:33,700 for that Json web token in the requests that are coming in. 10 00:00:33,910 --> 00:00:40,180 And what's more interesting in this application, we will send everything with Http cookies, which 11 00:00:40,180 --> 00:00:44,830 is a very secure way how to communicate back and forth. 12 00:00:44,860 --> 00:00:50,080 Now if you want to find out more info on Json web token. 13 00:00:50,950 --> 00:00:54,910 Definitely utilize this resource in a second. 14 00:00:54,910 --> 00:00:56,830 We'll actually look at it. 15 00:00:56,860 --> 00:01:04,930 And again, Json web token is just a way to securely transmit the information back and forth. 16 00:01:04,959 --> 00:01:12,070 So first, let's install the library we're going to use in order to create Json web token and library 17 00:01:12,070 --> 00:01:19,840 name is Json web token and I'll right away set up the function in the utils. 18 00:01:19,840 --> 00:01:24,670 And in this case I'm going to call this token utils and same deal. 19 00:01:24,670 --> 00:01:32,830 We'll have one function to create Json web token and we'll have the second one where we'll decode it. 20 00:01:33,390 --> 00:01:39,930 And that one will set up actually in our auth middleware, something we're going to work on later on. 21 00:01:39,930 --> 00:01:42,750 So first let's navigate to a utils. 22 00:01:43,600 --> 00:01:46,330 And we want to go with Token. 23 00:01:47,160 --> 00:01:47,660 Utils. 24 00:01:47,700 --> 00:01:49,590 That's going to be the file name. 25 00:01:49,620 --> 00:01:53,260 Then let's create the function or not. 26 00:01:53,280 --> 00:02:00,660 Let's first import the library we're going to use from and again, it's Json web token library. 27 00:02:00,690 --> 00:02:05,250 Let's right away export since we'll invoke it in the login controller. 28 00:02:05,280 --> 00:02:12,810 As far as the function, I'm going to go create JWT and it's going to be looking for payload. 29 00:02:12,840 --> 00:02:15,750 Now essentially what do we want to pass in the payload? 30 00:02:15,780 --> 00:02:18,720 Technically, we can pass anything we want. 31 00:02:18,750 --> 00:02:22,710 In our case, we're just going to provide the user ID. 32 00:02:22,860 --> 00:02:23,430 Why? 33 00:02:23,460 --> 00:02:29,240 Well, because we'll use that user ID to pretty much get all the resources or create resources. 34 00:02:29,250 --> 00:02:31,830 So of course, we can set up more data. 35 00:02:31,860 --> 00:02:37,920 Just keep in mind that essentially we're not going to decode it on the front end. 36 00:02:37,950 --> 00:02:39,640 This is very, very important. 37 00:02:39,660 --> 00:02:43,800 So we'll send the token to the front end. 38 00:02:43,830 --> 00:02:50,830 Then the front end is going to send it back with every request since the JWT is going to be located 39 00:02:50,830 --> 00:02:57,010 in the cookie and then in the server, we again are going to decode it. 40 00:02:57,010 --> 00:03:02,200 And therefore, yes, you can set up the username there as well, but there's really no need. 41 00:03:02,200 --> 00:03:06,940 If you have the ID, you have access to everything that we need. 42 00:03:07,060 --> 00:03:12,340 So that's why payload is going to be our parameter and then let's create that token. 43 00:03:12,610 --> 00:03:15,580 So first I'm going to come up with the variable name. 44 00:03:15,580 --> 00:03:17,020 I'm going to go with Token. 45 00:03:17,110 --> 00:03:19,360 The method we're looking for is sign. 46 00:03:19,360 --> 00:03:24,660 So JWT, then sign, and then we want to pass in three things. 47 00:03:24,670 --> 00:03:28,720 First, we want to set up what we want to hold over here and again. 48 00:03:29,460 --> 00:03:31,510 In our case, that is equal to our payload. 49 00:03:31,530 --> 00:03:36,050 Then we want to go with secret key, which in this case I'm going to hardcode. 50 00:03:36,060 --> 00:03:40,140 But in later videos we'll actually set up env variables. 51 00:03:40,140 --> 00:03:47,580 And lastly, we have options object in here and we want to say in how long it's going to expire. 52 00:03:47,760 --> 00:03:51,450 And in my case I'm just going to go with one day. 53 00:03:51,570 --> 00:03:58,320 Again, these values will actually set up as env variables in a few videos. 54 00:03:58,320 --> 00:04:08,040 So once we have the token in place, let's save it and effectively we want to navigate to our auth controller. 55 00:04:08,790 --> 00:04:13,690 And if everything is correct, this is where we want to set up that token. 56 00:04:13,710 --> 00:04:15,060 So first. 57 00:04:15,970 --> 00:04:19,269 Again, let's create a variable over here. 58 00:04:19,360 --> 00:04:20,180 Same deal. 59 00:04:20,200 --> 00:04:21,730 I'm going to call this token. 60 00:04:22,029 --> 00:04:23,560 So token over here. 61 00:04:23,590 --> 00:04:26,740 Then let's invoke create JWT. 62 00:04:27,010 --> 00:04:30,520 It's not asynchronous, so we simply invoke it. 63 00:04:30,520 --> 00:04:37,270 And then, like I said, we want to pass in what is going to be our payload. 64 00:04:37,300 --> 00:04:43,330 So first thing we want to set up the user ID And also since we have the role, you know what, let's 65 00:04:43,330 --> 00:04:45,400 also pass in the user role. 66 00:04:45,430 --> 00:04:47,600 That's going to be useful in our case. 67 00:04:47,620 --> 00:04:52,000 So I'm going to pass it as an object and I'll just set up the properties. 68 00:04:52,030 --> 00:04:55,090 Of course you can name the properties differently. 69 00:04:55,090 --> 00:05:02,010 Just keep in mind that whenever you'll be setting up the auth middleware to use the same properties. 70 00:05:02,020 --> 00:05:10,270 So in my case I'm going to go with user ID, and remember, if I bypass this condition, I'll have access 71 00:05:10,270 --> 00:05:17,630 to a user object and in there I have underscore ID that's the ID property. 72 00:05:17,630 --> 00:05:26,960 So I'll set up my user ID equals to user underscore ID, and then also I want to go with role and therefore 73 00:05:26,960 --> 00:05:29,750 I'm going to go with user dot role. 74 00:05:29,750 --> 00:05:31,640 So that's my token. 75 00:05:32,430 --> 00:05:33,780 We have two approaches. 76 00:05:33,780 --> 00:05:38,910 If you want, you can send it back with the response. 77 00:05:39,270 --> 00:05:42,030 Probably something you have seen before. 78 00:05:42,030 --> 00:05:45,060 For example, we are doing that in my React course now. 79 00:05:45,060 --> 00:05:49,110 We're not building the server, but we're looking for a JWT. 80 00:05:49,350 --> 00:05:54,030 We're looking for a token, and then on the front end it gets saved. 81 00:05:55,220 --> 00:05:57,080 Most likely in the local storage. 82 00:05:57,080 --> 00:05:59,030 So that's definitely one approach. 83 00:05:59,030 --> 00:06:01,520 But again, in our case, we'll set up the cookie. 84 00:06:01,550 --> 00:06:03,380 Now, just so you can see. 85 00:06:04,260 --> 00:06:05,510 Essentially how it works. 86 00:06:05,510 --> 00:06:09,720 I'm not going to go with the status right now, but I will set up a Json. 87 00:06:11,000 --> 00:06:15,370 And then let's set up token equals to token. 88 00:06:15,380 --> 00:06:16,480 Let's save it. 89 00:06:16,490 --> 00:06:18,560 Let's navigate to a login user. 90 00:06:18,560 --> 00:06:24,140 And if everything is correct, you should see this giant, giant string. 91 00:06:24,140 --> 00:06:26,360 So this is our token. 92 00:06:26,570 --> 00:06:30,380 This is what essentially the front end is going to be storing. 93 00:06:30,380 --> 00:06:37,520 And again, the idea is following front end needs to send back this token and then on a server we will 94 00:06:37,520 --> 00:06:40,610 decode it and right away in that token, we'll see. 95 00:06:40,610 --> 00:06:44,780 Okay, so this is the user, this is the role and the rest of the stuff. 96 00:06:44,870 --> 00:06:50,330 And before we move on to the next topic, I also want to demonstrate something and that is how we can 97 00:06:50,330 --> 00:06:51,980 decode actually. 98 00:06:52,720 --> 00:06:54,610 Here in this awesome resource. 99 00:06:54,730 --> 00:06:57,070 Again, just click on debugger here. 100 00:06:58,840 --> 00:07:01,240 Then remove whatever values they have over here. 101 00:07:01,300 --> 00:07:03,940 Copy and paste and check it out. 102 00:07:04,000 --> 00:07:06,550 So I'm going to have over here user ID. 103 00:07:06,790 --> 00:07:08,770 So this definitely is my object. 104 00:07:08,770 --> 00:07:09,310 Correct? 105 00:07:09,310 --> 00:07:11,290 Because those are the properties I set up. 106 00:07:11,290 --> 00:07:18,850 So this is my user ID and I can guarantee you that it actually matches the ID of John. 107 00:07:19,890 --> 00:07:20,640 Let me check it here. 108 00:07:20,640 --> 00:07:21,020 Yep. 109 00:07:21,030 --> 00:07:26,280 It ends with F and also library creates these two properties. 110 00:07:26,280 --> 00:07:33,360 So essentially when it's going to expire and when it was created and with this in place, we can set 111 00:07:33,360 --> 00:07:42,840 up a cookie, the Http only cookie, which we're going to use to send the token back to the user.