1
00:00:02,000 --> 00:00:04,000
Now with the SignUp API route added,

2
00:00:04,000 --> 00:00:07,000
let's go back to the auth form

3
00:00:07,000 --> 00:00:09,000
and make sure that we talk to this API route

4
00:00:09,000 --> 00:00:12,000
when the user authenticates.

5
00:00:12,000 --> 00:00:15,000
For this in the end, we wanna listen to the form submission

6
00:00:15,000 --> 00:00:18,000
And then if we are not in login mode,

7
00:00:18,000 --> 00:00:21,000
which means we are in create mode,

8
00:00:21,000 --> 00:00:22,000
then we wanna send a request

9
00:00:22,000 --> 00:00:27,000
to our backend here to create a new user.

10
00:00:27,000 --> 00:00:29,000
For this I'll add a new function.

11
00:00:29,000 --> 00:00:32,000
The submit handler, let's say

12
00:00:33,000 --> 00:00:36,000
where we get that event which we use to again,

13
00:00:36,000 --> 00:00:38,000
prevent the default

14
00:00:38,000 --> 00:00:41,000
as we did it many times before this course.

15
00:00:41,000 --> 00:00:43,000
And then here I'll first of all check

16
00:00:43,000 --> 00:00:46,000
if we are in log in mode,

17
00:00:46,000 --> 00:00:50,000
which means we want to log user in,

18
00:00:50,000 --> 00:00:52,000
we want to log a user in.

19
00:00:52,000 --> 00:00:54,000
That's something we can't do yet.

20
00:00:54,000 --> 00:00:56,000
So I'll do nothing here.

21
00:00:56,000 --> 00:01:01,000
But if we are in the not login mode, so in the create mode

22
00:01:01,000 --> 00:01:05,000
then we wanna send a request that creates a new user.

23
00:01:05,000 --> 00:01:07,000
For this I'll create a new function

24
00:01:07,000 --> 00:01:09,000
outside of the component function.

25
00:01:09,000 --> 00:01:12,000
We could also create it in a brand new file.

26
00:01:12,000 --> 00:01:14,000
I'll just do it here to keep the component function lean

27
00:01:14,000 --> 00:01:17,000
and I'll name this function,

28
00:01:17,000 --> 00:01:21,000
create user, like this.

29
00:01:21,000 --> 00:01:24,000
And here I expect to get the email and the password.

30
00:01:24,000 --> 00:01:28,000
We will need to retrieve that from the form in a second.

31
00:01:28,000 --> 00:01:30,000
And then here I wanna send a request.

32
00:01:30,000 --> 00:01:32,000
So again we can use the fetch function

33
00:01:32,000 --> 00:01:35,000
as we did multiple times before in the course

34
00:01:35,000 --> 00:01:38,000
and send the request to slash API slash off

35
00:01:38,000 --> 00:01:42,000
slash sign up to target this signup API route.

36
00:01:43,000 --> 00:01:45,000
Now it should be a post request.

37
00:01:45,000 --> 00:01:48,000
So add this second argument here

38
00:01:48,000 --> 00:01:53,000
and set the methods to post and then add the body.

39
00:01:53,000 --> 00:01:55,000
And the body will be in JSON format

40
00:01:55,000 --> 00:01:58,000
and I'll add an object with email and password,

41
00:01:58,000 --> 00:02:01,000
so with that data we get as parameters.

42
00:02:02,000 --> 00:02:07,000
Then let's also add some headers to pass extra information

43
00:02:07,000 --> 00:02:10,000
about the fact that we're sending JSON data

44
00:02:10,000 --> 00:02:13,000
by adding that content type header like this

45
00:02:13,000 --> 00:02:15,000
And we configured this request.

46
00:02:16,000 --> 00:02:17,000
Now I will turn,

47
00:02:17,000 --> 00:02:20,000
create user into an async function

48
00:02:20,000 --> 00:02:23,000
so that again we can use await here

49
00:02:23,000 --> 00:02:25,000
and of course then we can

50
00:02:25,000 --> 00:02:27,000
wait for our response

51
00:02:29,000 --> 00:02:31,000
and then handle that response.

52
00:02:31,000 --> 00:02:33,000
Now, for example, by getting the data

53
00:02:33,000 --> 00:02:38,000
out of that response with response JSON and awaiting debts

54
00:02:38,000 --> 00:02:41,000
since that all's returns a promise

55
00:02:41,000 --> 00:02:44,000
and then maybe check if not response, okay.

56
00:02:44,000 --> 00:02:47,000
So if it's not okay, if we got a error status code

57
00:02:47,000 --> 00:02:51,000
and then we could frown a new error

58
00:02:51,000 --> 00:02:54,000
where we use data message as a message,

59
00:02:54,000 --> 00:02:58,000
or if we don't have that just say something went wrong.

60
00:02:59,000 --> 00:03:03,000
And then ultimately I'll return data here though,

61
00:03:03,000 --> 00:03:05,000
if we make it past the safe check.

62
00:03:06,000 --> 00:03:07,000
So that's create user.

63
00:03:07,000 --> 00:03:11,000
Now here in that L's case and submit handler,

