1
00:00:07,680 --> 00:00:08,820
Welcome back.

2
00:00:08,850 --> 00:00:16,740
Let's finish up with the token based authentication by implementing what is called saving the token

3
00:00:16,740 --> 00:00:20,400
into the user's browser low cost storage.

4
00:00:20,580 --> 00:00:28,110
So like I said, if you want to go by this kind of authentication for this applications, unless we

5
00:00:28,110 --> 00:00:34,670
write a few lines of JavaScript, that is a client side JavaScript to talk to the API.

6
00:00:34,680 --> 00:00:37,380
So let's see how you're going to get this one done.

7
00:00:37,770 --> 00:00:38,190
Good.

8
00:00:38,220 --> 00:00:42,430
So the whole logic is that you want to save the token into the user's browser.

9
00:00:42,480 --> 00:00:50,100
So back to the project, because for this kind of a HTML template, we need to create JavaScript file

10
00:00:50,100 --> 00:00:51,780
to make the request to it.

11
00:00:51,840 --> 00:01:00,120
So inside the public, let's create one for the core JavaScript and then the file is going to be client

12
00:01:00,540 --> 00:01:02,930
client DOD's JavaScript.

13
00:01:02,940 --> 00:01:04,290
It can be anything.

14
00:01:04,319 --> 00:01:12,240
So what I'm going to do is that I want to make the requests for this client side, and then when I get

15
00:01:12,240 --> 00:01:17,120
the response, I'm going to save the token into the local storage.

16
00:01:17,130 --> 00:01:21,750
So instead of just doing BI this way, we are going by this.

17
00:01:21,870 --> 00:01:27,450
So first of all, I need to select the input and then the form.

18
00:01:27,450 --> 00:01:29,640
So here let's look at the.

19
00:01:30,440 --> 00:01:32,300
IDs they are using.

20
00:01:32,300 --> 00:01:38,150
There is no ID here, so let's provide ID for the log in.

21
00:01:38,150 --> 00:01:50,240
Ask ID is going to be the username and then for the password is going to be also us pass word and then

22
00:01:50,240 --> 00:01:51,560
for selectors.

23
00:01:51,560 --> 00:01:57,770
Let me paste it here to make our life easier because this is not JavaScript.

24
00:01:57,950 --> 00:01:59,930
Well, this is about domain depletion.

25
00:01:59,930 --> 00:02:00,130
Yeah.

26
00:02:00,140 --> 00:02:04,550
Because for this one too we have covered in details in JavaScript section.

27
00:02:04,550 --> 00:02:09,590
So here I have selected the form and then the input I want to interact with.

28
00:02:09,740 --> 00:02:15,110
So here what I'm going to do is that I'm going to take the form on that.

29
00:02:15,110 --> 00:02:21,380
I will add event lists none and the action or the event is going to be submit.

30
00:02:21,380 --> 00:02:29,720
Then I will pass in async function here because we want to talk to our server which might need some

31
00:02:29,720 --> 00:02:31,220
time to complete.

32
00:02:31,220 --> 00:02:38,360
So here for this async then going to be a function and I have access to the event type.

33
00:02:38,360 --> 00:02:46,400
And here let me prevent the default browser prevents default browser.

34
00:02:46,430 --> 00:02:54,470
So here we go e dot prevent default and I can use the built in fetch at HTTP client, but I like to

35
00:02:54,470 --> 00:02:56,840
use Axios because it's simple to use.

36
00:02:56,840 --> 00:03:00,200
So let's go to Google and search for Axios.

37
00:03:00,200 --> 00:03:07,970
And down here we have the get her page and then let's click on that and go to the GitHub page.

38
00:03:07,970 --> 00:03:16,250
I want to use the seed and if you scroll down here, we have the seed and so let's use this copy this

39
00:03:16,250 --> 00:03:16,820
one.

40
00:03:16,820 --> 00:03:17,870
That's what I mean.

41
00:03:17,870 --> 00:03:21,440
I'll copy it and back to my login.

