1
00:00:00,050 --> 00:00:00,260
Okay.

2
00:00:00,320 --> 00:00:06,980
And before we set up login user functionality on the front end, let's quickly recall the request we're

3
00:00:06,980 --> 00:00:08,210
going to be working with.

4
00:00:08,240 --> 00:00:12,770
So the URL is forward slash auth forward slash login.

5
00:00:13,160 --> 00:00:18,800
The method is post and this is the data we want to send in the body.

6
00:00:19,190 --> 00:00:25,430
If everything is correct, we're going to get back two things the message as well as the cookie, which

7
00:00:25,460 --> 00:00:30,200
of course we're going to use later to access authenticated routes.

8
00:00:31,120 --> 00:00:36,280
And if there's some kind of error, of course, we're going to get back the error response.

9
00:00:36,340 --> 00:00:36,880
All right.

10
00:00:36,880 --> 00:00:41,080
So up next, let's knock out the login user functionality.

11
00:00:41,230 --> 00:00:43,900
As you can see, yes, we'll set up the action.

12
00:00:43,930 --> 00:00:46,450
Yes, we'll grab the form data.

13
00:00:46,450 --> 00:00:48,820
We'll turn it into an object.

14
00:00:48,850 --> 00:00:49,840
What is the difference?

15
00:00:49,840 --> 00:00:53,560
Well, now, of course, the request is going to go to a login.

16
00:00:53,560 --> 00:00:57,100
If we're successful, we'll just display the first message.

17
00:00:57,100 --> 00:00:58,360
And where do we want to go?

18
00:00:58,360 --> 00:01:06,070
Well, the entire functionality is located on the dashboard, so we might as well direct the user there.

19
00:01:06,070 --> 00:01:13,540
If there is an error, we'll display the error message and also right away want to take care of the

20
00:01:13,570 --> 00:01:15,010
submit button.

21
00:01:15,010 --> 00:01:18,840
Basically, if we're submitting, then we'll disable the button.

22
00:01:18,850 --> 00:01:20,920
So let's start working on that.

23
00:01:20,980 --> 00:01:22,270
And you know what?

24
00:01:22,270 --> 00:01:23,620
I will grab these imports.

25
00:01:23,620 --> 00:01:27,550
I really don't see the point of typing them from the scratch.

26
00:01:27,610 --> 00:01:29,680
And of course we already have some imports.

27
00:01:29,680 --> 00:01:31,580
We'll just replace it over here.

28
00:01:32,030 --> 00:01:38,370
Then the first thing I always like to do is set up that action, export it and set it in my app.jsx

29
00:01:38,600 --> 00:01:42,080
because after that, of course I can just nicely work in the file.

30
00:01:42,080 --> 00:01:46,310
So we're going to go here with export const action.

31
00:01:47,130 --> 00:01:49,590
This is going to be equal to a sink.

32
00:01:49,770 --> 00:01:52,620
And yes, we'll right away grab the request.

33
00:01:53,540 --> 00:01:55,370
As far as the function.

34
00:01:56,430 --> 00:01:58,890
You know, for now, let's just return null.

35
00:02:00,330 --> 00:02:01,350
We're exporting.

36
00:02:01,350 --> 00:02:07,830
So now we just quickly want to navigate back to App.jsx copy and paste.

37
00:02:08,100 --> 00:02:10,080
And this will be my login action.

38
00:02:11,009 --> 00:02:12,690
Of course we want to change the page.

39
00:02:14,160 --> 00:02:15,350
So pages.

40
00:02:15,360 --> 00:02:17,520
We're looking for the login one.

41
00:02:18,400 --> 00:02:20,650
And let's add the quotation mark.

42
00:02:20,830 --> 00:02:25,150
Let's scroll down and we're looking for the login route.

43
00:02:25,300 --> 00:02:29,320
So action is equal to a login action.

44
00:02:29,770 --> 00:02:30,430
Awesome.

