1 00:00:00,240 --> 00:00:00,620 Okay. 2 00:00:00,990 --> 00:00:09,900 And once we have refactor the auth middleware as well as remove the token from our server responses. 3 00:00:10,320 --> 00:00:13,920 Now it's a remove token from our front end. 4 00:00:14,100 --> 00:00:17,610 Again, let me repeat, I know I've said this 10,000 times. 5 00:00:18,090 --> 00:00:22,470 The reason we can do that is because now Token is located in the cookie. 6 00:00:23,180 --> 00:00:25,640 And the browser is doing all the heavy lifting. 7 00:00:25,640 --> 00:00:31,040 We don't need any more storage token in a state or stored in local storage. 8 00:00:31,070 --> 00:00:32,750 It's not necessary anymore. 9 00:00:32,930 --> 00:00:34,010 Automatically. 10 00:00:34,640 --> 00:00:42,310 If the cookie hasn't expired, it will be sent back with every single request. 11 00:00:42,320 --> 00:00:44,150 Hopefully that is clear. 12 00:00:44,240 --> 00:00:47,870 And yes, please be careful when making these updates. 13 00:00:47,870 --> 00:00:51,590 It's very easy to make a typo and then it's going to be. 14 00:00:52,720 --> 00:00:55,930 Somewhat time consuming to find that bug. 15 00:00:55,930 --> 00:00:57,310 First, what we want to do. 16 00:00:58,210 --> 00:01:01,270 Is remove all instances of this local storage. 17 00:01:01,840 --> 00:01:06,430 Yes, we'll still get back user and user location from the server. 18 00:01:06,430 --> 00:01:07,400 We'll use it. 19 00:01:07,420 --> 00:01:11,170 We'll still store it in the state, but not anymore in the local storage. 20 00:01:11,290 --> 00:01:12,790 So let's start with that. 21 00:01:13,090 --> 00:01:16,600 I'm going to navigate bom bom bom to the app context. 22 00:01:16,600 --> 00:01:19,580 And yes, I'm going to be somewhat annoying by repeating. 23 00:01:19,600 --> 00:01:21,120 Please be careful. 24 00:01:21,130 --> 00:01:23,230 This is what we're removing here and there. 25 00:01:23,230 --> 00:01:30,130 I just see students rushing through the content and then spending a lot of time on basically getting 26 00:01:30,550 --> 00:01:31,630 the bug fixed. 27 00:01:31,900 --> 00:01:39,940 So let's start in the app context, like I just said, and we want to scroll up and notice all these 28 00:01:39,940 --> 00:01:44,760 instances where we basically get the values from local storage. 29 00:01:44,770 --> 00:01:47,720 Once our application starts up, we don't need them anymore. 30 00:01:47,740 --> 00:01:48,520 That's it. 31 00:01:49,120 --> 00:01:52,060 We'll actually get those values directly from the server. 32 00:01:52,330 --> 00:01:54,580 Let's save it up next and then read me. 33 00:01:54,580 --> 00:01:56,860 We want to fix the initial state. 34 00:01:57,190 --> 00:01:58,920 We want to remove the token. 35 00:01:58,930 --> 00:02:00,690 Again, it's not going to be in a state. 36 00:02:00,700 --> 00:02:05,920 We want to set the user equal to null since we have no instances of the local storage anymore. 37 00:02:06,280 --> 00:02:10,300 And when it comes to user location, job, location, both of them are going to be empty strings. 38 00:02:10,539 --> 00:02:11,590 So let's try it. 39 00:02:12,190 --> 00:02:14,140 I'm going to go to my initial state. 40 00:02:14,470 --> 00:02:15,970 I don't need token anymore. 41 00:02:16,060 --> 00:02:16,650 That's it. 42 00:02:16,660 --> 00:02:17,530 We're done. 43 00:02:17,830 --> 00:02:20,410 Then as far as the user, by default, it's going to be null. 44 00:02:20,740 --> 00:02:23,410 Only once we get the values from the server. 45 00:02:23,440 --> 00:02:24,880 Then we'll actually set it. 46 00:02:24,880 --> 00:02:25,510 So no. 47 00:02:25,510 --> 00:02:26,020 Here. 48 00:02:26,110 --> 00:02:27,490 User location. 49 00:02:27,970 --> 00:02:29,350 Empty string. 50 00:02:29,350 --> 00:02:31,510 And the same goes for job location. 51 00:02:31,510 --> 00:02:35,650 So these are the changes that we want to make in the initial state. 52 00:02:35,920 --> 00:02:37,240 Let's keep on moving. 53 00:02:37,750 --> 00:02:40,660 What about the interceptor, the request one? 54 00:02:40,810 --> 00:02:44,470 Well, we don't have the token value in the state anymore, do we? 55 00:02:45,230 --> 00:02:46,650 So there's no need again. 56 00:02:46,680 --> 00:02:49,640 The token is located in the cookie. 57 00:02:49,700 --> 00:02:53,820 Yes, I definitely said this 10,000 times right now, But yes, that's true. 58 00:02:53,840 --> 00:02:55,910 So we don't need to do this anymore. 59 00:02:56,180 --> 00:02:57,680 Let's go to your app context. 60 00:02:57,680 --> 00:02:59,030 Let's keep on scrolling. 61 00:02:59,660 --> 00:03:01,400 So we still have our fetch. 62 00:03:01,490 --> 00:03:02,910 There's nothing wrong with this one. 63 00:03:02,930 --> 00:03:06,170 What we want to do is remove the request one. 64 00:03:06,170 --> 00:03:08,870 So please keep the response one. 65 00:03:09,080 --> 00:03:11,330 We'll still log out the user with 401. 66 00:03:11,330 --> 00:03:13,730 But yeah, we don't need to do this anymore. 67 00:03:13,790 --> 00:03:15,560 So if you want, you can leave the comment in. 68 00:03:15,570 --> 00:03:16,880 Like I said, yes, I'm going to do that. 69 00:03:16,880 --> 00:03:18,440 So let's just remove this sucker. 70 00:03:18,650 --> 00:03:21,980 Let's save and let's keep on moving now. 71 00:03:22,850 --> 00:03:24,980 We want to remove both functions. 72 00:03:25,640 --> 00:03:27,080 Add the local storage. 73 00:03:27,110 --> 00:03:28,910 Remove from local storage. 74 00:03:29,540 --> 00:03:35,120 And also we want to fix the setup user and update user. 75 00:03:35,690 --> 00:03:42,230 Because again, we are not passing the token and we don't want those local storage functions. 76 00:03:42,320 --> 00:03:44,810 And then we'll worry about the reducer. 77 00:03:45,140 --> 00:03:47,870 So let's go here to app context. 78 00:03:48,350 --> 00:03:49,730 Let's keep on moving. 79 00:03:50,180 --> 00:03:51,410 Notice the ADD. 80 00:03:52,140 --> 00:03:53,640 User to local storage. 81 00:03:53,760 --> 00:03:54,510 Nope. 82 00:03:54,580 --> 00:03:55,770 Don't need that anymore. 83 00:03:56,370 --> 00:03:57,700 Or here as well. 84 00:03:57,720 --> 00:04:00,720 And then let's look for that setup user. 85 00:04:01,020 --> 00:04:03,240 Or if you have login or register. 86 00:04:03,330 --> 00:04:05,280 Basically if you didn't refactor it. 87 00:04:06,780 --> 00:04:11,730 Remember, we're getting the data, but now the token is not in the data. 88 00:04:11,760 --> 00:04:14,040 So let's remove it over here. 89 00:04:14,190 --> 00:04:17,610 And then when we dispatch, we also don't want to pass it. 90 00:04:17,700 --> 00:04:21,779 So let's remove it and then add user to local storage. 91 00:04:22,019 --> 00:04:23,400 We don't want to do that anymore. 92 00:04:23,880 --> 00:04:26,730 Again, three places where we have the data. 93 00:04:27,450 --> 00:04:32,490 Where we pass it to the payload and where we add this to a local storage. 94 00:04:32,520 --> 00:04:34,650 Don't have the token anymore. 95 00:04:34,920 --> 00:04:38,700 Let's keep on moving and we want to go to update user. 96 00:04:39,570 --> 00:04:40,930 Again, same deal. 97 00:04:40,950 --> 00:04:42,210 We don't want a token. 98 00:04:42,840 --> 00:04:44,100 We don't want to pass it. 99 00:04:45,120 --> 00:04:47,730 To our future. 100 00:04:47,760 --> 00:04:53,940 And lastly, we don't want to add this to a local storage like so. 101 00:04:54,390 --> 00:04:54,990 So. 102 00:04:55,890 --> 00:04:57,450 That looks about right. 103 00:04:57,780 --> 00:05:02,060 Let me just double check token local storage functions. 104 00:05:02,070 --> 00:05:02,730 Okay. 105 00:05:03,120 --> 00:05:10,050 Now we want to go to reducer and basically remove all the instances of the token. 106 00:05:10,590 --> 00:05:12,390 So let me navigate. 107 00:05:12,390 --> 00:05:14,220 Where is my reducer over here. 108 00:05:14,430 --> 00:05:21,330 So I'm going to use the command f basically look up and I'm going to look for the token. 109 00:05:22,780 --> 00:05:27,610 It says that I have five instances basically in order to set up user success. 110 00:05:28,150 --> 00:05:29,140 Let's remove this again. 111 00:05:29,140 --> 00:05:30,940 We don't have that token anymore. 112 00:05:31,240 --> 00:05:32,050 Let's save it. 113 00:05:32,380 --> 00:05:33,730 I have three instances. 114 00:05:34,000 --> 00:05:37,120 Let's see where I have them on the log off user. 115 00:05:37,270 --> 00:05:40,370 Do I need to set the token equal to No. 116 00:05:40,370 --> 00:05:45,220 No, I don't simply go over here and I just remove token. 117 00:05:45,490 --> 00:05:46,660 And then I have two more. 118 00:05:47,440 --> 00:05:49,780 And that one is when I'm updating the user. 119 00:05:49,990 --> 00:05:52,960 So token equals two payload token. 120 00:05:53,050 --> 00:05:57,280 I don't need that anymore in the update user success. 121 00:05:57,940 --> 00:06:02,020 So those are the first changes that we want to make to the front end application. 122 00:06:02,570 --> 00:06:04,810 And let's just start out again. 123 00:06:05,490 --> 00:06:10,740 Yes, our application is going to break at some point, but don't worry, we'll fix all of those things 124 00:06:10,980 --> 00:06:12,330 in the later videos. 125 00:06:12,570 --> 00:06:13,890 So now let me navigate back. 126 00:06:13,890 --> 00:06:17,580 Let me just refresh just to stay on the safe side. 127 00:06:18,000 --> 00:06:19,500 And it looks like. 128 00:06:21,160 --> 00:06:21,580 Or here. 129 00:06:21,580 --> 00:06:26,680 So remove local storage is not defined and app contact line 129. 130 00:06:26,950 --> 00:06:28,210 That's good to know. 131 00:06:28,360 --> 00:06:32,770 So let me look for line 129, so log out. 132 00:06:32,800 --> 00:06:36,550 User We also want to do this, so let me add this to a read. 133 00:06:36,550 --> 00:06:39,190 Me just so you're aware of this. 134 00:06:39,190 --> 00:06:46,960 So let me copy this and then in the read me, we want to go I guess let's go after all of them, just 135 00:06:46,960 --> 00:06:54,730 say app context and we're going to go with just copy and paste and we just want to remove and let's 136 00:06:54,730 --> 00:06:55,840 just add a comment. 137 00:06:56,620 --> 00:07:05,800 Let's say remove the local storage code, let's save it and then let's navigate back to the app context. 138 00:07:05,800 --> 00:07:11,830 And we want to go with a remove user from the local storage because again, we don't have that function 139 00:07:11,830 --> 00:07:13,690 anymore in our app context. 140 00:07:13,690 --> 00:07:15,400 So let's try this one out again. 141 00:07:15,400 --> 00:07:16,390 Let me refresh. 142 00:07:17,590 --> 00:07:18,610 Let's go over here. 143 00:07:18,640 --> 00:07:19,720 Let's say Joan. 144 00:07:20,590 --> 00:07:22,120 At gmail dot com. 145 00:07:22,150 --> 00:07:23,110 Let's go with. 146 00:07:24,020 --> 00:07:25,100 The password. 147 00:07:25,100 --> 00:07:25,640 Here. 148 00:07:26,300 --> 00:07:27,170 Submit. 149 00:07:27,220 --> 00:07:27,980 Okay, good. 150 00:07:28,550 --> 00:07:29,840 So we have the cookie. 151 00:07:29,930 --> 00:07:30,980 Everything works. 152 00:07:31,220 --> 00:07:36,860 I can see the profile, and I'm not going to do all of the rods, but let me just change this one. 153 00:07:36,860 --> 00:07:39,010 I'm going to say Smith, blah, blah, blah. 154 00:07:39,050 --> 00:07:39,740 Everything works. 155 00:07:39,740 --> 00:07:46,940 So our functionality is going to work because we have a valid token in the valid cookie. 156 00:07:46,970 --> 00:07:51,770 So the cookie hasn't expired nor the JWT has expired. 157 00:07:52,070 --> 00:07:55,110 The problem is going to be once we refresh. 158 00:07:55,130 --> 00:07:55,820 Why? 159 00:07:56,360 --> 00:07:58,550 Well, because we have no local storage anymore. 160 00:07:58,580 --> 00:08:01,760 And remember, our basically protected root. 161 00:08:02,740 --> 00:08:05,560 Going to be looking for what it's going to be looking for to user. 162 00:08:05,800 --> 00:08:10,150 So at the moment we have the user, but we're not grabbing it anymore from the local storage. 163 00:08:10,150 --> 00:08:10,880 So check it out. 164 00:08:10,900 --> 00:08:15,450 Once I refresh, bam, I'm logged out even though I have the valid cookie. 165 00:08:15,460 --> 00:08:17,740 So this is something that we're going to work on right now. 166 00:08:18,070 --> 00:08:22,720 But basically, the end result should be following where should be able to log in. 167 00:08:23,020 --> 00:08:25,470 Should be able to do all of the functionality. 168 00:08:25,480 --> 00:08:31,150 The only difference is going to be that the moment you refresh, we don't have anymore that local storage. 169 00:08:31,690 --> 00:08:38,409 So since we don't have the local storage, we will automatically be logged out from the application 170 00:08:38,409 --> 00:08:39,970 once we refresh.