42
00:03:21,440 --> 00:03:28,820
I'm going to paste it down here that is before my body and that is I have access to the Axios inside

43
00:03:28,820 --> 00:03:29,570
my code.

44
00:03:29,570 --> 00:03:31,790
So here we go.

45
00:03:31,880 --> 00:03:35,330
So here we are going to make the request to our API.

46
00:03:35,360 --> 00:03:39,200
So accounts I'm going to get the response coming back.

47
00:03:39,830 --> 00:03:41,030
Response.

48
00:03:42,060 --> 00:03:46,290
Is equal to weight exhausted.

49
00:03:46,950 --> 00:03:53,520
And then on that, we are going to make post requests that are passing the end endpoint, which is log

50
00:03:53,520 --> 00:04:01,680
in, they say as this so so we are making the request in this way like action and method inside the

51
00:04:01,680 --> 00:04:02,970
client side.

52
00:04:03,240 --> 00:04:10,500
So the next argument is going to be the payload and we can get that one from the user name and then

53
00:04:10,500 --> 00:04:14,610
going to be the user name dot value.

54
00:04:17,079 --> 00:04:18,160
And.

55
00:04:19,149 --> 00:04:20,380
The password.

56
00:04:20,589 --> 00:04:21,250
Sorry.

57
00:04:22,890 --> 00:04:25,770
And the password is going to be.

58
00:04:26,700 --> 00:04:34,080
I's password, dot value, and then the response we get back.

59
00:04:34,080 --> 00:04:37,820
We can handle the errors, we can put them in, try and catch.

60
00:04:37,830 --> 00:04:40,380
But for the meantime, let's just make it very simple.

61
00:04:40,560 --> 00:04:45,600
So what comes back if there is?

62
00:04:46,630 --> 00:04:51,580
On various points if there is data dot status.

63
00:04:52,520 --> 00:04:55,280
And if it's equal to success.

64
00:04:56,410 --> 00:05:00,550
So let's see the endpoint for the logging in.

65
00:05:00,880 --> 00:05:07,600
So let's go to the server file and let's locate the log in, which is this.

66
00:05:07,900 --> 00:05:13,180
If everything goes on well, we are returning.

67
00:05:13,300 --> 00:05:19,840
We can give this one a status so that we can check inside the.

68
00:05:21,820 --> 00:05:27,160
Status is equal to suck six.

69
00:05:27,370 --> 00:05:27,820
All right.

70
00:05:27,820 --> 00:05:28,900
So let's check on that.

71
00:05:28,900 --> 00:05:31,240
Meaning that everything went well.

72
00:05:31,480 --> 00:05:32,650
So you're going to be six.

73
00:05:32,650 --> 00:05:33,310
Six.

74
00:05:33,760 --> 00:05:34,030
All right.

75
00:05:34,030 --> 00:05:40,840
In that case, we know that everything is correct or else we can say that.

76
00:05:41,230 --> 00:05:44,020
So we can elect and say that.

77
00:05:44,020 --> 00:05:44,920
Sorry.

78
00:05:45,730 --> 00:05:46,990
Try again.

79
00:05:49,710 --> 00:05:57,570
So here we have access to the entire user, which is sorry, which is this object.

80
00:05:57,660 --> 00:06:00,150
The user full name, the token everything.

81
00:06:00,150 --> 00:06:01,250
And that's what we want.

82
00:06:01,260 --> 00:06:03,090
So back to the client.

83
00:06:03,120 --> 00:06:09,120
Let's console.log the response for the meantime and let's see.

84
00:06:09,120 --> 00:06:13,350
So here before we continue guys, I made a mistake here.

85
00:06:13,350 --> 00:06:17,010
How we pass in the middle where call is logging.

86
00:06:17,040 --> 00:06:19,380
You know this how we did it.

87
00:06:19,410 --> 00:06:23,490
We pass into app dot use and then it's logging.

88
00:06:23,490 --> 00:06:28,590
So this means that it's going to apply to any but for any rock that you want to protect you need to

89
00:06:28,590 --> 00:06:33,390
pass in its log in, which is the profile as we did before.

