1
00:00:08,160 --> 00:00:09,210
In this video.

2
00:00:09,210 --> 00:00:16,050
Let's continue the implementation to be able to log in from the React side of our application.

3
00:00:16,050 --> 00:00:23,100
So let's go to the app folder and inside the context where we left and that is the of context.

4
00:00:23,190 --> 00:00:29,870
So what we are going to do is that we are going to create a function to be able to log in.

5
00:00:29,880 --> 00:00:36,840
Remember, we are going to do the same thing as we did when we were developing the API.

6
00:00:36,870 --> 00:00:43,950
So if you click on the tender client and then users and then they log in, this is how we are able to

7
00:00:43,950 --> 00:00:46,260
log in using this tool.

8
00:00:46,290 --> 00:00:53,070
So here we have access to the URL and then the HTTP method and then the payload.

9
00:00:53,070 --> 00:00:56,910
We are going to do the same thing from the client side.

10
00:00:56,910 --> 00:00:58,320
So let's see.

11
00:00:58,320 --> 00:01:01,740
So we are going to create a couple of functions here.

12
00:01:01,740 --> 00:01:09,510
So the first one is I'll call this one as log in action and here we go.

13
00:01:09,720 --> 00:01:19,320
I will create a function called log in user action and is equal to normal arrow function.

14
00:01:19,320 --> 00:01:20,880
And here we go.

15
00:01:21,060 --> 00:01:27,300
And since we want to talk to database or a server, we need to handle the promise.

16
00:01:27,300 --> 00:01:34,380
And for this function we are going to accept the payload and that is the the user email and then the

17
00:01:34,380 --> 00:01:35,160
password.

18
00:01:35,490 --> 00:01:39,390
So I'll pass in here as the form data.

19
00:01:39,900 --> 00:01:44,730
It can be anything or you can destructure and say email and then the password.

20
00:01:44,730 --> 00:01:47,190
But let's maintain in this way.

21
00:01:47,190 --> 00:01:55,050
So here, let's bring in our try and catch for try for success and then catch in case we have some error.

22
00:01:55,050 --> 00:01:57,020
So here we go.

23
00:01:57,030 --> 00:01:59,670
How can we talk to a server?

24
00:01:59,700 --> 00:02:00,630
Definitely.

25
00:02:00,630 --> 00:02:07,230
We may need what is called a HTTP client and we have two options whether we should use the built in

26
00:02:07,230 --> 00:02:13,660
HTTP client called fetch or we should use a third party HTTP client called Axios.

27
00:02:13,660 --> 00:02:19,090
But personally I prefer to use Axios, so let's go ahead and then install Axios.

28
00:02:31,620 --> 00:02:34,020
And now Axios is done.

29
00:02:34,020 --> 00:02:37,710
Let's click and then let's restart our server.

30
00:02:38,190 --> 00:02:39,450
That is the react.

31
00:02:39,660 --> 00:02:45,640
The next step is let's require the Axios package from Axios.

32
00:02:45,660 --> 00:02:53,040
So inside the login action we are going to make a request to the backend and here we go.

33
00:02:53,070 --> 00:03:01,320
We bring in the Axios and then the HTTP method is post, which is the same from the tender client.

34
00:03:01,350 --> 00:03:08,180
We provided the HTTP method called post, and next step is that we need the URL.

35
00:03:08,190 --> 00:03:10,830
So we are going to copy this one.

36
00:03:10,830 --> 00:03:17,760
And inside the function call of Axios we are going to pass in the URL.

37
00:03:17,790 --> 00:03:23,640
The next argument is the payload, meaning the data that we want to send for back end.

38
00:03:23,670 --> 00:03:28,920
This is a payload and the same way we are passing in the payload to the function.

39
00:03:28,920 --> 00:03:31,780
So here we pass in the form data here.

40
00:03:32,020 --> 00:03:35,640
The next argument is going to be what is called the headers.

41
00:03:35,650 --> 00:03:40,480
And for this I want to create the header separately and then refer into this.

42
00:03:40,480 --> 00:03:42,130
So what is a header?

43
00:03:42,610 --> 00:03:50,410
A header gives more details or information about the request and we can also send some payload for example.

44
00:03:50,440 --> 00:03:51,120
Token.

45
00:03:51,130 --> 00:03:56,980
If you look at the API, when you try to make a request to fetch your profile, unless you provide what

46
00:03:56,980 --> 00:04:03,160
is called token, and then we add that one inside the header and that is what we are going to do here

47
00:04:03,160 --> 00:04:03,870
also.