45
00:02:30,430 --> 00:02:32,590
And then back in the page.

46
00:02:33,370 --> 00:02:39,040
Let's set up this functionality first in the action and then we'll worry about the submit button.

47
00:02:39,040 --> 00:02:46,120
So for starters, like I said in the previous videos, you'll have these lines of code all the time

48
00:02:46,150 --> 00:02:48,700
as far as when you're collecting the values.

49
00:02:48,700 --> 00:02:54,040
So essentially we want to go here with form data that is equal to await.

50
00:02:54,370 --> 00:02:58,240
We're looking for request, then dot, then we want to invoke form data.

51
00:02:58,240 --> 00:03:02,770
And since I want to get the object, I'm going to go with const data is equal to.

52
00:03:03,620 --> 00:03:04,490
Object.

53
00:03:05,360 --> 00:03:07,610
Dot entries or from entries.

54
00:03:07,700 --> 00:03:08,450
My apologies.

55
00:03:08,450 --> 00:03:11,140
And then we'll pass in the form data.

56
00:03:11,210 --> 00:03:17,840
Then since we have the asynchronous functionality, we'll right away set up, try and catch.

57
00:03:18,260 --> 00:03:21,740
We'll right away go with await then custom fetch.

58
00:03:21,950 --> 00:03:27,200
It's going to be a post request and we want to go to auth and then login.

59
00:03:27,290 --> 00:03:29,390
And then what data do we want to send?

60
00:03:29,420 --> 00:03:36,950
Well whatever is in this object and if you have the name attributes, all of the inputs in this case

61
00:03:36,950 --> 00:03:39,980
email and password are going to be located in there.

62
00:03:39,980 --> 00:03:45,830
And again, since we have required set already, you won't be able to submit without any values.

63
00:03:45,830 --> 00:03:52,280
And since we have default values, I mean pretty much you'll always have some kind of data in there.

64
00:03:52,310 --> 00:03:54,420
Now, if we're successful, what do we want to do?

65
00:03:54,460 --> 00:03:58,280
Well, toast, success and let's just say login successful.

66
00:03:58,280 --> 00:04:05,120
And not only that, we want to go with the return and we want to redirect the user to forward slash

67
00:04:05,360 --> 00:04:09,040
dashboard so in there he can create the job.

68
00:04:09,050 --> 00:04:11,210
Take a look at the stats and all that cool stuff.

69
00:04:11,300 --> 00:04:14,510
And when it comes to error, same deal.

70
00:04:14,810 --> 00:04:20,180
We'll just go here with toast error then let's look for error.

71
00:04:22,160 --> 00:04:24,990
Question mark dot response.

72
00:04:25,580 --> 00:04:28,490
And I think in the upcoming ones, I'll just copy and paste.

73
00:04:28,490 --> 00:04:34,340
I don't think there's a point to type it together and then we're going to look for message and remember,

74
00:04:34,340 --> 00:04:40,790
yes, it's very important we want to go over here and return an error and then let's also take care

75
00:04:40,790 --> 00:04:42,200
of that submit button.

76
00:04:43,190 --> 00:04:50,090
So we're going to go here with navigation that is equal to use navigation.

77
00:04:50,090 --> 00:04:56,450
We want to invoke it and then we'll set up the variable we'll say is submitting and that one is going

78
00:04:56,450 --> 00:04:58,130
to be equal to our state.

79
00:04:58,160 --> 00:05:00,110
So navigation state.

80
00:05:01,140 --> 00:05:03,480
And equals to submitting.

81
00:05:03,750 --> 00:05:05,310
Then let's scroll down.

82
00:05:06,480 --> 00:05:08,850
And let's fix the button now.

83
00:05:08,850 --> 00:05:12,120
Eventually we'll do the same thing for Explorer app, but not for now.

84
00:05:12,120 --> 00:05:13,370
Let's not worry about it.

