1
00:00:00,330 --> 00:00:01,380
Not bad, not bad.

2
00:00:01,410 --> 00:00:05,070
We signed a token, sent it back to the Fronton now.

3
00:00:05,820 --> 00:00:11,960
Well, first we need to understand how the request with the token already present is going to look like.

4
00:00:12,450 --> 00:00:14,910
But before we continue, let me just emphasize something.

5
00:00:15,390 --> 00:00:23,400
Since it's a back end course, we're not going to dwell too much on do's and don'ts on the proper JWT

6
00:00:23,400 --> 00:00:24,950
storage on the front.

7
00:00:25,520 --> 00:00:27,870
Yes, of course, there are best practices.

8
00:00:28,170 --> 00:00:30,270
And don't get me wrong, they are important.

9
00:00:30,660 --> 00:00:35,070
But our current goal is to secure resource access on the server.

10
00:00:35,490 --> 00:00:42,090
And therefore we're only really interested in how the request is going to look like so we can implement

11
00:00:42,090 --> 00:00:44,660
the correct functionality on our end.

12
00:00:44,970 --> 00:00:50,150
And if you keep reading the introduction, you'll see that a common approach on the front end is to

13
00:00:50,160 --> 00:00:54,600
set up the authorization header in your request.

14
00:00:54,810 --> 00:01:00,210
So of course in is that is going to be a request and then the bare schema.

15
00:01:00,570 --> 00:01:05,970
And essentially what that means is that we have the header by the name of authorization.

16
00:01:06,370 --> 00:01:12,660
Then we go with Barer and then space and then the token and this video, I'll show you how it looks

17
00:01:12,660 --> 00:01:15,810
like on a front end as well as the front end code.

18
00:01:16,020 --> 00:01:19,680
And then the next video, we'll do it together in a postman.

19
00:01:20,500 --> 00:01:25,510
And basically, the area is falling where I have the username, password and all that, and I just go

20
00:01:25,510 --> 00:01:29,170
here with Peter and then I pass in my secret.

21
00:01:29,530 --> 00:01:35,860
And what I want you to see is the local storage, because, of course, at the moment we have nothing

22
00:01:35,860 --> 00:01:36,190
in there.

23
00:01:36,670 --> 00:01:42,730
And the idea is following where I will get back to talking because, of course, I'm providing some

24
00:01:42,730 --> 00:01:45,340
kind of value in the username as well as the password.

25
00:01:45,580 --> 00:01:47,200
And now check it out here.

26
00:01:47,200 --> 00:01:48,210
I have the token.

27
00:01:48,610 --> 00:01:52,160
So now, of course, when I'm making that next request.

28
00:01:52,180 --> 00:01:57,730
So if I go here, would get data, of course, in my code, I just grabbed the token from the local

29
00:01:57,730 --> 00:01:58,240
storage.

30
00:01:58,400 --> 00:02:00,040
And of course, I'm successful.

31
00:02:00,400 --> 00:02:06,280
And if we take a look at the network request, so again, this is going to be for the login process

32
00:02:06,280 --> 00:02:08,139
to get the token amount.

33
00:02:08,139 --> 00:02:12,760
Of course, as far as the dashboard, we just open it over here and notice the headers.

34
00:02:13,090 --> 00:02:17,020
So we keep on scrolling the request headers, blah, blah, blah.

35
00:02:17,230 --> 00:02:21,190
And what we're looking for, of course, is this authorization one.

36
00:02:21,430 --> 00:02:22,800
So that's the one that we want.

37
00:02:22,810 --> 00:02:25,660
We have authorization, then we have the bear.

38
00:02:25,960 --> 00:02:28,480
And then of course, we have the token.

39
00:02:28,900 --> 00:02:33,880
And if you're interested in the code, just navigate the browser objects.

40
00:02:34,240 --> 00:02:39,370
And first, what you want to do is to look for the form event listener.

41
00:02:39,550 --> 00:02:42,010
We're listening for the submit event.

42
00:02:42,370 --> 00:02:48,910
And then in here I have try and catch and in the try and catch, I'm using AXA's library with a post

43
00:02:48,910 --> 00:02:56,020
request and surprise, surprise, I'm sending this post request where to a login one and what am I passing

44
00:02:56,020 --> 00:02:58,360
in passing and username and password.

45
00:02:58,750 --> 00:03:00,760
And what happens if I'm successful.

46
00:03:01,120 --> 00:03:07,390
Not as this line of code would go with local storage, set item, token and then whatever.

47
00:03:07,390 --> 00:03:09,460
I got back from the server.

48
00:03:09,700 --> 00:03:13,180
So I right to save this token in the local storage.

49
00:03:13,480 --> 00:03:18,500
Now there's also a catch and in this instance I just removed the token.

50
00:03:18,520 --> 00:03:21,940
Now again, this is just my preference just so I can demonstrate things.

51
00:03:22,240 --> 00:03:28,870
But hopefully you get the overall idea that of course on the front and you'll store this token somewhere.

52
00:03:29,290 --> 00:03:35,020
And then, of course, when it comes to actual request, I have the button, I have the event listener,

53
00:03:35,230 --> 00:03:41,710
the click event listener, and then I'm issuing a get request because where is it going?

54
00:03:41,980 --> 00:03:43,420
It's going to the dashboard.

55
00:03:43,720 --> 00:03:48,850
And the way we have headers, again, this is just for Axios library, but the idea is going to be exactly

56
00:03:48,850 --> 00:03:54,310
the same for Futch or any other Adric library where you'll go with headers.

57
00:03:54,580 --> 00:03:57,280
And then, of course, the name is authorization.

58
00:03:57,580 --> 00:04:04,330
And then like I said, we go with barer schema and then we have the space and then we pass in a token.

59
00:04:04,330 --> 00:04:08,470
And as you can see, I'm getting this token from the local storage.

60
00:04:08,470 --> 00:04:13,440
And of course, let's take a look how we can send the same request with a postman.