1
00:00:01,770 --> 00:00:03,090
Instructor: In the last section, we wired up

2
00:00:03,090 --> 00:00:06,600
the require off higher order component to our feature route.

3
00:00:06,600 --> 00:00:09,420
It's definitely locking down access to this route right here

4
00:00:09,420 --> 00:00:11,790
and making sure that we are always signed in

5
00:00:11,790 --> 00:00:13,380
before we can visit it.

6
00:00:13,380 --> 00:00:16,140
However, I wanna show you some interesting behavior.

7
00:00:16,140 --> 00:00:17,940
If I'm on the feature route,

8
00:00:17,940 --> 00:00:21,240
as I am right now and I refresh the page

9
00:00:21,240 --> 00:00:23,430
you'll notice I get automatically redirected

10
00:00:23,430 --> 00:00:27,690
back over to the route route instead, like so.

11
00:00:27,690 --> 00:00:28,800
So the issue right here

12
00:00:28,800 --> 00:00:31,800
is that we are not persisting our login state

13
00:00:31,800 --> 00:00:34,740
in between refreshes of our page.

14
00:00:34,740 --> 00:00:36,510
Anytime we refresh the page,

15
00:00:36,510 --> 00:00:38,430
all of our Redux state gets thrown away

16
00:00:38,430 --> 00:00:40,410
and we start back over from scratch

17
00:00:40,410 --> 00:00:42,660
when our application starts back up.

18
00:00:42,660 --> 00:00:45,300
So in other words, the idea of log in

19
00:00:45,300 --> 00:00:46,980
or my authentication state

20
00:00:46,980 --> 00:00:49,563
is not being persisted in any way.

21
00:00:50,430 --> 00:00:52,410
To solve this, we're going to be making use

22
00:00:52,410 --> 00:00:56,130
of a feature of your browser called Local Storage.

23
00:00:56,130 --> 00:00:58,830
Local storage is a tiny little data store

24
00:00:58,830 --> 00:01:01,440
that we have access to inside of our browser,

25
00:01:01,440 --> 00:01:03,060
and it's an ideal place to store

26
00:01:03,060 --> 00:01:05,790
tiny little bits of information.

27
00:01:05,790 --> 00:01:08,040
One thing that we could possibly store inside there

28
00:01:08,040 --> 00:01:10,442
is the JSON web token that we get back

29
00:01:10,442 --> 00:01:15,442
whenever we make our sign up request to our backend api.

30
00:01:15,690 --> 00:01:17,730
So I think that after we make this request

31
00:01:17,730 --> 00:01:19,410
and we get back that token

32
00:01:19,410 --> 00:01:21,570
we can save it to our local state

33
00:01:21,570 --> 00:01:24,360
and then once we have or some local storage,

34
00:01:24,360 --> 00:01:26,550
and then once it's been saved in local storage,

35
00:01:26,550 --> 00:01:28,500
we can fetch it from there anytime

36
00:01:28,500 --> 00:01:30,123
our application starts back up.

37
00:01:31,140 --> 00:01:34,290
Now doing this is gonna be really, really straightforward.

38
00:01:34,290 --> 00:01:36,210
To interact with our local storage,

39
00:01:36,210 --> 00:01:39,698
inside your browser, you can write out local storage

40
00:01:39,698 --> 00:01:42,420
and then you can store something in local storage

41
00:01:42,420 --> 00:01:44,703
by saying dot set item,

42
00:01:46,058 --> 00:01:48,990
passing in a key for this storage value.

43
00:01:48,990 --> 00:01:51,160
So I'll use something like token

44
00:01:52,260 --> 00:01:53,520
and then a second argument

45
00:01:53,520 --> 00:01:55,380
of the data that you want to store.

46
00:01:55,380 --> 00:02:00,380
So maybe my value that I wanna store is my JSON web token.

47
00:02:02,190 --> 00:02:03,940
Now, if I refresh the page

48
00:02:05,010 --> 00:02:07,290
that local storage is still persisted,

49
00:02:07,290 --> 00:02:08,763
so it does not go away.

50
00:02:09,720 --> 00:02:10,680
Inside my console,

51
00:02:10,680 --> 00:02:13,160
I can now do a localStorage.getItem

52
00:02:15,300 --> 00:02:17,550
and I will get token,

