1
00:00:00,360 --> 00:00:00,710
Okay.

2
00:00:00,720 --> 00:00:06,840
And the next feature I want to add to our app is the HTTP only cookie.

3
00:00:07,939 --> 00:00:16,700
You see at the moment we send back JWT with our JSON response and on the front end we store it in the

4
00:00:16,700 --> 00:00:19,280
state and the local storage.

5
00:00:19,520 --> 00:00:28,340
And while overall it's a valid authentication approach, since local storage can be accessed with the

6
00:00:28,340 --> 00:00:31,730
JavaScript, there are some security concerns.

7
00:00:31,970 --> 00:00:33,140
What's the solution?

8
00:00:33,140 --> 00:00:41,930
Well, instead of JSON response, we will send our token with HTTP only cookie, which can be accessed

9
00:00:41,930 --> 00:00:45,290
only by the browser and not the JavaScript.

10
00:00:45,740 --> 00:00:53,150
Additionally, we won't need to worry about storing the token in the state or local storage since the

11
00:00:53,150 --> 00:00:55,880
browser will automatically send it back.

12
00:00:56,270 --> 00:01:01,100
Essentially, cookies also simplify the front end setup.

13
00:01:01,960 --> 00:01:04,980
And if this sounds somewhat confusing, don't worry.

14
00:01:04,989 --> 00:01:08,170
You'll see once we start working on the feature.

15
00:01:08,830 --> 00:01:12,940
Before I show you the end result, let me mention a few important things.

16
00:01:12,940 --> 00:01:19,750
First, since we're adding this feature later, please be prepared to refactor your code.

17
00:01:20,140 --> 00:01:22,540
I know some people don't like refactoring.

18
00:01:23,670 --> 00:01:24,600
I hear you.

19
00:01:24,690 --> 00:01:27,660
But unfortunately, there's nothing I can do about it.

20
00:01:28,020 --> 00:01:33,690
In my opinion, it's important that you are aware of both approaches, local storage and the cooking.

21
00:01:33,690 --> 00:01:40,260
And therefore first we worked on the local storage option and now we refactor it to cookies.

22
00:01:40,710 --> 00:01:42,690
Please don't rush through the videos.

23
00:01:42,990 --> 00:01:51,690
There are quite a few small changes we need to make and it's easy to make a typo and as a result you'll

24
00:01:51,690 --> 00:01:57,470
get a hard to find bug, especially again if you're rushing through the content.

25
00:01:57,480 --> 00:02:05,730
So my suggestion is to check a few times before adding the code and especially especially before removing

26
00:02:05,730 --> 00:02:06,360
the code.

27
00:02:06,570 --> 00:02:11,550
Lastly, cookies are sent back only to the same domain by default.

28
00:02:11,730 --> 00:02:12,750
So remember.

29
00:02:13,660 --> 00:02:16,240
When we set up the proxy in the client.

30
00:02:16,810 --> 00:02:18,670
This sucker over here.

31
00:02:19,410 --> 00:02:26,430
Essentially, we just made sure that both of our applications, the front end one and the server are

32
00:02:26,430 --> 00:02:27,540
on the same domain.

33
00:02:28,290 --> 00:02:33,660
And therefore, remember, we could just use the forward slash in the front end and also on the server.

34
00:02:33,660 --> 00:02:36,900
We didn't have to use the course library.

35
00:02:37,500 --> 00:02:39,210
So the same works with cookies.

36
00:02:39,210 --> 00:02:43,960
By default, they are sent back only to the same domain.

37
00:02:43,980 --> 00:02:48,330
What that means in our setup, they will work right out of the gate.

38
00:02:49,070 --> 00:02:51,920
In the dev setup now in production.

39
00:02:51,920 --> 00:02:56,810
The reason why they are going to work is because we have expressed static.

40
00:02:57,020 --> 00:03:05,180
We grab the client production or the application and we set it up as our static assets.

41
00:03:05,210 --> 00:03:07,070
Again, they will work.

42
00:03:08,010 --> 00:03:09,060
In production.

43
00:03:09,060 --> 00:03:13,260
And if you're wondering, okay, but when is this setup not going to work?

44
00:03:13,500 --> 00:03:21,480
Well, it's not going to work if the client is deployed on a separate server.

45
00:03:22,960 --> 00:03:31,150
So if the client is on one server and then the server server, meaning our server over here is on the

46
00:03:31,150 --> 00:03:34,960
different server, then by default they're not going to work.

47
00:03:34,990 --> 00:03:38,590
You'll have to do some acrobatics and just to showcase that.

48
00:03:39,730 --> 00:03:42,640
I'm going to show you the code that I use for Phi.

49
00:03:42,670 --> 00:03:48,820
Please keep in mind, if you're using different service, most likely your code is going to be a little