90
00:06:33,390 --> 00:06:35,700
So we're passing here as is logging.

91
00:06:35,880 --> 00:06:37,830
And this one, I'm from the previous video.

92
00:06:37,860 --> 00:06:38,400
All right.

93
00:06:38,400 --> 00:06:42,060
So now let's go ahead and try this implementation.

94
00:06:42,540 --> 00:06:42,870
All right.

95
00:06:42,870 --> 00:06:50,790
So let's go to log in and let's open our console here and open that and let's check if we are going

96
00:06:50,790 --> 00:06:52,350
to get the log in.

97
00:06:52,590 --> 00:06:58,500
So here really, is it lazy or really lazy?

98
00:06:58,500 --> 00:07:00,450
And one, two, three, four, five.

99
00:07:00,450 --> 00:07:01,500
And let's hit send.

100
00:07:02,310 --> 00:07:08,220
Well, you see that I got back this response as that.

101
00:07:08,730 --> 00:07:14,970
But for some reasons our endpoint is not working well.

102
00:07:15,450 --> 00:07:18,600
I need to change because this one is being called.

103
00:07:18,600 --> 00:07:24,420
So I remove this one from here to make the request, but instead I want to use this one to make the

104
00:07:24,420 --> 00:07:25,110
request.

105
00:07:25,410 --> 00:07:26,310
Do you get it?

106
00:07:26,490 --> 00:07:28,050
Yes, I get it.

107
00:07:28,080 --> 00:07:36,060
So now again, let's refresh it and we're going to be busy and one, two, three, four, five and hit

108
00:07:36,060 --> 00:07:36,570
send.

109
00:07:37,110 --> 00:07:45,990
Well, for some reason we see that our browser got refreshed and we have the data here and let's check

110
00:07:45,990 --> 00:07:50,190
the terminal and see if something goes wrong.

111
00:07:50,670 --> 00:07:52,320
Well, nothing goes wrong.

112
00:07:52,320 --> 00:07:53,970
So why is it so?

113
00:07:54,420 --> 00:08:01,350
So next step is let's try to console.log or elect.

114
00:08:02,300 --> 00:08:05,360
To make sure that the file is working.

115
00:08:05,360 --> 00:08:10,400
Oh, sorry, guys, I need to require this JavaScript.

116
00:08:10,400 --> 00:08:11,170
Sorry.

117
00:08:11,180 --> 00:08:13,430
So inside my log in.

118
00:08:13,520 --> 00:08:20,660
Well, after the Axios package, let's require our JavaScript file.

119
00:08:20,750 --> 00:08:22,070
Sorry, guys.

120
00:08:22,080 --> 00:08:30,010
It's going to be dot, dot, slash public and then JavaScript and you have client dot JavaScript.

121
00:08:30,020 --> 00:08:31,490
So here we go.

122
00:08:31,610 --> 00:08:40,159
Let us go home and then click on log in and let's log in lazy and one, two, three, four, five and

123
00:08:40,159 --> 00:08:40,820
let's see.

124
00:08:41,360 --> 00:08:44,810
And you can see that this is crazy.

125
00:08:44,810 --> 00:08:51,320
We get back there response inside our browser and we have the token here.

126
00:08:51,320 --> 00:08:57,830
So now I can go ahead and then save this token into local storage.

127
00:08:57,830 --> 00:09:00,800
How awesome it is.

128
00:09:00,800 --> 00:09:02,840
So here we go.

129
00:09:03,050 --> 00:09:13,430
Now let's have a beautiful comments that save the token into looker storage.

130
00:09:13,430 --> 00:09:19,920
Guys, if we want to master main stack this kind of authentication we need to be familiar with.

131
00:09:19,940 --> 00:09:28,010
So here look at storage dot set item and then I want to provide a property called Token.

132
00:09:28,160 --> 00:09:35,390
And then on the response we have the data and on that we have the token from the API.

133
00:09:35,600 --> 00:09:40,670
If you check here, see that we have the response data, the token.

