1
00:00:03,000 --> 00:00:05,341
We have improved the ProductPage

2
00:00:05,841 --> 00:00:07,591
so that we're now displaying

3
00:00:07,591 --> 00:00:09,841
all the information about a product,

4
00:00:09,841 --> 00:00:11,966
including a picture and the price.

5
00:00:12,591 --> 00:00:15,449
What's missing is the ability for a user

6
00:00:15,449 --> 00:00:16,665
to buy a product.

7
00:00:16,665 --> 00:00:20,453
For that we'll need some shopping cart functionality,

8
00:00:20,453 --> 00:00:22,954
so that on this page we can display

9
00:00:22,954 --> 00:00:24,670
an "Add to cart" button.

10
00:00:25,456 --> 00:00:27,321
Now, in the Strapi server

11
00:00:27,321 --> 00:00:29,410
that I have prepared for you

12
00:00:29,410 --> 00:00:31,947
there is already a collection type

13
00:00:31,947 --> 00:00:33,440
called "Cart Items".

14
00:00:33,440 --> 00:00:35,828
But listing or adding cart items

15
00:00:35,828 --> 00:00:37,618
requires authentication.

16
00:00:38,492 --> 00:00:40,103
Let me show you what happens

17
00:00:40,103 --> 00:00:41,945
if we try to get the cart items.

18
00:00:43,725 --> 00:00:46,216
I'll open a new tab to use the REST Client.

19
00:00:46,791 --> 00:00:50,234
And if we make a GET request for "/cart-items",

20
00:00:52,191 --> 00:00:54,900
We get a "403 Forbidden" response.

21
00:00:55,400 --> 00:00:57,856
That's because to get the cart items

22
00:00:57,856 --> 00:01:01,064
we need to be authenticated as one of the users

23
00:01:01,064 --> 00:01:03,452
that we can see in this collection.

24
00:01:04,087 --> 00:01:07,363
I predefined two users, called Alice and Bob,

25
00:01:07,363 --> 00:01:09,765
but you can add more if you like.

26
00:01:10,338 --> 00:01:13,580
The question is: how can we authenticate a user?

27
00:01:14,080 --> 00:01:16,622
With this REST Client we can keep

28
00:01:16,622 --> 00:01:19,242
multiple requests in the same file

29
00:01:19,242 --> 00:01:22,247
by separating them with 3 hash symbols.

30
00:01:22,902 --> 00:01:24,383
And here I'll show you

31
00:01:24,383 --> 00:01:26,268
how to make a login request.

32
00:01:26,268 --> 00:01:27,547
This must be a POST

33
00:01:28,182 --> 00:01:30,456
to "/auth/local".

34
00:01:31,215 --> 00:01:34,108
Since it's a POST we also need to send some data,

35
00:01:34,608 --> 00:01:36,642
so we need a header specifying

36
00:01:36,642 --> 00:01:39,286
the "Content-Type" of the data we send,

37
00:01:39,854 --> 00:01:42,195
which will be "application/json".

38
00:01:42,695 --> 00:01:44,554
Then we can add an empty line

39
00:01:44,554 --> 00:01:46,990
to separate the headers from the body,

40
00:01:46,990 --> 00:01:49,233
and the body will be a JSON object.

41
00:01:49,862 --> 00:01:53,417
To log in with Strapi we need to pass an "identifier",

42
00:01:53,417 --> 00:01:56,381
that can be either the username or the email,

43
00:01:56,947 --> 00:01:59,220
but I'll always use an email,

44
00:01:59,220 --> 00:02:01,180
like "alice@example.com".

45
00:02:01,759 --> 00:02:05,009
And then we need the password for that user,

46
00:02:05,009 --> 00:02:08,704
that in this case is "Alice123", with a capital A.

47
00:02:09,276 --> 00:02:11,539
If we send this POST request,

48
00:02:11,539 --> 00:02:15,049
we get a 200 OK, so the login was successful.

49
00:02:15,626 --> 00:02:17,680
And in the response body we can see

50
00:02:17,680 --> 00:02:18,678
the user details,

51
00:02:19,236 --> 00:02:21,592
but also something called "jwt",

52
00:02:21,592 --> 00:02:23,947
which stands for JSON Web Token,

53
00:02:23,947 --> 00:02:26,375
and is actually pronounced "jot".

54
00:02:27,022 --> 00:02:29,222
So this token is something that

55
00:02:29,222 --> 00:02:31,634
we need to save in our application

56
00:02:31,634 --> 00:02:33,904
and then send back to the server

57
00:02:33,904 --> 00:02:35,819
when we make other requests

58
00:02:35,819 --> 00:02:38,302
to prove that we are authenticated.

59
00:02:39,085 --> 00:02:40,695
Let's copy this string, and

60
00:02:40,695 --> 00:02:42,603
the way can pass it in a request

61
00:02:43,162 --> 00:02:46,105
is by adding a header called "Authorization",

62
00:02:46,605 --> 00:02:49,615
with a value that must start with "Bearer",

63
00:02:49,615 --> 00:02:51,015
followed by a space,

64
00:02:51,585 --> 00:02:53,424
and then the token value,

65
00:02:53,424 --> 00:02:55,482
which is a very long string.

66
00:02:55,482 --> 00:02:57,541
This special string contains

67
00:02:57,541 --> 00:02:59,526
information about the user,

68
00:02:59,526 --> 00:03:01,952
encoded and signed by the server.

69
00:03:02,746 --> 00:03:04,795
So when we send this request

70
00:03:04,795 --> 00:03:07,721
the server looks at that token to verify

71
00:03:07,721 --> 00:03:10,794
that we are authenticated as a valid user.