50
00:03:48,820 --> 00:03:49,540
bit different.

51
00:03:49,840 --> 00:03:56,890
So if you navigate to the source and I mean, of course, that is in the complete application.

52
00:03:57,160 --> 00:04:04,090
So if you navigate here to the redirect, which you'll notice is the forward slash API four slash star.

53
00:04:04,360 --> 00:04:09,370
Remember how all our URLs start with API version one, blah blah blah, blah blah.

54
00:04:09,400 --> 00:04:09,940
Correct.

55
00:04:10,240 --> 00:04:13,480
So here's what I'm doing on Amplify and basically say.

56
00:04:14,360 --> 00:04:19,880
All the requests that are going to go to four slash API four slash star.

57
00:04:19,940 --> 00:04:25,370
So anything after that are actually going to go to my render server.

58
00:04:25,640 --> 00:04:31,430
And as a result, I'm actually able to get those cookies from the.

59
00:04:32,240 --> 00:04:33,620
Application that's on the lender.

60
00:04:33,620 --> 00:04:35,930
Again, it's not going to happen by default.

61
00:04:35,930 --> 00:04:39,980
And the reason why I'm spending so much time on this is because.

62
00:04:40,730 --> 00:04:44,210
I get a lot of questions on this in my courses.

63
00:04:44,210 --> 00:04:48,080
People are like, Hey, you showed us the cookies, but why they don't work?

64
00:04:48,260 --> 00:04:52,900
They will only work if both of them are on the same server.

65
00:04:52,910 --> 00:04:55,520
And effectively, you can think of this as a hack.

66
00:04:55,730 --> 00:04:57,290
I mean, it's not really a hack.

67
00:04:57,290 --> 00:05:01,600
It's a redirect that you can set up with in this case nullify.

68
00:05:01,610 --> 00:05:03,410
But in general, this is what you'll have to do.

69
00:05:03,440 --> 00:05:05,570
Be prepared to do some acrobatics.

70
00:05:05,570 --> 00:05:12,590
If the applications are on a separate servers by default, they will work only if they're on the same

71
00:05:12,590 --> 00:05:13,100
server.

72
00:05:13,130 --> 00:05:14,630
Hopefully that is clear.

73
00:05:14,640 --> 00:05:17,750
And so now let me show you the end result.

74
00:05:18,350 --> 00:05:22,350
So at the moment I'm sitting in my production application.

75
00:05:22,370 --> 00:05:25,550
Notice I'm on the landing page and everything is great.

76
00:05:25,790 --> 00:05:27,350
And if I take a look at the.

77
00:05:28,250 --> 00:05:29,340
Application time.

78
00:05:29,360 --> 00:05:33,170
I can clearly see that I have nothing in the local storage, nothing.

79
00:05:33,170 --> 00:05:33,740
Zero.

80
00:05:34,130 --> 00:05:38,570
And also I open up the cookies because this is where we will see the interesting info.

81
00:05:38,660 --> 00:05:41,960
And if I'm going to go to login and I'm going to.

82
00:05:42,710 --> 00:05:45,530
Provide my credentials.

83
00:05:46,870 --> 00:05:54,280
You'll say something really cool where, yes, the logging was successful, but again, we're not storing

84
00:05:54,280 --> 00:05:58,930
anything in a local storage, so local storage is clean.

85
00:05:59,290 --> 00:06:00,310
There's nothing there.

86
00:06:00,460 --> 00:06:08,230
And also, if you take a look at the components and the state, you'll notice that I'm not storing a

87
00:06:08,230 --> 00:06:10,870
token over there and everything works.

88
00:06:11,350 --> 00:06:15,790
So even if I refresh, I still get the data about the user.

89
00:06:16,530 --> 00:06:19,590
And again, nothing is stored in the local storage.

90
00:06:19,620 --> 00:06:20,970
So how everything works?

91
00:06:20,970 --> 00:06:23,400
Well, if we take a look at the cookies.

92
00:06:24,210 --> 00:06:31,560
Notice this is where we have the token and this is HTTP only cookie, which means, again, it can be

93
00:06:31,560 --> 00:06:33,690
only accessed by the browser.

94
00:06:34,230 --> 00:06:39,780
And we also have the secure flag, which means that it's only going to work with a ship.

95
00:06:39,810 --> 00:06:40,320
Yes.

96
00:06:40,770 --> 00:06:43,270
And some exploration and all that cool stuff.

97
00:06:43,290 --> 00:06:49,230
And you can try any of these routes and you'll see that everything still works without storing anything

98
00:06:49,230 --> 00:06:50,820
in the local storage.

99
00:06:50,850 --> 00:06:56,130
So now that we are aware of what we are trying to build, let's proceed.