WEBVTT 00:00.020 --> 00:00.380 Okay. 00:00.380 --> 00:04.250 It's time now to move on to our client side code in here. 00:04.250 --> 00:10.970 So let's close all the open tabs down and inside, not our solution explorer. 00:10.970 --> 00:13.580 We'll go back to our file and folder Explorer. 00:13.580 --> 00:17.180 And inside the features folder we'll create a new feature for this. 00:17.180 --> 00:20.360 And we will create well I'll say new file. 00:20.360 --> 00:23.180 And then the folder name is going to be accounts. 00:23.180 --> 00:25.010 And then use forward slash. 00:25.010 --> 00:28.520 And we'll have accounts API dot ts. 00:28.550 --> 00:32.690 We'll start with our RTK query side of things. 00:32.720 --> 00:34.940 So let's do the normal here. 00:34.940 --> 00:41.780 We'll say export const accounts API equals create API. 00:41.780 --> 00:46.040 And once again just a normal reminder to get this from the correct location. 00:46.040 --> 00:50.270 The one that ends in react and open parentheses curly brackets. 00:50.270 --> 00:57.050 And inside here we can start adding the different properties we need such as the reducer path which 00:57.050 --> 01:00.470 is going to be the account API for this one. 01:01.340 --> 01:06.650 And below this we'll add a comma and we'll have our base query. 01:06.830 --> 01:11.120 And we'll stick with using our base query with error handling. 01:11.270 --> 01:17.480 And then we'll create some endpoints and specify in parentheses the builder. 01:18.110 --> 01:21.590 Add the arrow open parentheses open curly brackets. 01:21.590 --> 01:25.220 And now we can start defining our different queries. 01:25.220 --> 01:27.320 So the first one is going to be for login. 01:27.320 --> 01:29.570 And we'll use builder. 01:29.600 --> 01:35.030 And technically we're not mutating any existing state based on this query. 01:35.030 --> 01:38.690 But we're using mutation anyway because we're going to make a Post request. 01:38.690 --> 01:40.340 And what do we get back from this. 01:40.370 --> 01:42.410 What kind of result do we get back from our API? 01:42.440 --> 01:48.020 Well, we don't get anything for a login because all it does is returns our response and sets our cookie. 01:48.020 --> 01:50.060 So we'll specify void here. 01:50.360 --> 01:53.150 And then we are going to have a type for this. 01:53.150 --> 01:54.080 But I don't have it yet. 01:54.080 --> 01:59.240 So I'm just going to use objects for the parameters that we're going to use here. 01:59.270 --> 02:02.150 We'll open parentheses more curly brackets. 02:03.020 --> 02:05.090 And then we can use the query. 02:05.090 --> 02:11.840 And I'm going to call it creds as the object will have the contains our email address and password that 02:11.840 --> 02:12.920 we're sending up. 02:12.920 --> 02:21.110 So I'll add the arrow open curly brackets and we'll use return and specify the URL as login. 02:22.460 --> 02:26.420 And then question mark for the query string. 02:26.420 --> 02:29.720 And we'll say use cookies equals true. 02:29.750 --> 02:33.470 We'll stick with using cookies for all of our authentication here. 02:33.500 --> 02:40.760 Like I said, it is the more secure way of using this system because from our react application we can 02:40.790 --> 02:42.200 access that cookie. 02:42.440 --> 02:49.910 And if we can't access it, neither can Mr. Evil Hacker that's trying to get into or carry out some 02:49.910 --> 02:52.670 kind of authentication based mischief. 02:52.670 --> 02:53.990 So we'll stick with cookies. 02:53.990 --> 02:55.640 We'll use the method here. 02:55.640 --> 02:59.120 And this is going to be a Post request that's going up to our API. 02:59.150 --> 03:02.690 And in the body of this request we're going to pass up the creds. 03:02.690 --> 03:05.180 And that's going to be our email and password. 03:06.830 --> 03:16.850 Below the login, we will have a register and we'll use builder dot mutation again and once again from 03:16.850 --> 03:17.390 a register. 03:17.390 --> 03:19.850 We're not going to log them in after they've registered. 03:19.850 --> 03:26.480 We will make them log in again to go and get their cookie and then get the user information. 03:26.480 --> 03:29.330 So we'll specify void for this as well. 03:29.330 --> 03:34.640 Use object again because once again we don't have the objects we're going to use or the object type 03:34.640 --> 03:36.050 we're going to use yet. 03:36.590 --> 03:37.910 Then we'll use query. 03:37.910 --> 03:43.130 And once again I'll just use creds as the name of the argument we're passing there. 03:43.130 --> 03:45.890 And we'll return open curly brackets. 03:45.890 --> 03:53.330 And this one's going to go to the URL of accounts forward slash register. 03:53.990 --> 03:58.160 And then the method is going to be a post. 03:59.270 --> 04:03.020 And the body once again will specify creds. 04:04.010 --> 04:09.870 Also inside here we're going to have another endpoint that's going to call our user info endpoint on 04:09.870 --> 04:10.860 the API. 04:11.070 --> 04:17.100 So we'll call this one User info and we'll use builder. 04:17.130 --> 04:21.750 This is a query and it's going to return to us a user object. 04:21.750 --> 04:23.580 And we will create this one. 04:23.610 --> 04:32.430 So inside the models folder let's just right click say new File and say user dot ts. 04:32.460 --> 04:38.760 And we'll export type user equals open curly brackets. 04:38.760 --> 04:42.180 And we'll just have email which is going to be a string. 04:42.180 --> 04:45.480 And we'll have the roles which is a string array. 04:45.480 --> 04:51.420 Just two things we're sending back from our API just now and back to our account API. 04:51.630 --> 04:56.280 Let's use the quick fix and add the import for the user. 04:56.280 --> 04:58.830 And we don't need any arguments for this. 04:58.830 --> 05:01.770 So this is going to be void for the second type parameter there. 05:02.070 --> 05:05.760 Open parentheses curly brackets and just a simple query. 05:05.760 --> 05:09.990 This one will have query open parentheses These and the arrow. 05:09.990 --> 05:14.730 And we'll have accounts forward slash user info. 05:14.730 --> 05:17.250 And we do need another one in here as well. 05:17.250 --> 05:18.600 That's going to be for logging out. 05:18.600 --> 05:21.480 So we'll have log out and we'll use builder. 05:21.690 --> 05:25.830 We'll use mutation as again because it is going to be a Post request. 05:25.830 --> 05:27.720 But we don't need any type parameters for this. 05:27.720 --> 05:32.700 So we'll just open parentheses open curly brackets and we'll add the query. 05:33.210 --> 05:38.070 And we'll have a function here that doesn't take any parameters for the log out. 05:38.070 --> 05:39.900 And we'll add the arrow. 05:40.770 --> 05:43.350 And not curly brackets here needs to be parentheses. 05:43.380 --> 05:44.880 Then curly brackets. 05:45.090 --> 05:50.880 And we'll have the URL which is going to go to account forward slash log outs. 05:50.970 --> 05:54.810 And the method here is going to be a post. 05:54.810 --> 05:58.110 And we don't have any body or anything like that. 05:58.110 --> 06:00.750 We need to send up with this request. 06:00.780 --> 06:02.220 So that will get us started. 06:02.220 --> 06:06.630 We're going to need to come back and make some adjustments to this, but we'll export a few things that 06:06.630 --> 06:08.370 we're going to be using early on. 06:08.370 --> 06:12.030 So I'll say exports Const. 06:12.060 --> 06:21.960 Open curly brackets equals accounts API, and for the short term we will use the use login mutation 06:21.960 --> 06:29.880 and the use register mutation and the use log out mutation. 06:29.880 --> 06:39.870 But like I say we will be coming back and we'll go to our stores and we will add our new Redux thing 06:39.870 --> 06:41.580 into our store. 06:41.580 --> 06:48.780 So I'll specify accounts API in here, specify reducer path, add the colon and use account API dot 06:48.780 --> 06:49.800 reducer. 06:49.860 --> 06:53.190 And then we'll also concatenate this on for the middleware as well. 06:53.190 --> 06:57.330 So it's going to be our account API and middleware. 06:57.360 --> 07:01.260 Okay so that's the Redux side of things taken care of. 07:01.260 --> 07:06.150 What we'll do next is we're going to start taking a look at forms because we need to start taking information 07:06.150 --> 07:09.780 from the user such as what's their username and password. 07:09.780 --> 07:13.050 And we'll take a look at the login form next.