Okay.
So now that we have the backend API all set up with authentication where we can log in, we can create
a Json web token, store it in an Http only cookie, and that cookie is sent with every request after
that and validated through middleware.
Now we need to set up our user interface to take advantage of that.
And the way this is going to work is we're going to have an auth slice in our redux state, which will
be very simple.
It'll have a set credentials action to set the user to local storage once authenticated and all that.
And it will have a logout that will clear local storage.
All of the actual calls to our backend will be in a user's API slice.
So just like we had a products API slice to deal with products and we'll create both of these slices
in this video.
So let's go into our front end and before we do any of that, I just want to go into source and then
into constants.
Oh, we already never mind.
We already added it.
I just wanted to make sure we have our users URL because that's what we're going to be working with.
All right, so let's go into slices and we'll first create our auth slice.
So let's say auth slice dot js.
Now in this particular slice, we're not dealing with any, any endpoints, any API stuff that's going
to go in another slice called user's API slice.
This is simply to set the user credentials to local storage and remove them.
So let's import.
And we're going to import, not create API, but just create slice because it's going to be just a regular
slice and that's going to be from Redux toolkit.
And then let's create our initial state.
So our initial state is going to be, let's see an object and we're going to have user info.
And basically we want to check to first to see if there's user info in this local storage.
If there is, then we're going to use that.
If not, then we'll set it to null.
So let's say local storage dot get item user info.
If that's there, then we're going to use that.
If not, then it's going to be null and we're parsing it when it comes out because it's going to be
stored in local storage as a string.
But we want to parse it back to a JavaScript object.
All right, now let's create our slice.
So auth slice.
And we're going to use create Slice here.
And let's pass in a name of auth and our initial state and then our reducers.
So like I said, we're only we're just going to have a set credentials and a log out.
We're not going to do the log out just yet.
We'll do that later.
But let's add our set credentials and that's going to be a function that takes a state and an action.
And we're going to set the user info state to the payload.
Okay.
Because once we you know, we hit our back end through the user API slice, we get our user info, we're
going to send it here as the payload in the action.
So then we set the, the user info state to that payload and then we just want to store that in local
storage as well.
So let's say local storage dot set item, user info, and then we're going to stringify the payload,
which is the user and pass it in.
Okay.
So our redux state is almost always going to match up with what we have in local storage.
So now let's export.
First of all, we'll export as default, the auth slice reducer, and we actually have to bring that
into our store.
So let's say auth slice reducer, but then the set credentials, we want to export that as an action
so we can call it.
So we can use it.
So let's say export const and we're going to add in here set credentials and set that equal to auth
slice actions.
Okay.
And that should do it.
So let's save that.
Now, we do have to add this to the store.
We don't add like products and users API to the store because that's basically a child of the API slice.
But this is not so let's go into store.
JS.
And let's see, we're going to bring in.
Let's say import auth.
So we want to do off slice.
Reducer from our auth slice.
And then we're just simply going to add it down here.
So right under Cart, let's say auth and set that to the auth slice reducer.
Now by doing that we should let's come over here and I'm just going to open up.
Oops, wrong key.
I'm going to open up my dev tools and let's check out the state.
So if we go to redux.
You now should see.
Let's see.
Can I make this?
You should see off with user info and that obviously is going to be set to no because we haven't done
anything to to set it to anything else right.
So the next thing we're going to do is create the the users API slice so we can close up the store and
the auth slice.
And let's create a new file in slices called users API slice dot js.
Now, this is going to be very similar to what we did in our Products API.
In fact, I could probably just copy what we have here and then just edit it.
So instead of products URL, we're going to bring in the users URL and we're bringing in the API slice
because you can think of that as kind of like the parent to this.
Let's change it from products to users.
API slice and then we're injecting our endpoints.
Now at the moment, all I want to do is is a login.
So let's get rid of this second function here.
And let's change.
Actually.
Did I delete something I wasn't supposed to?
Yeah.
So I only want to delete this.
So let's change getproducts to login and let's see, we want to instead of doing a query because you
know, we're not just fetching data where we're authenticating, we're making a post request.
So instead of a query, this is actually going to be a mutation.
So we're going to say build or mutation.
This is still going to be query and we're going to pass in here data because we're going to be sending
data to the auth endpoint, which is this right here.
So let's see auth user, it's going to be this endpoint user slash auth.
And of course we have to send the email and the password that's going to be passed in right here.
Okay.
And then the URL is going to be users.
Users URL and then just slash auth.
Okay.
Because this is going to be localhost slash API slash users.
And then we also want slash auth.
And then since it's a post request, we're going to specify the method to be post, and then the body
is going to be the data that's passed in.
Okay.
And we don't need this keep unused data for we don't need that because we're just we're making a post
request here.
And then to export it just like we did with the, you know, if we have a get products function, we
do use get products query.
Well, since we have a login mutation, what we do is use.
Let's get rid of that.
So we do use login, which is the name of the function and then mutation.
And we can just get rid of this second one.
Okay.
And then make sure we export that from users.
Users API slice.
And that should do it.
So now we should be able to dispatch this login action from our login screen, which we haven't created
yet.
So we're going to create that in the next video.