48
00:04:03,880 --> 00:04:09,850
So I'm going to create a variable called config and it's equal to object.

49
00:04:09,850 --> 00:04:13,450
And for this I'm going to add a property called headers.

50
00:04:13,480 --> 00:04:16,690
It must be the same as what I'm typing.

51
00:04:16,690 --> 00:04:22,480
Because if you look at the tender client here, we have access to the header inside the tender client

52
00:04:22,480 --> 00:04:23,020
also.

53
00:04:23,020 --> 00:04:33,990
And for this we are going to pass in what is called content type and is equal to quotes, double quotes,

54
00:04:34,020 --> 00:04:35,280
application.

55
00:04:38,030 --> 00:04:39,920
For Slash Jason.

56
00:04:40,250 --> 00:04:41,780
So what does it mean?

57
00:04:41,780 --> 00:04:45,530
That is a content type equal to applications like Jason.

58
00:04:45,620 --> 00:04:54,290
This one tells our server or the request that we are sending a data which is of type Jason But lucky

59
00:04:54,290 --> 00:04:58,670
for us, Express parses any incoming data as Jason.

60
00:04:59,330 --> 00:05:05,720
Then after that, in case we want to send some token, we are going to add additional property that

61
00:05:05,720 --> 00:05:07,390
is called authorization.

62
00:05:07,400 --> 00:05:09,470
But don't worry, we will get this soon.

63
00:05:09,470 --> 00:05:11,720
So let's remove this one from here.

64
00:05:11,720 --> 00:05:19,370
And next is we need to pass to this Axios as a third argument and provide as config.

65
00:05:19,460 --> 00:05:24,980
And now what comes back from this is going to be the response.

66
00:05:24,980 --> 00:05:27,960
So do you remember what comes back from this one?

67
00:05:27,980 --> 00:05:31,250
That is the user, including the token.

68
00:05:31,700 --> 00:05:34,550
If you try to make the request from the back end.

69
00:05:34,580 --> 00:05:36,950
Let me show you here when I click log in.

70
00:05:36,950 --> 00:05:42,400
This is a response and this is what we want to receive inside our application.

71
00:05:42,420 --> 00:05:50,310
Well, I think I have some error here, so let's see what import in body module reorder that is off

72
00:05:50,310 --> 00:05:52,110
context line number two.

73
00:05:52,140 --> 00:05:54,840
So let's see line number two.

74
00:05:55,080 --> 00:05:59,940
Well import Axios from Axios.

75
00:06:00,640 --> 00:06:01,360
Oh, sorry.

76
00:06:01,360 --> 00:06:04,210
This one is supposed to be import.

77
00:06:04,420 --> 00:06:14,530
The import has messed up and from react this kind of import is what you call the common JS and that

78
00:06:14,530 --> 00:06:16,240
is what Node.js uses.

79
00:06:16,300 --> 00:06:17,710
Okay, so now let's see.

80
00:06:17,950 --> 00:06:18,400
All right.

81
00:06:18,400 --> 00:06:19,270
It is happy.

82
00:06:19,360 --> 00:06:19,960
Great.

83
00:06:19,960 --> 00:06:23,950
So the next step is that we need to call this function.

84
00:06:23,950 --> 00:06:29,080
So let's go ahead and console.log error in case you're going to have one.

85
00:06:29,590 --> 00:06:36,910
And then let's also console log the response and see if indeed are going to receive the response inside

86
00:06:36,910 --> 00:06:37,990
our application.

87
00:06:38,260 --> 00:06:43,140
The next step is that I want to call this function inside the login page.

88
00:06:43,150 --> 00:06:44,680
So what should I do?

89
00:06:45,130 --> 00:06:48,280
Because of that, we need to pass to the value.

90
00:06:48,280 --> 00:06:54,010
So here, let's remove this one and let's pass in what is called the login action.

91
00:06:54,340 --> 00:06:56,560
So let's remove this one also.

92
00:06:56,560 --> 00:06:59,340
And now we have login action.

93
00:06:59,350 --> 00:07:05,540
So now, now inside the components of login, I have access to that function.

94
00:07:05,540 --> 00:07:14,240
So here, so I can destructure the function from this, I'm going to be log in user action.

95
00:07:15,770 --> 00:07:20,600
All right, so now how are we going to call the function inside here?

96
00:07:20,930 --> 00:07:21,770
Definitely.

97
00:07:21,770 --> 00:07:28,250
We need to handle the form to be able to take the data from the form and then submit to the server.

98
00:07:28,280 --> 00:07:33,590
Because of that, let's go ahead and then handle form in React in the next video.