Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,070 --> 00:00:04,660
Now I wanna start with updating the UI
2
00:00:04,660 --> 00:00:06,150
but before we can do that,
3
00:00:06,150 --> 00:00:09,130
we got to do whenever important thing.
4
00:00:09,130 --> 00:00:12,360
We have to store this token somewhere
5
00:00:12,360 --> 00:00:15,100
in this running react application
6
00:00:15,100 --> 00:00:18,980
where we can use it from all kinds of components
7
00:00:18,980 --> 00:00:22,800
because at the moment we're logging our response here
8
00:00:22,800 --> 00:00:24,920
in the auth form component,
9
00:00:24,920 --> 00:00:26,470
but that's not the only component
10
00:00:26,470 --> 00:00:28,530
we're interested in this data.
11
00:00:28,530 --> 00:00:31,690
Instead, we'll need it in the header here
12
00:00:31,690 --> 00:00:36,090
to update the menu items, which are presented to us.
13
00:00:36,090 --> 00:00:37,390
And we'll probably need it
14
00:00:37,390 --> 00:00:40,520
in other places off this app as well.
15
00:00:40,520 --> 00:00:44,520
So this token should be some app white state
16
00:00:44,520 --> 00:00:47,940
because it matters to a lot of different components.
17
00:00:47,940 --> 00:00:52,240
And the general information that the user is logged in
18
00:00:52,240 --> 00:00:54,503
matters to a lot of components.
19
00:00:55,360 --> 00:00:59,110
Now, you learned that for managing app white state
20
00:00:59,110 --> 00:01:04,110
you got two main options, the context API or Redux.
21
00:01:05,030 --> 00:01:07,840
It's up to you, which of the two options you prefer.
22
00:01:07,840 --> 00:01:11,410
I do explain the differences in the Redux section
23
00:01:11,410 --> 00:01:13,720
in case you wanna dive into that again,
24
00:01:13,720 --> 00:01:16,400
here I'll use the context API
25
00:01:16,400 --> 00:01:18,170
so that we don't have to install
26
00:01:18,170 --> 00:01:20,500
an extra third party package.
27
00:01:20,500 --> 00:01:23,740
The authentication state is also not a state
28
00:01:23,740 --> 00:01:26,030
that will change very frequently.
29
00:01:26,030 --> 00:01:29,053
So we all just shouldn't have any performance issues here.
30
00:01:30,110 --> 00:01:32,260
And therefore, I'll add a new folder,
31
00:01:32,260 --> 00:01:35,610
a store folder in that source folder
32
00:01:35,610 --> 00:01:40,430
which will hold the context code, which we're going to add.
33
00:01:40,430 --> 00:01:43,930
And in there we can add up AuthContext JS file
34
00:01:43,930 --> 00:01:45,950
where I wanna set up and manage
35
00:01:45,950 --> 00:01:49,890
this context for this authentication data.
36
00:01:49,890 --> 00:01:54,850
Now here, I'll add my AuthContext in general
37
00:01:54,850 --> 00:01:56,703
by calling React.createContext.
38
00:01:58,040 --> 00:02:02,720
And for this, we should import react from react here
39
00:02:04,020 --> 00:02:07,230
and then initialize as context with some initial data
40
00:02:07,230 --> 00:02:09,280
which I mainly set here
41
00:02:09,280 --> 00:02:13,270
so that we define the general shape of our context
42
00:02:13,270 --> 00:02:16,560
and get better auto-completion later.
43
00:02:16,560 --> 00:02:19,890
And here I wanna store, let's say the token,
44
00:02:19,890 --> 00:02:22,470
which initially is an empty string.
45
00:02:22,470 --> 00:02:27,470
I wanna store the is logged in information in general.
46
00:02:28,670 --> 00:02:31,580
For that we could simply check if we have a token or not
47
00:02:31,580 --> 00:02:35,140
but I wanna use a shortcut here and have a Boolean here
48
00:02:35,140 --> 00:02:38,910
which is true or false telling us whether the current user
49
00:02:38,910 --> 00:02:41,500
of this website is logged in or not,
50
00:02:41,500 --> 00:02:45,133
and out of the box, the user is not logged in.
51
00:02:46,380 --> 00:02:48,090
And then we can add functions
52
00:02:48,090 --> 00:02:51,580
that allow us to change that state.
53
00:02:51,580 --> 00:02:54,600
For example, we can add a login function
54
00:02:54,600 --> 00:02:57,400
which gets the token as an argument.
55
00:02:57,400 --> 00:03:00,030
And then here does nothing.
56
00:03:00,030 --> 00:03:02,970
We'll add the actual function a little bit later
57
00:03:02,970 --> 00:03:05,560
as we did it early in the course.
58
00:03:05,560 --> 00:03:07,640
And we can add a log out function,
59
00:03:07,640 --> 00:03:10,633
which takes no argument and then here does nothing.
60
00:03:11,690 --> 00:03:14,070
And then just as we did it early in the course,
61
00:03:14,070 --> 00:03:18,450
I'll now add my AuthContext provider component here
62
00:03:20,460 --> 00:03:22,180
which will actually be responsible
63
00:03:22,180 --> 00:03:25,690
for managing the auth related state.
64
00:03:25,690 --> 00:03:29,150
This component will receive props because it will return
65
00:03:29,150 --> 00:03:34,150
AuthContext.provider wrapped around props children.
66
00:03:34,740 --> 00:03:37,200
So that we can use this component overall
67
00:03:37,200 --> 00:03:40,250
as a wrapper around other components
68
00:03:40,250 --> 00:03:43,343
that then will have access to this context.
69
00:03:44,460 --> 00:03:47,470
And it's in this AuthContext provider component
70
00:03:47,470 --> 00:03:52,470
where I wanna manage the state for that auth data.
71
00:03:52,950 --> 00:03:57,570
For this we can import use state from react.
72
00:03:57,570 --> 00:04:01,923
And then here we can have our state for the token.
73
00:04:03,130 --> 00:04:07,800
And initially that's an empty string let's say, or null.
74
00:04:07,800 --> 00:04:11,270
And that's the token and a set token function.
75
00:04:11,270 --> 00:04:14,780
And we can infer the answer to the question
76
00:04:14,780 --> 00:04:17,170
wherever the user is logged in or not
77
00:04:17,170 --> 00:04:19,450
by looking at this token state.
78
00:04:19,450 --> 00:04:21,920
So we don't even need a separate state for this.
79
00:04:21,920 --> 00:04:24,180
We can infer it from this state.
80
00:04:24,180 --> 00:04:27,110
If we have no token, the user is not logged in.
81
00:04:27,110 --> 00:04:30,320
If we have a token, the user is logged in.
82
00:04:30,320 --> 00:04:32,730
So here the user is logged in.
83
00:04:32,730 --> 00:04:37,730
Constant is simply the response or the result of checking
84
00:04:38,590 --> 00:04:43,080
if token is truthy, and for this we can check if
85
00:04:43,080 --> 00:04:46,040
nought nought token, this might look strange
86
00:04:46,040 --> 00:04:50,700
but this simply converts this truthy or falsy value
87
00:04:50,700 --> 00:04:53,593
to a true or false Boolean value.
88
00:04:54,490 --> 00:04:57,120
If token is a string that's not empty,
89
00:04:57,120 --> 00:04:58,770
this will return true,
90
00:04:58,770 --> 00:05:03,050
if token is a string that is empty, this will return false.
91
00:05:03,050 --> 00:05:07,530
That's a default JavaScript trick you could say.
92
00:05:07,530 --> 00:05:09,430
And then we also need functions
93
00:05:09,430 --> 00:05:13,380
for changing that token state, a loginHandler
94
00:05:13,380 --> 00:05:16,660
and a logoutHandler function to be precise.
95
00:05:16,660 --> 00:05:20,120
So we can add these two functions already
96
00:05:20,120 --> 00:05:21,750
in the logoutHandler.
97
00:05:21,750 --> 00:05:26,750
I'll simply set token to null again, so I'll clear my token.
98
00:05:27,780 --> 00:05:31,560
In the loginHandler on the other hand here,
99
00:05:31,560 --> 00:05:34,820
I wanna also set my token,
100
00:05:34,820 --> 00:05:38,140
but I do expect to get the token as argument here.
101
00:05:38,140 --> 00:05:40,710
And then I set a token equal to that token
102
00:05:40,710 --> 00:05:41,660
which I am getting.
103
00:05:43,040 --> 00:05:46,600
And with that, we can then construct our context value
104
00:05:46,600 --> 00:05:51,100
which is an object, which will have that token field,
105
00:05:51,100 --> 00:05:53,563
which is that token state we're managing,
106
00:05:54,420 --> 00:05:58,770
which has this isLoggedIn field,
107
00:05:58,770 --> 00:06:03,390
which is that user isLoggedIn value we are deriving here,
108
00:06:03,390 --> 00:06:05,960
which has this login function
109
00:06:05,960 --> 00:06:09,310
which points at the loginHandler function we defined
110
00:06:09,310 --> 00:06:12,410
and this log out function, which stores a point
111
00:06:12,410 --> 00:06:16,380
at the logoutHandler function we defined here.
112
00:06:16,380 --> 00:06:20,950
And then it's this context value, which we set as a value
113
00:06:20,950 --> 00:06:24,853
for this value prop on the AuthContext provider.
114
00:06:25,710 --> 00:06:27,780
And if that looks brand new to you,
115
00:06:27,780 --> 00:06:30,410
definitely have a look at the dedicated lectures
116
00:06:30,410 --> 00:06:33,870
where I explain the context API from the ground up
117
00:06:33,870 --> 00:06:38,410
because here I'm only using what you learned there.
118
00:06:38,410 --> 00:06:42,330
With that context added, we just need to export it.
119
00:06:42,330 --> 00:06:47,330
So here I'll export the AuthContext as a default
120
00:06:47,540 --> 00:06:52,090
and I'll export the AuthContext provider as a named export
121
00:06:53,430 --> 00:06:58,360
and then here in app JS or actually an index JS,
122
00:06:58,360 --> 00:07:02,000
I'll wrap my context around my entire app.
123
00:07:02,000 --> 00:07:07,000
So here all use the AuthContext provider component
124
00:07:07,310 --> 00:07:10,330
which we import from store AuthContext
125
00:07:10,330 --> 00:07:14,543
as a wrapper around my entire app like this.
126
00:07:15,520 --> 00:07:18,670
So this named export, which I export in AuthContext
127
00:07:18,670 --> 00:07:22,763
is imported here as a named import with curly braces.
128
00:07:23,790 --> 00:07:25,980
And then we can tap into this context
129
00:07:25,980 --> 00:07:29,270
in the different places of the app where we need it.
130
00:07:29,270 --> 00:07:33,000
And we do for example, need it in the auth form component
131
00:07:33,000 --> 00:07:36,290
because dad is where I wanna call that login function
132
00:07:36,290 --> 00:07:40,890
to set my token, because here we get that token.
133
00:07:40,890 --> 00:07:43,410
And therefore we need to tap into the context here
134
00:07:43,410 --> 00:07:45,153
with use context.
135
00:07:47,260 --> 00:07:50,850
And then here, for example, we can call use context
136
00:07:50,850 --> 00:07:53,453
and connect this to the AuthContext,
137
00:07:54,520 --> 00:07:57,630
which we also of course now needs to import
138
00:07:57,630 --> 00:07:59,583
from store AuthContext.
139
00:08:01,004 --> 00:08:04,327
And that gives us access to this AuthContext like this.
140
00:08:06,770 --> 00:08:08,820
And with this access granted,
141
00:08:08,820 --> 00:08:12,040
we can call login on this context now.
142
00:08:12,040 --> 00:08:15,090
So down here where I know that the
143
00:08:15,090 --> 00:08:17,930
sign up or sign in succeeded,
144
00:08:17,930 --> 00:08:20,800
I know that this user is authenticated now.
145
00:08:20,800 --> 00:08:23,210
And I know that we'll have this token
146
00:08:23,210 --> 00:08:25,810
because Firebase returns us this token
147
00:08:25,810 --> 00:08:29,453
on this ID token field in the response object.
148
00:08:31,210 --> 00:08:34,470
And therefore here in this then block down there,
149
00:08:34,470 --> 00:08:39,470
I can call authCtx.login and pass data.idToken as a value
150
00:08:41,409 --> 00:08:44,230
because that will then be that token
151
00:08:44,230 --> 00:08:46,053
which we get from Firebase.
152
00:08:48,650 --> 00:08:51,820
With that we hopefully are setting the token
153
00:08:51,820 --> 00:08:56,140
now to reflect that authentication state on the UI
154
00:08:56,140 --> 00:08:58,640
which is the step I wanna start with.
155
00:08:58,640 --> 00:08:59,890
I can go to the layout
156
00:08:59,890 --> 00:09:02,270
and there to the main navigation component,
157
00:09:02,270 --> 00:09:04,570
because here I wanna change the menu options,
158
00:09:04,570 --> 00:09:08,643
which are displayed based on that login state.
159
00:09:09,670 --> 00:09:13,840
And for dis here, of course, I also wanna
160
00:09:13,840 --> 00:09:17,750
import use context from react
161
00:09:19,480 --> 00:09:22,050
and call use context here
162
00:09:23,040 --> 00:09:26,880
and connect to this AuthContext which we need to import
163
00:09:27,930 --> 00:09:29,990
from store AuthContext
164
00:09:31,530 --> 00:09:34,823
and store that in some a constant here.
165
00:09:35,890 --> 00:09:38,420
And then I get the information
166
00:09:38,420 --> 00:09:40,400
wherever the user is logged in or not
167
00:09:40,400 --> 00:09:42,500
by reaching out to AuthContext isLoggedIn.
168
00:09:44,480 --> 00:09:46,230
And now we can use that information
169
00:09:46,230 --> 00:09:50,190
to conditionally render or not render some content.
170
00:09:50,190 --> 00:09:52,890
Now for example, that link to the login page
171
00:09:52,890 --> 00:09:57,520
should only be rendered if the user is not authenticated
172
00:09:57,520 --> 00:09:59,540
because if we are authenticated
173
00:09:59,540 --> 00:10:03,100
going to the login page makes no sense.
174
00:10:03,100 --> 00:10:05,720
So I'll then wrap this entire list item here
175
00:10:05,720 --> 00:10:10,720
and check if is logged in and only if we are not logged in,
176
00:10:11,240 --> 00:10:14,843
hence the exclamation mark, I wanna rendered this list item.
177
00:10:16,200 --> 00:10:18,430
Now for the profile it's the opposite.
178
00:10:18,430 --> 00:10:22,293
I only wanna show this link if we are logged in.
179
00:10:23,250 --> 00:10:26,207
So therefore here, I wanna check if isLoggedIn
180
00:10:27,410 --> 00:10:31,733
and if we are, then I will show this profile link.
181
00:10:33,220 --> 00:10:36,800
And for the button, I also wanna check if we are logged in,
182
00:10:36,800 --> 00:10:39,020
because logging out only makes sense
183
00:10:39,020 --> 00:10:42,163
if we are logged in, like this.
184
00:10:43,900 --> 00:10:47,730
If I save that and I now reload,
185
00:10:47,730 --> 00:10:51,750
out of the box we should only see the login link.
186
00:10:51,750 --> 00:10:54,430
We can still manually go to the other pages
187
00:10:54,430 --> 00:10:57,180
if we entered the appropriate URLs,
188
00:10:57,180 --> 00:10:59,420
but that's something we'll work on later.
189
00:10:59,420 --> 00:11:03,260
But we see only the login item here.
190
00:11:03,260 --> 00:11:07,320
But if I do now login with valid credentials,
191
00:11:07,320 --> 00:11:12,320
we stay on this page, but the main navigation changed
192
00:11:13,260 --> 00:11:16,640
and that's a huge step forward.
193
00:11:16,640 --> 00:11:18,800
Of course, that's not all we wanna do,
194
00:11:18,800 --> 00:11:21,710
we probably also wanna navigate a way
195
00:11:21,710 --> 00:11:23,900
and we wanna make sure that certain pages
196
00:11:23,900 --> 00:11:27,420
can't even be reached if we are not logged in,
197
00:11:27,420 --> 00:11:30,633
but it is a first important step in the right direction.
198
00:11:31,680 --> 00:11:34,860
And before we work on redirecting the user
199
00:11:34,860 --> 00:11:37,340
and protecting certain pages,
200
00:11:37,340 --> 00:11:40,650
let's instead now focus on sending a request
201
00:11:40,650 --> 00:11:44,510
to protected resources from that profile page
202
00:11:44,510 --> 00:11:47,593
when we try to set a new password.
16494
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.