64
00:03:11,000 --> 00:03:13,000
we wanna call create user

65
00:03:13,000 --> 00:03:16,000
and pass into email and password.

66
00:03:16,000 --> 00:03:18,000
Now for this we need to get access

67
00:03:18,000 --> 00:03:20,000
to the entered email and password.

68
00:03:20,000 --> 00:03:24,000
And we can use state with two way binding for that.

69
00:03:24,000 --> 00:03:27,000
We did that in the block project, for example

70
00:03:27,000 --> 00:03:30,000
or we use refs for a quick and easy access

71
00:03:30,000 --> 00:03:32,000
And I'll do the latter.

72
00:03:32,000 --> 00:03:36,000
I'll import use ref from react like this.

73
00:03:37,000 --> 00:03:41,000
And then in the component function, just create two refs

74
00:03:41,000 --> 00:03:43,000
or the two inputs we have

75
00:03:43,000 --> 00:03:46,000
and we have to email input ref then

76
00:03:46,000 --> 00:03:51,000
and we also have the password input ref like this then.

77
00:03:54,000 --> 00:03:57,000
Now we just need to wire them up.

78
00:03:57,000 --> 00:04:01,000
So on the email input, we set ref equal to email input ref

79
00:04:01,000 --> 00:04:03,000
and on the password input

80
00:04:03,000 --> 00:04:07,000
we set that equal to password input ref.

81
00:04:09,000 --> 00:04:11,000
Now that we got those refs

82
00:04:11,000 --> 00:04:13,000
we can get to data in the submit handler.

83
00:04:13,000 --> 00:04:16,000
So here we got the entered email

84
00:04:16,000 --> 00:04:19,000
by accessing the email input ref dot current dot value.

85
00:04:19,000 --> 00:04:22,000
As you saw before in the course

86
00:04:22,000 --> 00:04:26,000
and get the entered password

87
00:04:26,000 --> 00:04:30,000
by accessing password input ref dot current dot value.

88
00:04:31,000 --> 00:04:34,000
Now we could add validation here.

89
00:04:36,000 --> 00:04:37,000
That's optional.

90
00:04:39,000 --> 00:04:42,000
We definitely need validation in the API route though

91
00:04:42,000 --> 00:04:44,000
because that validation here on the client

92
00:04:44,000 --> 00:04:46,000
can always be tricked

93
00:04:46,000 --> 00:04:49,000
and we do have validation on the API route.

94
00:04:49,000 --> 00:04:51,000
So we'll save some time here

95
00:04:51,000 --> 00:04:55,000
and save some code and not add validation in this component.

96
00:04:55,000 --> 00:04:56,000
So we'll skip this here.

97
00:04:56,000 --> 00:05:00,000
And instead we'll use that data just like this

98
00:05:00,000 --> 00:05:03,000
and then create a user here.

99
00:05:03,000 --> 00:05:05,000
So for this we pass the entered email

100
00:05:05,000 --> 00:05:07,000
as a first argument to create user

101
00:05:07,000 --> 00:05:10,000
and the entered password as a second argument.

102
00:05:11,000 --> 00:05:15,000
Now of course create user is a async function

103
00:05:15,000 --> 00:05:17,000
and hence returns a promise.

104
00:05:17,000 --> 00:05:21,000
So we can all turn submit handler into async function

105
00:05:21,000 --> 00:05:24,000
so that we can use await in here as well.

106
00:05:24,000 --> 00:05:28,000
And await that response, that result of that operation

107
00:05:28,000 --> 00:05:31,000
maybe all the rapid with try catch

108
00:05:31,000 --> 00:05:34,000
to catch any errors we might be facing here.

109
00:05:35,000 --> 00:05:37,000
And then we can handle these errors.

110
00:05:37,000 --> 00:05:39,000
And for the moment I'll just console log

111
00:05:39,000 --> 00:05:44,000
any errors we might be getting, like this.

112
00:05:44,000 --> 00:05:46,000
And if we are successful though

113
00:05:46,000 --> 00:05:47,000
if we stay in that try block

114
00:05:47,000 --> 00:05:51,000
then we of course know that know a user was created.

115
00:05:51,000 --> 00:05:55,000
So then here I'll just console log the regular result

116
00:05:55,000 --> 00:05:57,000
for the moment.

117
00:05:57,000 --> 00:06:00,000
And we can give the user a better feedback, but we did dive

118
00:06:00,000 --> 00:06:04,000
into those things before in the course already.

119
00:06:04,000 --> 00:06:06,000
And therefore here, I really wanna focus

120
00:06:06,000 --> 00:06:10,000
on the authentication exclusive part.

121
00:06:10,000 --> 00:06:13,000
Hence here for the moment, we will just locked a result

122
00:06:13,000 --> 00:06:16,000
to the console and not do anything else.

123
00:06:17,000 --> 00:06:19,000
Now that should be sending a request.

124
00:06:19,000 --> 00:06:23,000
Of course, we now still need to connect the foreign though.

125
00:06:23,000 --> 00:06:27,000
So we connect on submit to the submit handler like this.