53
00:02:17,550 --> 00:02:20,970
which is what I just stored my JSON web token as.

54
00:02:20,970 --> 00:02:23,283
And that returns my JSON web token.

55
00:02:24,210 --> 00:02:27,420
So all we have to do is, a setItem after we get our token

56
00:02:27,420 --> 00:02:29,040
and then when our application boots back up

57
00:02:29,040 --> 00:02:31,833
we'll do a getItem to get that stored token.

58
00:02:33,030 --> 00:02:35,280
All right, so back inside my action creator.

59
00:02:35,280 --> 00:02:37,380
After we dispatch our action,

60
00:02:37,380 --> 00:02:39,860
I will add localStorage.setItem

61
00:02:41,688 --> 00:02:44,490
and I'll store an item called token

62
00:02:44,490 --> 00:02:46,500
and that will be whatever we just got back

63
00:02:46,500 --> 00:02:48,693
from response.data.token,

64
00:02:50,760 --> 00:02:51,593
like so.

65
00:02:53,490 --> 00:02:54,630
So this right here is gonna make sure

66
00:02:54,630 --> 00:02:56,670
that we store our token.

67
00:02:56,670 --> 00:02:58,890
Now we have to make sure that when our application boots up,

68
00:02:58,890 --> 00:03:02,133
we try to fetch it and put it into our Redux state.

69
00:03:03,270 --> 00:03:07,200
For that, I'll open up my route index.js file.

70
00:03:07,200 --> 00:03:10,380
So remember, we use this kind of initial state

71
00:03:10,380 --> 00:03:13,350
object right here earlier on inside the course.

72
00:03:13,350 --> 00:03:15,330
We can use this initial state object

73
00:03:15,330 --> 00:03:18,183
to get some starting state inside of our Redux store.

74
00:03:20,250 --> 00:03:23,220
So I'm going to expand this object right here,

75
00:03:23,220 --> 00:03:25,410
and then I'm gonna pass to it,

76
00:03:25,410 --> 00:03:29,550
the key of our off piece of state, which is off.

77
00:03:29,550 --> 00:03:31,980
And then the value that we want to initialize

78
00:03:31,980 --> 00:03:34,020
when we create our Redux store,

79
00:03:34,020 --> 00:03:36,690
which is authenticated.

80
00:03:36,690 --> 00:03:39,900
And I'm gonna say I want to assign to that property

81
00:03:39,900 --> 00:03:42,400
whatever I get from localStorage.getItem('token').

82
00:03:46,830 --> 00:03:48,240
Now I'm gonna save this file

83
00:03:48,240 --> 00:03:50,400
and when I do my code is gonna jump just a little bit

84
00:03:50,400 --> 00:03:52,530
thanks to my code formatter.

85
00:03:52,530 --> 00:03:54,130
And that's what we're left with.

86
00:03:56,566 --> 00:03:58,590
So now anytime our application starts up

87
00:03:58,590 --> 00:04:00,630
we're gonna check to see if we have a stored token

88
00:04:00,630 --> 00:04:03,390
and if we do, we'll start up the Redux state

89
00:04:03,390 --> 00:04:07,233
with that token as our off.authenticated property.

90
00:04:08,100 --> 00:04:11,460
So now we should be able to go back over to our application.

91
00:04:11,460 --> 00:04:12,813
I'll refresh the page,

92
00:04:17,220 --> 00:04:19,670
I'll go through this signup process one more time

93
00:04:20,550 --> 00:04:22,953
and I'll put in some random email here.

94
00:04:25,890 --> 00:04:27,480
And now I've stored in theory

95
00:04:27,480 --> 00:04:30,660
that JSON web token on my local storage.

96
00:04:30,660 --> 00:04:32,700
So if I now refresh the page

97
00:04:32,700 --> 00:04:36,540
I should still be able to see the slash feature route.

98
00:04:36,540 --> 00:04:37,803
I'll refresh the page,

99
00:04:40,200 --> 00:04:42,210
then our Redux app boots back up.

100
00:04:42,210 --> 00:04:44,550
It pulls that value out of local storage

101
00:04:44,550 --> 00:04:47,670
and I am still considered to be logged into our application.

102
00:04:47,670 --> 00:04:50,362
Awesome. Okay, so this is definitely coming along.

103
00:04:50,362 --> 00:04:53,643
Let's take a quick pause and continue in the next section.