1 00:00:00,350 --> 00:00:00,770 Okay. 2 00:00:00,770 --> 00:00:06,830 So now that we have the backend API all set up with authentication where we can log in, we can create 3 00:00:06,830 --> 00:00:13,880 a Json web token, store it in an Http only cookie, and that cookie is sent with every request after 4 00:00:13,880 --> 00:00:16,490 that and validated through middleware. 5 00:00:16,520 --> 00:00:20,180 Now we need to set up our user interface to take advantage of that. 6 00:00:20,180 --> 00:00:25,490 And the way this is going to work is we're going to have an auth slice in our redux state, which will 7 00:00:25,490 --> 00:00:26,480 be very simple. 8 00:00:26,480 --> 00:00:32,960 It'll have a set credentials action to set the user to local storage once authenticated and all that. 9 00:00:32,960 --> 00:00:35,960 And it will have a logout that will clear local storage. 10 00:00:35,960 --> 00:00:42,200 All of the actual calls to our backend will be in a user's API slice. 11 00:00:42,500 --> 00:00:48,650 So just like we had a products API slice to deal with products and we'll create both of these slices 12 00:00:48,650 --> 00:00:49,820 in this video. 13 00:00:49,820 --> 00:00:56,060 So let's go into our front end and before we do any of that, I just want to go into source and then 14 00:00:56,060 --> 00:00:58,190 into constants. 15 00:00:58,190 --> 00:00:59,150 Oh, we already never mind. 16 00:00:59,150 --> 00:01:00,090 We already added it. 17 00:01:00,090 --> 00:01:05,190 I just wanted to make sure we have our users URL because that's what we're going to be working with. 18 00:01:05,550 --> 00:01:11,070 All right, so let's go into slices and we'll first create our auth slice. 19 00:01:12,060 --> 00:01:15,780 So let's say auth slice dot js. 20 00:01:15,810 --> 00:01:23,100 Now in this particular slice, we're not dealing with any, any endpoints, any API stuff that's going 21 00:01:23,100 --> 00:01:26,150 to go in another slice called user's API slice. 22 00:01:26,160 --> 00:01:31,680 This is simply to set the user credentials to local storage and remove them. 23 00:01:31,680 --> 00:01:34,470 So let's import. 24 00:01:36,340 --> 00:01:41,630 And we're going to import, not create API, but just create slice because it's going to be just a regular 25 00:01:41,630 --> 00:01:44,780 slice and that's going to be from Redux toolkit. 26 00:01:44,780 --> 00:01:48,050 And then let's create our initial state. 27 00:01:48,630 --> 00:01:56,070 So our initial state is going to be, let's see an object and we're going to have user info. 28 00:01:56,940 --> 00:02:03,630 And basically we want to check to first to see if there's user info in this local storage. 29 00:02:03,720 --> 00:02:05,790 If there is, then we're going to use that. 30 00:02:05,790 --> 00:02:07,790 If not, then we'll set it to null. 31 00:02:07,800 --> 00:02:13,680 So let's say local storage dot get item user info. 32 00:02:13,710 --> 00:02:16,230 If that's there, then we're going to use that. 33 00:02:16,230 --> 00:02:22,680 If not, then it's going to be null and we're parsing it when it comes out because it's going to be 34 00:02:22,680 --> 00:02:24,630 stored in local storage as a string. 35 00:02:24,630 --> 00:02:28,170 But we want to parse it back to a JavaScript object. 36 00:02:28,950 --> 00:02:30,780 All right, now let's create our slice. 37 00:02:30,780 --> 00:02:33,180 So auth slice. 38 00:02:33,870 --> 00:02:36,300 And we're going to use create Slice here. 39 00:02:37,070 --> 00:02:43,940 And let's pass in a name of auth and our initial state and then our reducers. 40 00:02:44,500 --> 00:02:48,800 So like I said, we're only we're just going to have a set credentials and a log out. 41 00:02:48,820 --> 00:02:50,330 We're not going to do the log out just yet. 42 00:02:50,350 --> 00:02:51,190 We'll do that later. 43 00:02:51,190 --> 00:02:59,650 But let's add our set credentials and that's going to be a function that takes a state and an action. 44 00:02:59,800 --> 00:03:04,570 And we're going to set the user info state to the payload. 45 00:03:04,650 --> 00:03:04,930 Okay. 46 00:03:04,930 --> 00:03:12,820 Because once we you know, we hit our back end through the user API slice, we get our user info, we're 47 00:03:12,820 --> 00:03:16,570 going to send it here as the payload in the action. 48 00:03:16,570 --> 00:03:22,780 So then we set the, the user info state to that payload and then we just want to store that in local 49 00:03:22,780 --> 00:03:23,800 storage as well. 50 00:03:23,800 --> 00:03:30,100 So let's say local storage dot set item, user info, and then we're going to stringify the payload, 51 00:03:30,100 --> 00:03:32,110 which is the user and pass it in. 52 00:03:32,530 --> 00:03:32,860 Okay. 53 00:03:32,860 --> 00:03:38,560 So our redux state is almost always going to match up with what we have in local storage. 54 00:03:39,270 --> 00:03:41,640 So now let's export. 55 00:03:41,670 --> 00:03:49,830 First of all, we'll export as default, the auth slice reducer, and we actually have to bring that 56 00:03:49,830 --> 00:03:51,250 into our store. 57 00:03:51,270 --> 00:03:58,470 So let's say auth slice reducer, but then the set credentials, we want to export that as an action 58 00:03:58,470 --> 00:03:59,430 so we can call it. 59 00:03:59,430 --> 00:04:00,300 So we can use it. 60 00:04:00,300 --> 00:04:07,410 So let's say export const and we're going to add in here set credentials and set that equal to auth 61 00:04:07,410 --> 00:04:09,030 slice actions. 62 00:04:09,910 --> 00:04:10,240 Okay. 63 00:04:10,240 --> 00:04:11,080 And that should do it. 64 00:04:11,080 --> 00:04:12,070 So let's save that. 65 00:04:12,070 --> 00:04:14,290 Now, we do have to add this to the store. 66 00:04:14,800 --> 00:04:21,790 We don't add like products and users API to the store because that's basically a child of the API slice. 67 00:04:21,790 --> 00:04:24,640 But this is not so let's go into store. 68 00:04:24,640 --> 00:04:25,630 JS. 69 00:04:26,320 --> 00:04:28,900 And let's see, we're going to bring in. 70 00:04:29,830 --> 00:04:32,580 Let's say import auth. 71 00:04:33,240 --> 00:04:36,090 So we want to do off slice. 72 00:04:36,830 --> 00:04:41,080 Reducer from our auth slice. 73 00:04:41,090 --> 00:04:43,700 And then we're just simply going to add it down here. 74 00:04:43,700 --> 00:04:48,820 So right under Cart, let's say auth and set that to the auth slice reducer. 75 00:04:48,830 --> 00:04:53,750 Now by doing that we should let's come over here and I'm just going to open up. 76 00:04:53,750 --> 00:04:54,890 Oops, wrong key. 77 00:04:54,890 --> 00:04:59,420 I'm going to open up my dev tools and let's check out the state. 78 00:04:59,420 --> 00:05:01,010 So if we go to redux. 79 00:05:02,100 --> 00:05:04,070 You now should see. 80 00:05:04,080 --> 00:05:04,410 Let's see. 81 00:05:04,440 --> 00:05:05,550 Can I make this? 82 00:05:06,530 --> 00:05:14,900 You should see off with user info and that obviously is going to be set to no because we haven't done 83 00:05:14,900 --> 00:05:19,400 anything to to set it to anything else right. 84 00:05:20,570 --> 00:05:28,190 So the next thing we're going to do is create the the users API slice so we can close up the store and 85 00:05:28,190 --> 00:05:29,390 the auth slice. 86 00:05:29,390 --> 00:05:37,010 And let's create a new file in slices called users API slice dot js. 87 00:05:39,650 --> 00:05:44,420 Now, this is going to be very similar to what we did in our Products API. 88 00:05:44,450 --> 00:05:48,560 In fact, I could probably just copy what we have here and then just edit it. 89 00:05:48,620 --> 00:05:57,740 So instead of products URL, we're going to bring in the users URL and we're bringing in the API slice 90 00:05:57,740 --> 00:06:01,040 because you can think of that as kind of like the parent to this. 91 00:06:01,070 --> 00:06:05,000 Let's change it from products to users. 92 00:06:06,410 --> 00:06:09,630 API slice and then we're injecting our endpoints. 93 00:06:09,650 --> 00:06:13,820 Now at the moment, all I want to do is is a login. 94 00:06:13,820 --> 00:06:16,910 So let's get rid of this second function here. 95 00:06:17,480 --> 00:06:19,280 And let's change. 96 00:06:20,290 --> 00:06:20,680 Actually. 97 00:06:20,680 --> 00:06:22,630 Did I delete something I wasn't supposed to? 98 00:06:22,660 --> 00:06:22,930 Yeah. 99 00:06:22,930 --> 00:06:25,150 So I only want to delete this. 100 00:06:25,450 --> 00:06:34,210 So let's change getproducts to login and let's see, we want to instead of doing a query because you 101 00:06:34,210 --> 00:06:40,420 know, we're not just fetching data where we're authenticating, we're making a post request. 102 00:06:40,420 --> 00:06:44,530 So instead of a query, this is actually going to be a mutation. 103 00:06:44,530 --> 00:06:46,810 So we're going to say build or mutation. 104 00:06:46,810 --> 00:06:54,850 This is still going to be query and we're going to pass in here data because we're going to be sending 105 00:06:54,850 --> 00:06:59,650 data to the auth endpoint, which is this right here. 106 00:06:59,650 --> 00:07:04,270 So let's see auth user, it's going to be this endpoint user slash auth. 107 00:07:04,270 --> 00:07:09,760 And of course we have to send the email and the password that's going to be passed in right here. 108 00:07:10,180 --> 00:07:10,570 Okay. 109 00:07:10,570 --> 00:07:13,960 And then the URL is going to be users. 110 00:07:15,710 --> 00:07:20,300 Users URL and then just slash auth. 111 00:07:20,660 --> 00:07:20,960 Okay. 112 00:07:20,960 --> 00:07:26,540 Because this is going to be localhost slash API slash users. 113 00:07:26,540 --> 00:07:28,820 And then we also want slash auth. 114 00:07:29,330 --> 00:07:35,960 And then since it's a post request, we're going to specify the method to be post, and then the body 115 00:07:35,960 --> 00:07:38,270 is going to be the data that's passed in. 116 00:07:38,740 --> 00:07:38,990 Okay. 117 00:07:38,990 --> 00:07:43,580 And we don't need this keep unused data for we don't need that because we're just we're making a post 118 00:07:43,580 --> 00:07:44,630 request here. 119 00:07:44,840 --> 00:07:53,060 And then to export it just like we did with the, you know, if we have a get products function, we 120 00:07:53,060 --> 00:07:55,260 do use get products query. 121 00:07:55,280 --> 00:07:59,420 Well, since we have a login mutation, what we do is use. 122 00:08:00,650 --> 00:08:01,460 Let's get rid of that. 123 00:08:01,460 --> 00:08:06,470 So we do use login, which is the name of the function and then mutation. 124 00:08:07,580 --> 00:08:09,800 And we can just get rid of this second one. 125 00:08:10,680 --> 00:08:11,040 Okay. 126 00:08:11,040 --> 00:08:14,220 And then make sure we export that from users. 127 00:08:15,820 --> 00:08:18,100 Users API slice. 128 00:08:19,620 --> 00:08:20,580 And that should do it. 129 00:08:20,580 --> 00:08:28,620 So now we should be able to dispatch this login action from our login screen, which we haven't created 130 00:08:28,620 --> 00:08:28,890 yet. 131 00:08:28,890 --> 00:08:31,110 So we're going to create that in the next video.