134
00:09:40,670 --> 00:09:49,340
So now let's open our application and go to local storage and we see that and I look at storage and

135
00:09:49,340 --> 00:09:50,600
click on the URL.

136
00:09:50,630 --> 00:09:55,190
There is no value here, but as soon as I hit send, have a look.

137
00:09:55,490 --> 00:10:01,970
Well, let's see the console again where it couldn't save into local storage.

138
00:10:01,970 --> 00:10:04,340
Why is it so?

139
00:10:05,490 --> 00:10:09,450
Well, let's refresh it and see again.

140
00:10:09,450 --> 00:10:13,890
Maybe we are not passing in the right data.

141
00:10:14,550 --> 00:10:15,040
Right.

142
00:10:15,060 --> 00:10:16,320
Okay, let's try again.

143
00:10:17,150 --> 00:10:19,530
Lizzie one, two, three, four, five.

144
00:10:19,530 --> 00:10:20,660
And let's send.

145
00:10:21,780 --> 00:10:22,390
Wow.

146
00:10:22,410 --> 00:10:25,470
Even though you go back again, there is no response.

147
00:10:25,500 --> 00:10:26,640
Maybe it's taking some time.

148
00:10:26,640 --> 00:10:29,760
Let's wait because we are talking to database, right?

149
00:10:30,600 --> 00:10:34,390
So let's have some patience and see.

150
00:10:34,410 --> 00:10:41,280
Well, Verrastro, there is no response because I am not console anything inside here.

151
00:10:41,610 --> 00:10:46,260
So let's try to console.log the response.

152
00:10:47,800 --> 00:10:51,070
DART data and let's see.

153
00:10:51,760 --> 00:10:53,260
So here we go.

154
00:10:53,260 --> 00:11:03,930
Refresh it and Lee Z and going to be one, two, three, four, five and send and I go back so I want

155
00:11:03,940 --> 00:11:04,770
it took in.

156
00:11:05,140 --> 00:11:08,400
So here is going to be dot token.

157
00:11:08,410 --> 00:11:11,950
Let's see if I'm going to get it token send.

158
00:11:13,300 --> 00:11:14,350
Again.

159
00:11:14,750 --> 00:11:16,840
Well, okay, let's refresh it.

160
00:11:16,990 --> 00:11:18,640
So let's look again.

161
00:11:18,640 --> 00:11:25,080
Lazy and one, two, three, four, five and click on log in and we have the token.

162
00:11:25,090 --> 00:11:31,200
Let's go to application and we have the token and that is it.

163
00:11:31,210 --> 00:11:36,750
So with this implementation, we are done with the entire flow.

164
00:11:36,760 --> 00:11:43,690
If we want to look at our hot thing to do is to implement client side JavaScript where we are going

165
00:11:43,690 --> 00:11:46,720
to clear the token from local storage.

166
00:11:46,930 --> 00:11:53,230
So like I said, if you want to go by this to develop such application like this one, unless we write

167
00:11:53,230 --> 00:11:59,560
custom JavaScript to get it done, so we are going to reserve this kind of authentication system if

168
00:11:59,560 --> 00:12:01,120
you get back to react.

169
00:12:01,210 --> 00:12:08,020
But this is a basic flow irrespective of the framework we are going to use, whether view, Angular

170
00:12:08,020 --> 00:12:09,190
or react.

171
00:12:09,190 --> 00:12:14,200
The concept of JSON web token must be required.

172
00:12:14,200 --> 00:12:16,030
We need to be familiar with.

173
00:12:16,180 --> 00:12:18,670
So if you have any problem, don't worry.

174
00:12:18,670 --> 00:12:21,040
Ask questions and practice.

175
00:12:21,040 --> 00:12:29,890
We then being said here ends the entire authentication system from low level to encryption to cookies

176
00:12:29,890 --> 00:12:35,650
to session to session with database and to JSON web token.

177
00:12:35,680 --> 00:12:36,700
The next video.

178
00:12:36,700 --> 00:12:38,740
Let's see what we can do.