Okay.
It's time now to move on to our client side code in here.
So let's close all the open tabs down and inside, not our solution explorer.
We'll go back to our file and folder Explorer.
And inside the features folder we'll create a new feature for this.
And we will create well I'll say new file.
And then the folder name is going to be accounts.
And then use forward slash.
And we'll have accounts API dot ts.
We'll start with our RTK query side of things.
So let's do the normal here.
We'll say export const accounts API equals create API.
And once again just a normal reminder to get this from the correct location.
The one that ends in react and open parentheses curly brackets.
And inside here we can start adding the different properties we need such as the reducer path which
is going to be the account API for this one.
And below this we'll add a comma and we'll have our base query.
And we'll stick with using our base query with error handling.
And then we'll create some endpoints and specify in parentheses the builder.
Add the arrow open parentheses open curly brackets.
And now we can start defining our different queries.
So the first one is going to be for login.
And we'll use builder.
And technically we're not mutating any existing state based on this query.
But we're using mutation anyway because we're going to make a Post request.
And what do we get back from this.
What kind of result do we get back from our API?
Well, we don't get anything for a login because all it does is returns our response and sets our cookie.
So we'll specify void here.
And then we are going to have a type for this.
But I don't have it yet.
So I'm just going to use objects for the parameters that we're going to use here.
We'll open parentheses more curly brackets.
And then we can use the query.
And I'm going to call it creds as the object will have the contains our email address and password that
we're sending up.
So I'll add the arrow open curly brackets and we'll use return and specify the URL as login.
And then question mark for the query string.
And we'll say use cookies equals true.
We'll stick with using cookies for all of our authentication here.
Like I said, it is the more secure way of using this system because from our react application we can
access that cookie.
And if we can't access it, neither can Mr. Evil Hacker that's trying to get into or carry out some
kind of authentication based mischief.
So we'll stick with cookies.
We'll use the method here.
And this is going to be a Post request that's going up to our API.
And in the body of this request we're going to pass up the creds.
And that's going to be our email and password.
Below the login, we will have a register and we'll use builder dot mutation again and once again from
a register.
We're not going to log them in after they've registered.
We will make them log in again to go and get their cookie and then get the user information.
So we'll specify void for this as well.
Use object again because once again we don't have the objects we're going to use or the object type
we're going to use yet.
Then we'll use query.
And once again I'll just use creds as the name of the argument we're passing there.
And we'll return open curly brackets.
And this one's going to go to the URL of accounts forward slash register.
And then the method is going to be a post.
And the body once again will specify creds.
Also inside here we're going to have another endpoint that's going to call our user info endpoint on
the API.
So we'll call this one User info and we'll use builder.
This is a query and it's going to return to us a user object.
And we will create this one.
So inside the models folder let's just right click say new File and say user dot ts.
And we'll export type user equals open curly brackets.
And we'll just have email which is going to be a string.
And we'll have the roles which is a string array.
Just two things we're sending back from our API just now and back to our account API.
Let's use the quick fix and add the import for the user.
And we don't need any arguments for this.
So this is going to be void for the second type parameter there.
Open parentheses curly brackets and just a simple query.
This one will have query open parentheses These and the arrow.
And we'll have accounts forward slash user info.
And we do need another one in here as well.
That's going to be for logging out.
So we'll have log out and we'll use builder.
We'll use mutation as again because it is going to be a Post request.
But we don't need any type parameters for this.
So we'll just open parentheses open curly brackets and we'll add the query.
And we'll have a function here that doesn't take any parameters for the log out.
And we'll add the arrow.
And not curly brackets here needs to be parentheses.
Then curly brackets.
And we'll have the URL which is going to go to account forward slash log outs.
And the method here is going to be a post.
And we don't have any body or anything like that.
We need to send up with this request.
So that will get us started.
We're going to need to come back and make some adjustments to this, but we'll export a few things that
we're going to be using early on.
So I'll say exports Const.
Open curly brackets equals accounts API, and for the short term we will use the use login mutation
and the use register mutation and the use log out mutation.
But like I say we will be coming back and we'll go to our stores and we will add our new Redux thing
into our store.
So I'll specify accounts API in here, specify reducer path, add the colon and use account API dot
reducer.
And then we'll also concatenate this on for the middleware as well.
So it's going to be our account API and middleware.
Okay so that's the Redux side of things taken care of.
What we'll do next is we're going to start taking a look at forms because we need to start taking information
from the user such as what's their username and password.
And we'll take a look at the login form next.