We have improved the ProductPage
so that we're now displaying
all the information about a product,
including a picture and the price.
What's missing is the ability for a user
to buy a product.
For that we'll need some shopping cart functionality,
so that on this page we can display
an "Add to cart" button.
Now, in the Strapi server
that I have prepared for you
there is already a collection type
called "Cart Items".
But listing or adding cart items
requires authentication.
Let me show you what happens
if we try to get the cart items.
I'll open a new tab to use the REST Client.
And if we make a GET request for "/cart-items",
We get a "403 Forbidden" response.
That's because to get the cart items
we need to be authenticated as one of the users
that we can see in this collection.
I predefined two users, called Alice and Bob,
but you can add more if you like.
The question is: how can we authenticate a user?
With this REST Client we can keep
multiple requests in the same file
by separating them with 3 hash symbols.
And here I'll show you
how to make a login request.
This must be a POST
to "/auth/local".
Since it's a POST we also need to send some data,
so we need a header specifying
the "Content-Type" of the data we send,
which will be "application/json".
Then we can add an empty line
to separate the headers from the body,
and the body will be a JSON object.
To log in with Strapi we need to pass an "identifier",
that can be either the username or the email,
but I'll always use an email,
like "alice@example.com".
And then we need the password for that user,
that in this case is "Alice123", with a capital A.
If we send this POST request,
we get a 200 OK, so the login was successful.
And in the response body we can see
the user details,
but also something called "jwt",
which stands for JSON Web Token,
and is actually pronounced "jot".
So this token is something that
we need to save in our application
and then send back to the server
when we make other requests
to prove that we are authenticated.
Let's copy this string, and
the way can pass it in a request
is by adding a header called "Authorization",
with a value that must start with "Bearer",
followed by a space,
and then the token value,
which is a very long string.
This special string contains
information about the user,
encoded and signed by the server.
So when we send this request
the server looks at that token to verify
that we are authenticated as a valid user.
And that's why this time we get a "200 OK" response,
rather than a "403 Forbidden"
like in our first attempt.
Since the server knows who is
the user making the request
it can return the cart items for that specific user.
Even though in this case it's just an empty array,
because we haven't added any items to the cart yet.
Anyway, this is the basic flow
to authenticate a user:
log in, get a token, and then
send that token back in any following requests.
Now, since we're looking at this login request,
let's see what happens if we send the wrong password.
In this case the response is "400 Bad Request",
and the body contains a more detailed message,
which says "Identifier or password invalid".
So that's a scenario we'll need to handle
when we add a login page to our website.
Now, there's another API request we can make
that will be very useful.
We can get the user details
by calling "/users/me".
Of course this requires authentication,
so if we send it as it is
we'll get an error response.
In this case it's a "400 Bad Request",
and the message in the body says
"No authorization header was found".
Let's go and include that "Authorization" header
with a valid JSON web token.
And if we try again,
This time we get a "200 OK",
and the response body contains the user details.
This will be useful in our application because
if we save the token we get after the login,
later on we can make this request
not only to get the user details,
but also to check that the token is still valid,
because JSON web tokens expire after some time.
Ok. Now, I showed you how to log in
as an existing user,
but in our shop we'll also want
to let new users register to our website.
A registration request with Strapi
is similar to a login request,
but calling "/auth/local/register".
Instead of the "identifier"
we pass the "email".
And we also need a separate "username" field.
Let's add a third user called "Charlie",
after Alice and Bob,
with their own not very secure password,
just because it's an example.
Let's send the registration request.
That was successful,
and note that the body is exactly the same
as that of a login request:
it includes the authentication token
and the user details.
If we look at the Strapi dashboard,
and reload the Users page,
you can see that there's now
a new user in the list called Charlie.
Ok. So this was a relatively quick overview
of the various API requests
supported by the Strapi CMS around authentication.
In the rest of this section
we'll add authentication to our Next.js app,
and in the process of course
we'll need to make these API requests.