So, we are now protecting that profile page
and we redirect away for not authenticated.
If I do log in, on the other hand,
if I use valid credentials,
I can go to profile and I see that page.
And I can also direct the enter profile and I see that page.
But that brief moment of loading, which flashes
on the screen when we enter profile when not authenticated
that is maybe something we want to get rid of.
Now, we can't really get rid of it
with just client side code, because if we visit this page
and we then use client side JavaScript code
to determine whether we are authenticated or not,
then we'll always need to wait that fraction
of a second to find out if we are.
But we must not forget that Next.js blends server side
and client side code, so we can use server side code
to determine whether the user,
who sent the request, is authenticated or not
and return different page content
and possibly a redirect if the user is not authenticated.
For this, we need to go to the profile page
and then add an extra function.
The question now, just is, which function?
We could, of course, add the getStaticProps function here.
This would allow us to fetch data for this page in advance.
But that's the wrong function, why?
Because you must not forget
that getStaticProps runs during build time.
Yes, it can also run thereafter with revalidate set
to a certain duration, but it mainly runs during build time.
It does absolutely not run for every incoming request.
Now here, in this case, every incoming request matters
though because we need to find out,
if that user is logged in or not.
And that's why instead we should use getServiceSideProps
that will then get a context object
where we get access to the incoming request.
And the good thing about getSession,
which I'm using in the profile,
the user profile component here.
getSession, the good thing about this function is that
you're not limited to using it on client side code only.
You can, as you see, it works in a component.
But you can also use getSession on the server side,
even though it's imported from next-auth/client.
So, we can copy that import,
and bring that over to Profile.js here
and import that on this page, in this page file.
And then, here, in getServerSideProps
we can also call getSession and actually pass
in an object where we set a request key, a req key
to the incoming request, which we get
out of the context we're receiving here, context.req.
Don't forget that you have access to the request object
through that context when using getServerSideProps.
And we pass this request which we get here
into this getSession function through that req key
in that configuration object.
And then, getSession will automatically look
into that request and extract the data it needs
the session token cookie, to be precise,
and see if that's valid, and if the user is authenticated
and if that cookie even exists to begin with.
So, that will all happen behind the scenes.
We just need to call getSession here,
and we can convert this into a async function
and await this, since this will return a promise.
And as a result, we'll get our session.
And this will be null if the user is not authenticated
and it will be a valid session object,
if the user is authenticated.
So now, with that in place, we can act accordingly.
We can check if not session, so if it's null,
if we don't have a session,
if the visiting user is not authenticated.
And, in that case, we return an object here inside
of getServerSideProps where we maybe set redirect
to an object to redirect the user.
That is something you learned about
in an earlier course section.
This object, which you return in getServerSideProps
and in getStaticProps, typically,
is a object where you set props for the component.
But, as you learned, you're not limited to that.
You can also set the not found key
to true to show the 404 page.
Or you set the redirect to an object
where you describe the redirect you want to issue.
And that will then redirect the user to a different page
without even flashing that user profile page.
This redirect object then, wants a destination key
where you specify the path you want
to redirect to, for example, to the auth page.
And you can add permanent to indicate
if that's a permanent redirect,
which will always apply, or only a temporary one.
And here we definitely want to set permanent
to false to make it clear that it's only this time
that we redirect because the user is not logged in.
Now, if we don't make it into this if block,
we know that there is a session, the user is logged in
and, hence, we want to return a object
where we don't set not found to anything
and where we don't redirect,
but where we instead just set our props.
And if we want, we can then pass the session
as a prop to the page, like this.
So, now we use getServerSideProps for that.
And that means that in the user profile component
we can now get rid of our client side code,
we can comment this out, or delete this
because this component, this user profile component here,
let me remove the imports, this component,
which is used by the profile page
will only be rendered if that page renders.
And that page will only render if we are authenticated
because of our getServerSideProps logic.
And that might be the more elegant way
of handling this because with this, if we save that,
if I'm not logged in and I then visit /profile
I don't even see the profile page flashing.
Instead, I'm instantly redirected.
Now, if I do log in, though, if I do enter valid credentials
then I can go to the profile page,
and I can also enter it like this and it loads.
And that is, maybe, the more elegant way of handling this,
which is why I also wanted to show it to you.
Now with that, however, let's make sure
that we also implement something similar for the auth page.
Here, after logging in successfully,
I also want to redirect away to the profile page, let's say,
and I want to make sure that we can't load
the auth page if I am logged in already.
So, let's see if we can find a solution for this as well.
Just a side note, because I see it, this warning
which is showing up here, we can ignore it for now.
We will set this environment variable later.