Original subtitles

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.