1 00:00:00,330 --> 00:00:00,780 Beautiful. 2 00:00:01,000 --> 00:00:06,960 And once our server sends back the JWT and a cookie, I'll just take a small break and understand the 3 00:00:06,960 --> 00:00:07,590 big picture. 4 00:00:08,370 --> 00:00:14,010 So in this video, I want to show you how the interaction between front and back end looks like when 5 00:00:14,010 --> 00:00:17,070 we're dealing with cookies since there are some gotchas. 6 00:00:17,310 --> 00:00:23,630 But I think you should be aware of just in case you ever want to build a full stack up for continue, 7 00:00:23,640 --> 00:00:25,210 let me just say a few things. 8 00:00:25,230 --> 00:00:31,380 First, this video is optional, which also means that if you don't feel like going along, you don't 9 00:00:31,380 --> 00:00:31,830 have to. 10 00:00:32,210 --> 00:00:38,130 You can just sit back and relax and just remember that if you ever need a reference, you know where 11 00:00:38,130 --> 00:00:38,670 to find it. 12 00:00:38,940 --> 00:00:41,730 Also, I purposely jammed everything in one video. 13 00:00:42,240 --> 00:00:47,010 So that way, if you're not interested, you can just skip on to the next one. 14 00:00:47,580 --> 00:00:51,870 Now, for starters, what I did is I took the starter. 15 00:00:52,710 --> 00:00:59,760 So in the project number 10, we have a starter and I just copied it and I set it up on the desktop 16 00:01:00,090 --> 00:01:04,920 and I strongly suggest you do the same because that way it will stay for your reference. 17 00:01:05,459 --> 00:01:09,270 And also that way we're not messing up with our current code. 18 00:01:09,540 --> 00:01:16,410 Now we're now going to add many changes to our backend, but I always think it's a good idea to set 19 00:01:16,410 --> 00:01:19,320 up different functionalities in a separate place. 20 00:01:19,740 --> 00:01:25,440 So first, I want to open up my that are drag and drop, so that's going to be our current project. 21 00:01:25,770 --> 00:01:29,250 Basically, just set up in different location here. 22 00:01:29,250 --> 00:01:31,340 I'm going to go with npm start. 23 00:01:31,830 --> 00:01:33,330 So we're open up the server. 24 00:01:34,290 --> 00:01:38,190 And then we want to look for the e-commerce one. 25 00:01:38,820 --> 00:01:42,060 And you should see final front end. 26 00:01:42,810 --> 00:01:50,850 Now if you don't see this folder Vine, you'll have to navigate to my GitHub basically where the repo 27 00:01:50,850 --> 00:01:51,480 is located. 28 00:01:51,840 --> 00:01:56,920 So go to GitHub, you're looking for another express course and you'll have to get it one more time. 29 00:01:56,940 --> 00:01:57,810 My apologies. 30 00:01:57,900 --> 00:02:01,770 Yes, it is, because I was adding fresh content later. 31 00:02:02,100 --> 00:02:04,360 So look for this final frontend. 32 00:02:04,560 --> 00:02:05,970 That's the one that you're looking for. 33 00:02:06,660 --> 00:02:09,030 And better, you'll find two directories. 34 00:02:09,509 --> 00:02:14,280 One is going to be just front end and the second one will be react frontend. 35 00:02:14,820 --> 00:02:19,380 So first, what I want you to do is take this react frontend. 36 00:02:19,910 --> 00:02:24,660 And in my case, I'm just going to drag and drag and set it up on a desktop. 37 00:02:25,410 --> 00:02:31,800 And then what we want to do is go back in here, I want to take the other one. 38 00:02:32,340 --> 00:02:34,530 Let's right away, rename it public. 39 00:02:35,160 --> 00:02:38,610 Since remember, that was our naming convention. 40 00:02:38,850 --> 00:02:40,560 As far as setting up public assets. 41 00:02:41,400 --> 00:02:42,420 So let's go here. 42 00:02:42,900 --> 00:02:44,460 Let's say public. 43 00:02:45,370 --> 00:02:53,080 And then take it out, and I want to set it up in my cookie example so you can directly drag and drop 44 00:02:53,080 --> 00:02:53,740 in there as well. 45 00:02:54,220 --> 00:03:01,600 So let's go here with public and then remember, in order for everything to work, we also need to go 46 00:03:01,600 --> 00:03:05,020 to Abkhaz and we need to set up express static. 47 00:03:05,350 --> 00:03:05,740 Correct? 48 00:03:06,280 --> 00:03:13,270 So what are you going to do that above the express address on or after or even after the cookie parser 49 00:03:13,630 --> 00:03:14,500 doesn't really matter? 50 00:03:15,100 --> 00:03:22,770 Go here and not use, and we're looking for express static and then we need to pass in the path correct. 51 00:03:22,780 --> 00:03:28,150 And since I renamed this public, simply go here with public, let's save. 52 00:03:28,690 --> 00:03:32,680 And again, just to stay on the safe side, I'm going to go with and b start. 53 00:03:33,130 --> 00:03:35,620 So I'll start up the server one more time. 54 00:03:36,280 --> 00:03:43,750 And if I navigate a local host 5000, we should see something pretty practical. 55 00:03:44,600 --> 00:03:48,440 So let's go here 5000 and check it out. 56 00:03:49,340 --> 00:03:53,300 So now I have a log in form with email and password. 57 00:03:53,810 --> 00:03:58,040 So this is going to be connected to our database and then we have the best thing on. 58 00:03:58,250 --> 00:04:04,610 So that's going to be this rob, basically where we are console logging this wreck and sign cookies. 59 00:04:05,060 --> 00:04:07,660 And here I can see the API and version one. 60 00:04:07,670 --> 00:04:10,880 So that's going to be there out and I'll show you the frontend in a second. 61 00:04:11,330 --> 00:04:15,110 And then we have a log out and the goal here is to show you. 62 00:04:16,089 --> 00:04:21,399 All the front end looks like when we're dealing with cookies, so at the moment, if you go to applications, 63 00:04:21,910 --> 00:04:23,740 everything should be clean. 64 00:04:24,310 --> 00:04:25,390 I mean, that's how it should be. 65 00:04:25,660 --> 00:04:29,260 So if you have anything here, fine, just remove it. 66 00:04:30,320 --> 00:04:33,700 I guess I'm just going to more everything start from scratch. 67 00:04:34,330 --> 00:04:35,140 We are fresh. 68 00:04:35,620 --> 00:04:39,820 And now if I go back to my project and take a look at the public. 69 00:04:40,860 --> 00:04:44,430 Notice how everything works, so in the next issue, IMO. 70 00:04:44,910 --> 00:04:51,360 Basically, our form for email password and all that, and then I also have two buttons, one for testing 71 00:04:51,690 --> 00:04:52,650 and one for logout. 72 00:04:52,680 --> 00:04:55,680 Again, testing one, we'll go to that dummy. 73 00:04:55,680 --> 00:05:02,610 Wrote this one over here, the API version one that if we take a look at the browser objects, so I'm 74 00:05:02,610 --> 00:05:03,810 selecting all the elements. 75 00:05:03,820 --> 00:05:04,560 Okay, that's cool. 76 00:05:05,040 --> 00:05:14,790 When we click on the form submit, we actually have a fetch request where two API version off and logged 77 00:05:14,790 --> 00:05:14,940 in. 78 00:05:15,920 --> 00:05:21,080 Now, since we're on the same server notice, how we don't need to pass in the URL here, we're just 79 00:05:21,080 --> 00:05:21,620 going forwards. 80 00:05:22,100 --> 00:05:26,270 And we're making what we're making a post request. 81 00:05:26,750 --> 00:05:34,880 And if we're successful run, we're clean out inputs and then we basically stored a cookie so that it's 82 00:05:34,890 --> 00:05:40,190 not going to be much on a front that you'll see, not when it comes to a testing button. 83 00:05:40,430 --> 00:05:41,070 What are we doing? 84 00:05:41,090 --> 00:05:46,730 Well, we have fresh request here and I just go with API and then a version one. 85 00:05:47,090 --> 00:05:52,520 So again, this is about coming out where essentially I just want to check whether cookie exists. 86 00:05:52,820 --> 00:05:58,430 And lastly, we have a log out one down with API version, one off and log out. 87 00:05:59,000 --> 00:06:04,160 And this is where we log out so we can see that we have no more cookies on a frontend. 88 00:06:04,430 --> 00:06:10,150 So first, let's go to a browser and let's try clicking on that best thing. 89 00:06:10,610 --> 00:06:12,080 So let's click here a few times. 90 00:06:12,530 --> 00:06:19,640 And then once we go back to your server notice, we're trying to log REQ some cookies, but nothing 91 00:06:19,640 --> 00:06:20,000 is there. 92 00:06:20,330 --> 00:06:20,630 Correct? 93 00:06:20,660 --> 00:06:21,020 Why? 94 00:06:21,380 --> 00:06:22,820 Well, because we haven't signed in. 95 00:06:23,120 --> 00:06:24,950 There is no cookie on a frontend. 96 00:06:25,460 --> 00:06:29,210 So if I go back and I believe my user was John. 97 00:06:29,930 --> 00:06:33,320 So let's just go here with John and the famous. 98 00:06:34,390 --> 00:06:34,960 Password. 99 00:06:35,200 --> 00:06:38,680 Let's put it in and notice something really, really cool. 100 00:06:39,160 --> 00:06:41,170 So here I have a token, correct? 101 00:06:42,350 --> 00:06:43,880 And what is your value? 102 00:06:44,570 --> 00:06:48,710 Well, that is my JWT and the rest of the stuff as well. 103 00:06:49,040 --> 00:06:56,870 So this is actually deep only and what this means that now once they continue making the request from 104 00:06:56,870 --> 00:06:57,710 the front end. 105 00:06:58,630 --> 00:07:03,430 If we'll take a look at the council, the server will actually see our cookie. 106 00:07:03,910 --> 00:07:07,300 So once we log in, we get back the cookie. 107 00:07:07,690 --> 00:07:10,540 And if I start pressing on testing? 108 00:07:11,110 --> 00:07:12,160 Check it out. 109 00:07:12,610 --> 00:07:17,890 Now I have multiple requests coming in and we successfully access token. 110 00:07:18,310 --> 00:07:22,630 Now, if I'm going to go to a log, remember the functionality. 111 00:07:23,090 --> 00:07:25,540 Basically wipe out a cookie. 112 00:07:25,690 --> 00:07:26,020 Correct. 113 00:07:26,050 --> 00:07:26,860 We go here. 114 00:07:27,190 --> 00:07:28,450 Now what is this is log out. 115 00:07:28,870 --> 00:07:32,370 And I believe we set it up for five seconds or something like that. 116 00:07:32,390 --> 00:07:35,470 So if I refresh notice now, the cookie is gone. 117 00:07:35,590 --> 00:07:40,120 So I wasn't able to show that on apportionment, but now I can clearly share that again. 118 00:07:40,120 --> 00:07:40,990 Let me repeat. 119 00:07:41,140 --> 00:07:48,430 We can go to controllers here looking for off controller and learn when it comes to log out. 120 00:07:49,300 --> 00:07:51,850 You can simply go here with nothing. 121 00:07:52,360 --> 00:07:55,120 So you can just set it up this way as well. 122 00:07:55,450 --> 00:08:03,190 So if you go back and if you log in John on Gmail and password are, we'll get back to cookie. 123 00:08:03,580 --> 00:08:09,750 And once I log all this time, I don't see anything in the cookies, correct? 124 00:08:09,760 --> 00:08:11,910 So those are our two approaches either. 125 00:08:12,130 --> 00:08:20,080 We have a very short one or we're just set up the expiration for exactly the same time as we are creating. 126 00:08:20,530 --> 00:08:27,310 And I let me give you the difference between a cookie response and the previous one that we covered 127 00:08:27,310 --> 00:08:28,390 in jobs API. 128 00:08:28,840 --> 00:08:33,580 So first of all, notice here I have nothing in the local storage. 129 00:08:34,120 --> 00:08:36,909 And also, if you take a look at my frontend code. 130 00:08:37,390 --> 00:08:39,429 So let me look for browser app. 131 00:08:39,490 --> 00:08:39,850 Yes. 132 00:08:40,270 --> 00:08:42,039 You'll notice that nowhere here. 133 00:08:42,460 --> 00:08:45,940 I'm storing the JWT in a local storage. 134 00:08:46,210 --> 00:08:53,350 So the first main difference is the fact that when we're working with cookies on a frontend, we don't 135 00:08:53,350 --> 00:08:54,220 have to do anything. 136 00:08:54,550 --> 00:08:55,570 We make a request. 137 00:08:55,840 --> 00:08:56,550 We get back. 138 00:08:56,560 --> 00:08:59,140 The cookie and browser does the rest. 139 00:08:59,770 --> 00:09:03,850 So our frontend application does not need to worry about anything. 140 00:09:04,270 --> 00:09:05,380 That's point number one. 141 00:09:05,860 --> 00:09:08,380 Second, when it comes to HTP, only cookies. 142 00:09:08,950 --> 00:09:13,270 Unlike local storage, you can't access them with client side JavaScript. 143 00:09:13,900 --> 00:09:16,930 In fact, that's the main selling point of the cookie. 144 00:09:17,290 --> 00:09:22,090 Now on the down side of the cookie, though, is that there is a max size for a cookie. 145 00:09:22,210 --> 00:09:25,480 So if you're sending a bunch of data, that's something you need to be aware of. 146 00:09:26,110 --> 00:09:33,730 And I believe the max size is four thousand ninety six bytes, so if we go here again with my log in. 147 00:09:34,240 --> 00:09:40,060 So let me set up gmail.com and we're going to provide my password. 148 00:09:40,360 --> 00:09:44,260 And the size in this case is 270 terabytes. 149 00:09:44,620 --> 00:09:51,370 But if I'm going to be adding more data, I possibly might run into a situation where I exceed that 150 00:09:51,370 --> 00:09:51,820 size. 151 00:09:52,300 --> 00:09:54,370 So those are the three points. 152 00:09:54,760 --> 00:09:59,260 First, when it comes to cookies, browser does all the work. 153 00:09:59,740 --> 00:10:04,480 If we're on the same domain and that's something important, we'll see in our next example. 154 00:10:05,080 --> 00:10:11,020 Second, we cannot access cookies from the frontend JavaScript, which is a good thing. 155 00:10:11,470 --> 00:10:15,310 They're more secure if we set it up as if she can be only. 156 00:10:15,830 --> 00:10:21,940 And third, we just need to be aware of the size of the cookie because there is a limit. 157 00:10:22,540 --> 00:10:24,160 Now let me close this one. 158 00:10:24,760 --> 00:10:27,580 For now, we don't need to worry about it anymore. 159 00:10:28,000 --> 00:10:30,010 And I want to go to react one. 160 00:10:30,300 --> 00:10:34,000 Now, this might take a little bit because we also need to install dependencies. 161 00:10:34,510 --> 00:10:41,530 And before we continue offering just stress something more, this example is using Create React app. 162 00:10:41,680 --> 00:10:45,970 So whatever I'm about to say is for Create React app. 163 00:10:46,660 --> 00:10:48,730 Not for next, not for Gadsby. 164 00:10:48,820 --> 00:10:49,960 Please keep that in mind. 165 00:10:50,440 --> 00:10:51,730 So let me take this one. 166 00:10:52,850 --> 00:10:55,850 And or have to install some dependencies here. 167 00:10:56,690 --> 00:11:02,510 So first, let's go with npm, install npm start now. 168 00:11:02,540 --> 00:11:07,460 I'll probably pause the video because my take a while and then I'll resume. 169 00:11:07,460 --> 00:11:15,140 Once the dependencies are installed on, my application is running on localhost 3000, and once everything 170 00:11:15,140 --> 00:11:18,380 is up and running, we should see the same application. 171 00:11:18,480 --> 00:11:21,680 Our best guess there are two major differences. 172 00:11:21,710 --> 00:11:26,030 First, we're not on the same server and you'll see why is that important? 173 00:11:26,450 --> 00:11:30,620 Just in a second and second, we are using react. 174 00:11:31,550 --> 00:11:34,250 And more specifically, create React app. 175 00:11:34,610 --> 00:11:35,900 So first, what I want to do. 176 00:11:36,380 --> 00:11:37,430 Open up the console. 177 00:11:37,740 --> 00:11:38,610 Everything's fine. 178 00:11:38,810 --> 00:11:39,290 Beautiful. 179 00:11:39,710 --> 00:11:42,200 But if I go to a testing one. 180 00:11:42,560 --> 00:11:43,040 Whoa. 181 00:11:43,580 --> 00:11:44,180 What happened? 182 00:11:45,100 --> 00:11:47,290 I mean, everything should be correct. 183 00:11:47,860 --> 00:11:54,340 If I take a look at my code, I go to root URL and what is a root URL? 184 00:11:54,370 --> 00:11:57,760 Well, actually deep local host 5000. 185 00:11:58,060 --> 00:11:59,230 So that is correct. 186 00:11:59,330 --> 00:12:06,880 And as a quick side note, wherefore in this project, we set up our server on 5000 because by default, 187 00:12:06,880 --> 00:12:09,340 the Create React app is on 3000. 188 00:12:09,640 --> 00:12:14,770 And even though I can change the portion of that, I thought that it's easier if we do that on a backend. 189 00:12:15,040 --> 00:12:22,970 So there's definitely no issue with a URL that is correct, and there are definitely no issues with 190 00:12:22,970 --> 00:12:24,010 the Barth's as well. 191 00:12:24,490 --> 00:12:24,890 Correct. 192 00:12:25,360 --> 00:12:31,780 So I have the URL, which is 5000 API version one and blah blah blah. 193 00:12:32,320 --> 00:12:33,310 So what is the issue? 194 00:12:33,940 --> 00:12:36,850 Well, if you remember the jobs project. 195 00:12:38,210 --> 00:12:42,200 The end of the project, we installed Course Library. 196 00:12:42,320 --> 00:12:42,710 Why? 197 00:12:43,190 --> 00:12:44,930 Well, because if we want. 198 00:12:45,980 --> 00:12:51,590 Some front end applications that are not on the same domain, again, the biggest difference is that 199 00:12:51,870 --> 00:12:54,860 was public one is on the same domain. 200 00:12:55,610 --> 00:12:57,340 It is on localhost five thousand. 201 00:12:57,350 --> 00:13:05,930 But if our front end application is not on the same domain, basically if it's on localhost 3000 in 202 00:13:05,930 --> 00:13:12,030 this case, then by default it does not have access to any of our resources. 203 00:13:12,050 --> 00:13:19,040 What we have on a server and if we want to make them available, then we actually need to go to our 204 00:13:19,040 --> 00:13:19,560 address. 205 00:13:20,510 --> 00:13:23,420 Now I already installed the package a package. 206 00:13:23,900 --> 00:13:25,790 Yes, course, if you remember. 207 00:13:26,240 --> 00:13:27,950 And now we just need to invoke it. 208 00:13:28,610 --> 00:13:32,120 So let me go here where we have all the packages. 209 00:13:33,050 --> 00:13:39,830 So I'm going to do that after a cookie parser contest and then we're going for cause that is equal to 210 00:13:39,890 --> 00:13:40,480 acquire. 211 00:13:41,210 --> 00:13:45,890 And we want to get the course package and then we want to invoke it again. 212 00:13:46,520 --> 00:13:49,480 We're going to do that front of tiny war. 213 00:13:49,490 --> 00:13:53,780 We can do it after prosthetic does not really matter in this case. 214 00:13:54,240 --> 00:13:57,800 So just go here and not use and invoke, of course. 215 00:13:58,220 --> 00:14:04,520 So now if I go back now, at least we should be successful on making that request. 216 00:14:04,850 --> 00:14:06,890 Now we still don't have any cookies. 217 00:14:07,250 --> 00:14:08,780 Not something else we'll have to deal with. 218 00:14:09,170 --> 00:14:12,470 But at least we should not get that error and we don't. 219 00:14:13,070 --> 00:14:14,210 So everything's fine now. 220 00:14:14,560 --> 00:14:16,460 And that will check the application. 221 00:14:16,670 --> 00:14:18,440 Now let me refresh everything. 222 00:14:19,280 --> 00:14:22,220 Let me clean and out and let me try to log in. 223 00:14:22,730 --> 00:14:28,910 So, for starters, we for sure know that everything works, meaning we don't have these cause errors 224 00:14:29,180 --> 00:14:32,660 because I know I've said this already million different times, but. 225 00:14:33,580 --> 00:14:40,360 If the front an application is not on a same domain, you will have to make your resources available 226 00:14:40,630 --> 00:14:43,540 and you do that using this course package. 227 00:14:44,130 --> 00:14:50,650 And if I'm looking at the server more specifically console well, I can see that there is no cookie. 228 00:14:51,040 --> 00:14:51,430 All right. 229 00:14:51,430 --> 00:14:53,260 So let's try to figure it out here as well. 230 00:14:53,650 --> 00:14:55,750 So let me go with this one. 231 00:14:57,320 --> 00:15:03,290 And let me provide a password, and once we do that, everything looks about right. 232 00:15:04,300 --> 00:15:10,390 Even if I go to a server, I can see that logging was successful, but I don't see the cookie. 233 00:15:10,600 --> 00:15:11,020 Why? 234 00:15:11,300 --> 00:15:19,440 Well, one more thing we need to keep in mind with cookies is that we can only send them back where 235 00:15:19,450 --> 00:15:20,140 it came from. 236 00:15:20,830 --> 00:15:25,510 And what that means is that we can only use cookies on a same domain. 237 00:15:26,260 --> 00:15:28,420 So it's very easy here in a public. 238 00:15:28,450 --> 00:15:33,220 Again, it's on our domain, consented back and forth, and we're good to go. 239 00:15:33,220 --> 00:15:40,270 But we create React app is where it is on localhost 3000. 240 00:15:40,690 --> 00:15:44,140 So this is where we need to start doing a bunch of acrobatics. 241 00:15:44,740 --> 00:15:50,380 And again, this is just to showcase how it's going to look like with Create React app in development, 242 00:15:51,190 --> 00:15:53,380 where basically we'll set up the proxy. 243 00:15:54,160 --> 00:16:02,080 But at the end of the video, I'll show you the example code for production application if it's deployed 244 00:16:02,080 --> 00:16:02,920 on fire. 245 00:16:03,370 --> 00:16:11,980 So for starters, if we're just in development using Create React app, the fix is falling where we 246 00:16:11,980 --> 00:16:18,280 want to go to a package JSON and then all the way in the bottom or somewhere basically in the package 247 00:16:18,280 --> 00:16:24,970 JSON, you want to add here a proxy, and it's just a fancy way of saying that when we're going to be 248 00:16:24,970 --> 00:16:33,460 making some type of request, the request will be directed to our server and you'll see what it means 249 00:16:33,460 --> 00:16:34,000 in a second. 250 00:16:34,390 --> 00:16:37,370 So now you're all set up the proxy and what is the value? 251 00:16:37,720 --> 00:16:40,210 Well, that needs to be our localhost five thousand. 252 00:16:40,660 --> 00:16:45,940 So again, just to speed this up, I'm going to go here with 5000 because that's where my server is. 253 00:16:46,390 --> 00:16:51,550 So if I want a nicely sent cookies, I'm where I need to adhere to proxy. 254 00:16:52,450 --> 00:16:54,520 And let me just double check my code. 255 00:16:55,150 --> 00:16:56,110 So in the app? 256 00:16:56,200 --> 00:16:56,830 Yes. 257 00:16:57,340 --> 00:16:57,660 Yep. 258 00:16:58,120 --> 00:17:00,820 For its last show, let me remove this trailing forward slash. 259 00:17:01,000 --> 00:17:04,960 You want to save and I suggest restarting your server. 260 00:17:05,380 --> 00:17:07,089 So go here with npm start. 261 00:17:07,420 --> 00:17:09,430 We made some changes in a package, Jason. 262 00:17:10,300 --> 00:17:12,670 And now back in the app? 263 00:17:12,740 --> 00:17:13,210 Yes. 264 00:17:13,660 --> 00:17:19,990 Which you want to do is instead of using the royalty URL, you want to use the second one. 265 00:17:20,349 --> 00:17:27,880 This API version one, because now every request basically will be directed here. 266 00:17:28,150 --> 00:17:30,280 Sure, this localhost 5000 now. 267 00:17:30,280 --> 00:17:35,980 Of course, when I say every request, what it means that every request starting with a forward slash 268 00:17:36,400 --> 00:17:40,090 will be directed to our local host 5000. 269 00:17:40,330 --> 00:17:44,740 So let's say if you have some external one, then of course that will still work. 270 00:17:45,070 --> 00:17:46,840 But I'm just talking about ports. 271 00:17:47,500 --> 00:17:54,340 So if you take a look, you notice that basically we have the same setup as in our browser app jazz, 272 00:17:54,410 --> 00:17:57,100 but we needed to add that proxy. 273 00:17:57,640 --> 00:17:59,170 Otherwise, that's not going to work. 274 00:17:59,200 --> 00:18:04,870 So if you'll try to access Forward Slash API version one without that proxy, then it's just going to 275 00:18:04,870 --> 00:18:06,730 go to a local host 3000. 276 00:18:06,910 --> 00:18:07,900 Hopefully that square. 277 00:18:08,650 --> 00:18:10,930 So what I want you to do is come in this one out. 278 00:18:12,110 --> 00:18:13,010 Come on this one out. 279 00:18:13,670 --> 00:18:16,280 Ron, uncomment the URL here. 280 00:18:17,000 --> 00:18:17,960 Let's keep scrolling. 281 00:18:18,180 --> 00:18:19,250 Samuel over here. 282 00:18:20,230 --> 00:18:21,040 One comment. 283 00:18:21,790 --> 00:18:29,040 So basically, you want to uncomment everywhere where you have the API and comment out of the euro. 284 00:18:29,830 --> 00:18:35,950 So now let's say it, and let's try to do that one more time where again we're going to go with my user. 285 00:18:38,090 --> 00:18:39,650 And then let's try to logon. 286 00:18:40,010 --> 00:18:40,790 Let's send it. 287 00:18:41,240 --> 00:18:44,120 And now notice that we do have the cookie. 288 00:18:44,330 --> 00:18:44,810 Correct. 289 00:18:45,680 --> 00:18:51,200 So once we set up all this code now, we can finally have the cookie. 290 00:18:51,530 --> 00:18:59,540 So now we're at the point like we were on our server where basically getting get back to cookie by default 291 00:18:59,660 --> 00:19:01,580 browser, we'll send it back. 292 00:19:01,910 --> 00:19:04,400 By default, we won't have to start anywhere. 293 00:19:04,970 --> 00:19:06,500 Browser will do that as well. 294 00:19:06,950 --> 00:19:11,840 And by default, no one will be able to access it because it is a footprint. 295 00:19:12,350 --> 00:19:20,120 So once we click on testing our server, voila, we get back our cookie. 296 00:19:20,450 --> 00:19:23,120 And once I log out, what do you think is going to happen? 297 00:19:23,630 --> 00:19:25,460 Well, we won't have the cookie. 298 00:19:25,880 --> 00:19:27,500 Hopefully, that is clear. 299 00:19:28,050 --> 00:19:35,420 And last thing that I want to showcase in this video is a simple fact that yes, while we're developing, 300 00:19:35,690 --> 00:19:38,120 it's pretty straightforward with Create React app. 301 00:19:38,120 --> 00:19:39,710 Again, this is not for next. 302 00:19:40,220 --> 00:19:44,450 This is not for Gadsby or this is just for create the React app. 303 00:19:45,050 --> 00:19:53,510 But when it comes to production, you need to understand that it really depends on the platform that 304 00:19:53,510 --> 00:19:54,020 you're using. 305 00:19:54,530 --> 00:20:01,880 So just to give you an idea in the next project will build a user workflow with more possibilities. 306 00:20:02,120 --> 00:20:08,780 So we'll be checking for email, we'll be setting up the password reset and all that cool stuff. 307 00:20:09,080 --> 00:20:14,630 And that project I actually deployed on notify the frontend for that project because for that project, 308 00:20:14,840 --> 00:20:18,470 we will need a frontend just so you have a better understanding. 309 00:20:19,070 --> 00:20:27,230 And in order to set up the proxy on notify versus the code where effectively I said that any request 310 00:20:27,620 --> 00:20:29,930 that starts with API. 311 00:20:29,960 --> 00:20:38,600 So I go with forward slash API and then whatever code after instead of looking for my own server, basically 312 00:20:38,600 --> 00:20:45,440 the server where the front end application is hosted on, I'm looking for a server that is running on 313 00:20:45,440 --> 00:20:45,980 her uncle. 314 00:20:46,160 --> 00:20:50,270 And again, this will depend on the platform that you're using. 315 00:20:50,300 --> 00:20:56,000 So what I'm trying to say is once you deploy right, it's not going to make any difference. 316 00:20:56,240 --> 00:21:01,250 So once you deploy, you actually need to work with the platform that you're using. 317 00:21:01,250 --> 00:21:07,100 In my case, I'm using metal for most of my project and therefore your need to start setting up these 318 00:21:07,100 --> 00:21:15,110 redirect where, in simple words, we are rerouting our requests from our own server to an external 319 00:21:15,110 --> 00:21:18,080 server that is hosted on her uncle. 320 00:21:18,650 --> 00:21:20,390 Hopefully, this makes sense. 321 00:21:21,020 --> 00:21:29,300 Hopefully, I was able to show you the main differences between storing the JWT in the local storage 322 00:21:29,720 --> 00:21:30,530 and a cookie. 323 00:21:31,010 --> 00:21:34,310 And now I can proceed to our next step.