85
00:05:13,380 --> 00:05:15,720
So for now, we just want to go with disabled.

86
00:05:15,750 --> 00:05:19,260
We want to set it equal to is submitting.

87
00:05:19,590 --> 00:05:22,350
And also let's change that text.

88
00:05:22,560 --> 00:05:30,120
Let's say that it's going to be is submitting and we're checking for two possible values and based on

89
00:05:30,120 --> 00:05:37,350
the value we'll either display submitting or we're going to go with submit.

90
00:05:37,500 --> 00:05:38,160
Let's save it.

91
00:05:38,160 --> 00:05:39,650
And now let's test it out.

92
00:05:39,660 --> 00:05:41,610
So this is the awesome.

93
00:05:42,340 --> 00:05:47,050
Time when I don't have to remove any more users from the database.

94
00:05:47,050 --> 00:05:50,470
So this will be my email and password.

95
00:05:51,200 --> 00:05:52,520
Let's submit.

96
00:05:53,450 --> 00:05:55,400
And for some reason.

97
00:05:55,490 --> 00:05:56,280
And you know what?

98
00:05:56,300 --> 00:06:02,150
Yeah, because I did set up everything, but I forgot probably the most important part.

99
00:06:02,180 --> 00:06:05,000
Well, we do need to use the form component.

100
00:06:05,030 --> 00:06:05,700
Correct.

101
00:06:05,720 --> 00:06:10,010
So as you can see, if we don't do that, then nothing works.

102
00:06:10,010 --> 00:06:11,360
So let me go over here.

103
00:06:11,810 --> 00:06:14,510
Remember, method is equal to post.

104
00:06:14,510 --> 00:06:21,050
So essentially for the patch delete post, we want to use method post and then for get requests which

105
00:06:21,080 --> 00:06:24,500
again we'll set up when we have the search functionality.

106
00:06:24,500 --> 00:06:26,170
This is going to be a little bit different.

107
00:06:26,180 --> 00:06:28,550
So again, let me navigate back over here.

108
00:06:28,670 --> 00:06:33,170
Let me submit submitting and now notice login successful.

109
00:06:33,260 --> 00:06:36,680
We nicely navigated to the dashboard.

110
00:06:36,680 --> 00:06:42,560
Now at the moment again, we don't have any authentication in place.

111
00:06:42,710 --> 00:06:46,520
So this is actually something that we're going to set up very, very soon.

112
00:06:47,170 --> 00:06:50,870
What I do want to showcase is the cookie.

113
00:06:50,890 --> 00:06:55,750
So let's navigate to the dev tools applications and check it out.

114
00:06:56,170 --> 00:07:00,610
So the moment we successfully log in, what happens on a server?

115
00:07:00,730 --> 00:07:02,800
Well, we send back the token.

116
00:07:02,800 --> 00:07:03,310
Correct.

117
00:07:03,310 --> 00:07:05,550
And the token is located in where?

118
00:07:05,560 --> 00:07:06,800
In the cookie.

119
00:07:06,820 --> 00:07:10,810
So if I go to application, then more specifically cookies.

120
00:07:10,900 --> 00:07:11,800
Check it out.

121
00:07:11,800 --> 00:07:15,400
I have my token and of course in here I have the value.

122
00:07:15,400 --> 00:07:23,320
And what it means is that in all of the upcoming requests, we're going to send back this cookie to

123
00:07:23,320 --> 00:07:24,430
our server.

124
00:07:24,430 --> 00:07:30,700
And remember in there we have the authentication middleware and in there we'll check whether token is

125
00:07:30,700 --> 00:07:38,950
valid, whether the JWT is valid, grab the user ID and then perform specific functionality, whether

126
00:07:38,950 --> 00:07:46,180
that is to get all the jobs to create a job and rest of the pages we have over here.

127
00:07:46,180 --> 00:07:50,440
So with this in place, we're ready to move on to the next step.