All language subtitles for 013 Adding Client-Side Page Guards (Route Protection)_Downloadly.ir_en

So of course, if we are not logged in

we shouldn't be able to visit this profile page.

And if we were on that page and we click log out

we should be redirected

and implementing that is never straight forward

with next auth.

All we have to do in the end is go to the pages

which we wanna protect or restrict in some way.

Like the profile page here.

And then also use some next off functionality there.

Either directly on that page

or in a component of that page.

like here to use a profile component.

Here I want to redirect the way if we're not authenticated.

And to implement this I will again import

useSession from next-auth/client.

And then again get access to my session data here.

So here I'll then check session

and maybe also loading extract these to pieces

which we get when we call useSession.

And now in the end, I want to do a couple of things.

First of all, I want to check if we're loading

if we're loading, then I and return a different content

and show loading as text.

By doing that if we saved this,

I don't see all that content immediately

if I shouldn't see it.

Now to styling is a bit of to fix that.

I'll give data class name of classes profile

like this, and now at least it's centered.

But at the moment I only see loading then it never changes.

And indeed, that is how you useSession behaves.

At least at the moment useSession returns to session

and loading but there is this scenario

that if you load a page,

loading stays true and it doesn't really update.

I'm not sure if it's a bug or a feature,

but it is what it is.

Thankfully, there is a way around that though.

Besides useSession, there also is getSession.

And the difference is that with useSession

we immediately get this session and loading thing here,

and then both session and loading could change

if session data was fetched.

If we have no session because we're logged out

session will never change though

and as we see loading unfortunately also doesn't change

It stays true.

getSession works differently.

getSessions, sends a new request

and gets to latest session data

and we can then react the answer

to the response for that request.

And that allows us to manage our own loading state

while forgetting the session and act accordingly.

It's a bit more cumbersome

requires more work from our side

but it is the way around this issue

which we have here.

And it's not too difficult to implement in the end.

We just need to manage our own state with use state.

So we should import use state from react.

And that will be our own loading state.

So here I can manage is loading

and set is loading.

And actually we can set this to true initially

to well start in that loading state.

Then we can manage a number piece of data

and that would be our session,

which initially is undefined.

So here we have the loaded session

and set loaded session

and now we can use effect,

does use fact hook, which we also have to import from react

to get the session when this component is rendered.

So here in this effect function,

I will call getSession

so what I'm importing here from next-auth/client,

I'll execute this and this will then return a promise.

So here we can use it then

or use a sync await for that

we would wrap it into an extra function though,

since we shouldn't make that effect function a sync.

Hence here, I'll just work with then

and I will get my session here eventually as our argument.

And now here session may be null if we don't have a session.

So if next off determines that this user is not logged in

or it will be an object with the session data

If the opposite is the case.

And since here, we only care about whether

we have a session or not

the only thing we need to do here is call setloadedsession

and set this to session once we're done

and set is loading to false here eventually Like this,

Now we don't use useSession anymore here

because it didn't work as it should here

and therefore now we have this approach and stat.

Now what's the benefit of this approach?

Well, now we can use our own isloading state here

to show this loading message

and we can now react to isloading being false

So to loading being done and us not having a session.

We can redirect a way then.

And actually, if that's our goal

instead of managing that extra session state

if we don't need the session for anything else

then navigating a way.

Then the only thing we have to do here

is check inside of this

Then block, if session is not truthy.

So if we don't have a session

and then that case we navigate away.

So set is loading, but if we don't have a session,

I will actually navigate a way by using window location href

which changes the URL in the browser

and changing this to auth for example.

So now if we don't find a session,

we navigate a way with this code.

Otherwise, eventually loading will be false

and we do have a session.

Then we rendered this content

And With that work around implemented

If we now go back and I reload,

you see this page loads.

If I log out on the apprehend I'm redirected.

And if I now manually visit profile,

I also am redirected eventually.

Now we do see the average page content flash here

for a brief moment.

And the reason for that

is me setting set as loading to false here, no matter what.

actually I want to do this in the else case here,

if we do have a session we stay on this page

and only then I want to set as loading to false.

If I do that and go to slash profile,

we only see loading briefly

and we see loading briefly

because we do have that brief moment

where we don't know yet whether we are authenticated or not.

But with that, we implemented the desired behavior here

and we need his work around

because of how useSession works.

It fulfills its purpose in the header

and it updates the UI correctly there.

But if we rely on the differences

between being in a loading state

and not having a session or not having a session

because we're not authenticated

directly after loading a page.

In that case, useSession didn't help us

and this is what (indistinct) does.

it's not the only way of solving this problem though