126
00:06:27,000 --> 00:06:31,000
And there also is something we still need to do

127
00:06:31,000 --> 00:06:32,000
on the API route.

128
00:06:33,000 --> 00:06:35,000
Because I'm sending a post request here

129
00:06:35,000 --> 00:06:38,000
and indeed only post requests

130
00:06:38,000 --> 00:06:41,000
should trigger this user creation.

131
00:06:41,000 --> 00:06:44,000
So here in this async function handler

132
00:06:44,000 --> 00:06:49,000
I actually wanna check if request method is equal to post

133
00:06:51,000 --> 00:06:53,000
and only continue in that case.

134
00:06:53,000 --> 00:06:56,000
So if request method is post,

135
00:06:58,000 --> 00:07:01,000
then I will execute that code,

136
00:07:01,000 --> 00:07:03,000
otherwise I don't do anything.

137
00:07:04,000 --> 00:07:07,000
Of course therefore alternatively, if I revert this,

138
00:07:07,000 --> 00:07:10,000
we could all check, if the request method is not post

139
00:07:10,000 --> 00:07:15,000
and then just return and only continue if it is post.

140
00:07:15,000 --> 00:07:19,000
Then we don't need to wrap everything with that if check.

141
00:07:19,000 --> 00:07:20,000
We could have done that before

142
00:07:20,000 --> 00:07:23,000
in the course as well in similar cases.

143
00:07:24,000 --> 00:07:29,000
Okay. So now if we save everything this should work.

144
00:07:29,000 --> 00:07:32,000
If we go back to the auth form

145
00:07:32,000 --> 00:07:35,000
reload and click on create new account

146
00:07:35,000 --> 00:07:38,000
and I opened a developer tools to check

147
00:07:38,000 --> 00:07:41,000
for output and errors.

148
00:07:41,000 --> 00:07:43,000
If I enter some data here

149
00:07:43,000 --> 00:07:46,000
let's say a password which is too short,

150
00:07:46,000 --> 00:07:49,000
then I get back a 422 response

151
00:07:49,000 --> 00:07:53,000
with my error message that the password is too short.

152
00:07:53,000 --> 00:07:56,000
And of course we might wanna show that to the user

153
00:07:56,000 --> 00:07:58,000
but for the reasons mentioned a couple of seconds ago

154
00:07:58,000 --> 00:08:00,000
I'm not doing this here.

155
00:08:00,000 --> 00:08:05,000
So if I now enter a password which is long enough

156
00:08:05,000 --> 00:08:08,000
and I sent this request, that looks better

157
00:08:08,000 --> 00:08:10,000
and I get created user as a response.

158
00:08:10,000 --> 00:08:15,000
And if we have a look into our MongoDB collections here,

159
00:08:15,000 --> 00:08:17,000
we have the auth demo database

160
00:08:17,000 --> 00:08:20,000
and in users we see our user data

161
00:08:20,000 --> 00:08:25,000
and we see that password actually is an object though.

162
00:08:25,000 --> 00:08:27,000
That's not entirely correct.

163
00:08:27,000 --> 00:08:30,000
I'll have to look into that again.

164
00:08:30,000 --> 00:08:31,000
That should not be a object.

165
00:08:31,000 --> 00:08:35,000
It should be a super long, strange looking string

166
00:08:35,000 --> 00:08:37,000
But generally it's working.

167
00:08:37,000 --> 00:08:40,000
If you are getting some error with your connection

168
00:08:40,000 --> 00:08:42,000
to MongoDB or something like this

169
00:08:42,000 --> 00:08:46,000
double check that you also white listed your local IP

170
00:08:46,000 --> 00:08:48,000
under network access by the way.

171
00:08:48,000 --> 00:08:52,000
But with that, let's have a look at our password generation

172
00:08:52,000 --> 00:08:56,000
What's going wrong there in the API route.

173
00:08:56,000 --> 00:08:58,000
I'm creating that hash password.

174
00:08:58,000 --> 00:09:01,000
And yes, that of course returns a promise.

175
00:09:01,000 --> 00:09:03,000
I forgot to await that

176
00:09:03,000 --> 00:09:06,000
And hence I stored the promise in that database

177
00:09:06,000 --> 00:09:08,000
instead of the result of that promise,

178
00:09:08,000 --> 00:09:10,000
which would be that string.

179
00:09:10,000 --> 00:09:13,000
And hence we need to await hash password here.

180
00:09:14,000 --> 00:09:15,000
If we do that

181
00:09:15,000 --> 00:09:19,000
And I then send that same request again for the same user.

182
00:09:20,000 --> 00:09:23,000
Now, if we update MongoDB

183
00:09:25,000 --> 00:09:28,000
we see that here, that's our hashed password.

184
00:09:28,000 --> 00:09:29,000
So that's looking good.

185
00:09:29,000 --> 00:09:31,000
Let me delete the average user.

186
00:09:31,000 --> 00:09:34,000
And that's how we can create users.

187
00:09:34,000 --> 00:09:37,000
Totally on our own with the tools we learned

188
00:09:37,000 --> 00:09:39,000
about before in the course already.