72
00:03:10,794 --> 00:03:14,598
And that's why this time we get a "200 OK" response,

73
00:03:14,598 --> 00:03:16,720
rather than a "403 Forbidden"

74
00:03:16,720 --> 00:03:18,622
like in our first attempt.

75
00:03:19,487 --> 00:03:21,489
Since the server knows who is

76
00:03:21,489 --> 00:03:23,353
the user making the request

77
00:03:23,353 --> 00:03:26,942
it can return the cart items for that specific user.

78
00:03:26,942 --> 00:03:30,392
Even though in this case it's just an empty array,

79
00:03:31,099 --> 00:03:34,718
because we haven't added any items to the cart yet.

80
00:03:34,718 --> 00:03:36,846
Anyway, this is the basic flow

81
00:03:36,846 --> 00:03:38,478
to authenticate a user:

82
00:03:39,120 --> 00:03:41,266
log in, get a token, and then

83
00:03:41,266 --> 00:03:44,744
send that token back in any following requests.

84
00:03:45,319 --> 00:03:47,900
Now, since we're looking at this login request,

85
00:03:47,900 --> 00:03:50,812
let's see what happens if we send the wrong password.

86
00:03:51,367 --> 00:03:54,845
In this case the response is "400 Bad Request",

87
00:03:55,345 --> 00:03:58,554
and the body contains a more detailed message,

88
00:03:58,554 --> 00:04:01,625
which says "Identifier or password invalid".

89
00:04:02,195 --> 00:04:05,104
So that's a scenario we'll need to handle

90
00:04:05,104 --> 00:04:07,942
when we add a login page to our website.

91
00:04:08,513 --> 00:04:11,349
Now, there's another API request we can make

92
00:04:11,349 --> 00:04:12,961
that will be very useful.

93
00:04:13,526 --> 00:04:16,153
We can get the user details

94
00:04:16,153 --> 00:04:18,391
by calling "/users/me".

95
00:04:19,526 --> 00:04:21,786
Of course this requires authentication,

96
00:04:21,786 --> 00:04:23,235
so if we send it as it is

97
00:04:23,235 --> 00:04:24,858
we'll get an error response.

98
00:04:25,474 --> 00:04:28,049
In this case it's a "400 Bad Request",

99
00:04:28,049 --> 00:04:30,217
and the message in the body says

100
00:04:30,217 --> 00:04:32,657
"No authorization header was found".

101
00:04:33,293 --> 00:04:36,336
Let's go and include that "Authorization" header

102
00:04:36,336 --> 00:04:38,112
with a valid JSON web token.

103
00:04:39,926 --> 00:04:40,812
And if we try again,

104
00:04:42,026 --> 00:04:44,166
This time we get a "200 OK",

105
00:04:44,666 --> 00:04:47,702
and the response body contains the user details.

106
00:04:47,702 --> 00:04:50,612
This will be useful in our application because

107
00:04:50,612 --> 00:04:53,396
if we save the token we get after the login,

108
00:04:54,023 --> 00:04:56,290
later on we can make this request

109
00:04:56,290 --> 00:04:58,558
not only to get the user details,

110
00:04:58,558 --> 00:05:01,856
but also to check that the token is still valid,

111
00:05:02,494 --> 00:05:05,973
because JSON web tokens expire after some time.

112
00:05:06,473 --> 00:05:09,063
Ok. Now, I showed you how to log in

113
00:05:09,063 --> 00:05:10,543
as an existing user,

114
00:05:11,117 --> 00:05:13,303
but in our shop we'll also want

115
00:05:13,303 --> 00:05:16,194
to let new users register to our website.

116
00:05:16,764 --> 00:05:19,142
A registration request with Strapi

117
00:05:19,142 --> 00:05:21,241
is similar to a login request,

118
00:05:21,865 --> 00:05:25,408
but calling  "/auth/local/register".

119
00:05:25,908 --> 00:05:27,600
Instead of the "identifier"

120
00:05:27,600 --> 00:05:28,854
we pass the "email".

121
00:05:29,416 --> 00:05:31,990
And we also need a separate "username" field.

122
00:05:33,716 --> 00:05:36,457
Let's add a third user called "Charlie",

123
00:05:36,457 --> 00:05:37,827
after Alice and Bob,

124
00:05:38,395 --> 00:05:40,745
with their own not very secure password,

125
00:05:40,745 --> 00:05:42,448
just because it's an example.

126
00:05:43,006 --> 00:05:44,711
Let's send the registration request.

127
00:05:45,211 --> 00:05:46,626
That was successful,

128
00:05:46,626 --> 00:05:49,595
and note that the body is exactly the same

129
00:05:49,595 --> 00:05:51,504
as that of a login request:

130
00:05:52,145 --> 00:05:54,428
it includes the authentication token

131
00:05:54,428 --> 00:05:55,759
and the user details.

132
00:05:56,322 --> 00:05:58,587
If we look at the Strapi dashboard,

133
00:05:58,587 --> 00:06:00,269
and reload the Users page,

134
00:06:01,688 --> 00:06:03,505
you can see that there's now

135
00:06:03,505 --> 00:06:05,970
a new user in the list called Charlie.

136
00:06:06,534 --> 00:06:09,915
Ok. So this was a relatively quick overview

137
00:06:09,915 --> 00:06:12,038
of the various API requests

138
00:06:12,616 --> 00:06:16,125
supported by the Strapi CMS around authentication.

139
00:06:16,125 --> 00:06:18,019
In the rest of this section

140
00:06:18,019 --> 00:06:21,107
we'll add authentication to our Next.js app,

141
00:06:21,107 --> 00:06:23,071
and in the process of course

142
00:06:23,071 --> 00:06:25,738
we'll need to make these API requests.