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