All language subtitles for 008 Managing The Auth State With Context_en

Now I wanna start with updating the UI

but before we can do that,

we got to do whenever important thing.

We have to store this token somewhere

in this running react application

where we can use it from all kinds of components

because at the moment we're logging our response here

in the auth form component,

but that's not the only component

we're interested in this data.

Instead, we'll need it in the header here

to update the menu items, which are presented to us.

And we'll probably need it

in other places off this app as well.

So this token should be some app white state

because it matters to a lot of different components.

And the general information that the user is logged in

matters to a lot of components.

Now, you learned that for managing app white state

you got two main options, the context API or Redux.

It's up to you, which of the two options you prefer.

I do explain the differences in the Redux section

in case you wanna dive into that again,

here I'll use the context API

so that we don't have to install

an extra third party package.

The authentication state is also not a state

that will change very frequently.

So we all just shouldn't have any performance issues here.

And therefore, I'll add a new folder,

a store folder in that source folder

which will hold the context code, which we're going to add.

And in there we can add up AuthContext JS file

where I wanna set up and manage

this context for this authentication data.

Now here, I'll add my AuthContext in general

by calling React.createContext.

And for this, we should import react from react here

and then initialize as context with some initial data

which I mainly set here

so that we define the general shape of our context

and get better auto-completion later.

And here I wanna store, let's say the token,

which initially is an empty string.

I wanna store the is logged in information in general.

For that we could simply check if we have a token or not

but I wanna use a shortcut here and have a Boolean here

which is true or false telling us whether the current user

of this website is logged in or not,

and out of the box, the user is not logged in.

And then we can add functions

that allow us to change that state.

For example, we can add a login function

which gets the token as an argument.

And then here does nothing.

We'll add the actual function a little bit later

as we did it early in the course.

And we can add a log out function,

which takes no argument and then here does nothing.

And then just as we did it early in the course,

I'll now add my AuthContext provider component here

which will actually be responsible

for managing the auth related state.

This component will receive props because it will return

AuthContext.provider wrapped around props children.

So that we can use this component overall

as a wrapper around other components

that then will have access to this context.

And it's in this AuthContext provider component

where I wanna manage the state for that auth data.

For this we can import use state from react.

And then here we can have our state for the token.

And initially that's an empty string let's say, or null.

And that's the token and a set token function.

And we can infer the answer to the question

wherever the user is logged in or not

by looking at this token state.

So we don't even need a separate state for this.

We can infer it from this state.

If we have no token, the user is not logged in.

If we have a token, the user is logged in.

So here the user is logged in.

Constant is simply the response or the result of checking

if token is truthy, and for this we can check if

nought nought token, this might look strange

but this simply converts this truthy or falsy value

to a true or false Boolean value.

If token is a string that's not empty,

this will return true,

if token is a string that is empty, this will return false.

That's a default JavaScript trick you could say.

And then we also need functions

for changing that token state, a loginHandler

and a logoutHandler function to be precise.

So we can add these two functions already

in the logoutHandler.

I'll simply set token to null again, so I'll clear my token.

In the loginHandler on the other hand here,

I wanna also set my token,

but I do expect to get the token as argument here.

And then I set a token equal to that token

which I am getting.

And with that, we can then construct our context value

which is an object, which will have that token field,

which is that token state we're managing,

which has this isLoggedIn field,

which is that user isLoggedIn value we are deriving here,

which has this login function

which points at the loginHandler function we defined

and this log out function, which stores a point

at the logoutHandler function we defined here.

And then it's this context value, which we set as a value

for this value prop on the AuthContext provider.

And if that looks brand new to you,

definitely have a look at the dedicated lectures

where I explain the context API from the ground up

because here I'm only using what you learned there.

With that context added, we just need to export it.

So here I'll export the AuthContext as a default

and I'll export the AuthContext provider as a named export

and then here in app JS or actually an index JS,

I'll wrap my context around my entire app.

So here all use the AuthContext provider component

which we import from store AuthContext

as a wrapper around my entire app like this.

So this named export, which I export in AuthContext

is imported here as a named import with curly braces.

And then we can tap into this context

in the different places of the app where we need it.

And we do for example, need it in the auth form component

because dad is where I wanna call that login function

to set my token, because here we get that token.

And therefore we need to tap into the context here

with use context.

And then here, for example, we can call use context

and connect this to the AuthContext,

which we also of course now needs to import

from store AuthContext.

And that gives us access to this AuthContext like this.

And with this access granted,

we can call login on this context now.

So down here where I know that the

sign up or sign in succeeded,

I know that this user is authenticated now.

And I know that we'll have this token

because Firebase returns us this token

on this ID token field in the response object.

And therefore here in this then block down there,

I can call authCtx.login and pass data.idToken as a value

because that will then be that token

which we get from Firebase.

With that we hopefully are setting the token

now to reflect that authentication state on the UI

which is the step I wanna start with.

I can go to the layout

and there to the main navigation component,

because here I wanna change the menu options,

which are displayed based on that login state.

And for dis here, of course, I also wanna

import use context from react

and call use context here

and connect to this AuthContext which we need to import

from store AuthContext

and store that in some a constant here.

And then I get the information

wherever the user is logged in or not

by reaching out to AuthContext isLoggedIn.

And now we can use that information

to conditionally render or not render some content.

Now for example, that link to the login page

should only be rendered if the user is not authenticated

because if we are authenticated

going to the login page makes no sense.

So I'll then wrap this entire list item here

and check if is logged in and only if we are not logged in,

hence the exclamation mark, I wanna rendered this list item.

Now for the profile it's the opposite.

I only wanna show this link if we are logged in.

So therefore here, I wanna check if isLoggedIn

and if we are, then I will show this profile link.

And for the button, I also wanna check if we are logged in,

because logging out only makes sense

if we are logged in, like this.

If I save that and I now reload,

out of the box we should only see the login link.

We can still manually go to the other pages

if we entered the appropriate URLs,

but that's something we'll work on later.

But we see only the login item here.

But if I do now login with valid credentials,

we stay on this page, but the main navigation changed

and that's a huge step forward.

Of course, that's not all we wanna do,

we probably also wanna navigate a way

and we wanna make sure that certain pages

can't even be reached if we are not logged in,

but it is a first important step in the right direction.

And before we work on redirecting the user

and protecting certain pages,

let's instead now focus on sending a request

to protected resources from that profile page

when we try to set a new password.