Original subtitles

So, let's now work on that AuthPage

and make sure that when we log in

so here in the auth-form component,

that if we called signIn and we did sign in successfully

that we then redirect and that if we load this page

even though we are logged in already,

we also maybe navigate away.

Now let's start with the redirecting

after logging in successfully.

We can simply do this here in this, if ($check).

Here, we check if we don't have an error.

So, if signing in succeeded,

and that is when we want to redirect.

Now we could again redirect with window.location.ref,

but that basically resets the entire application.

That is fine for an initial page load

but if we already worked in this application,

and we have two single-page application already going on,

then we probably don't wanna reset the entire application

and lose all our state.

Even though in this app,

we wouldn't lose much,

but of course that's not necessarily the case for every app.

So therefore, instead here for redirecting,

the better way of doing that is by using the Next router.

So we can import from 'next/router,'

and from there we can import the useRouter hook.

And then in our component function,

we simply call useRouter here to get access to that router.

We already were with the router earlier

in the course already.

Now we work with it again.

And once we got access to it,

here, we can simply call replace.

And replace will basically redirect us.

It will replace the current URL with a different one.

And we can for example go to ('/profile') here.

And if we do that,

if we implement this,

now, if I go back and I do log in

with valid credentials here.

After logging in,

I'm redirected to that profile page.

Of course, on the login page

we could show some loading state

whilst this log in request is on its way,

but that is some UI feedback which you of course can add.

The core functionality works.

Now, I just want to make sure

that I can't visit this AuthPage if I am logged in already.

And we could again implement

this with getService side props

to check the authentication status,

when a request reaches that route.

Alternatively, we implement our client's side work around.

And I'll do that here just to practice this again.

For this on the AuthPage or in the AuthForm,

doesn't really matter.

Let's maybe do it here in the AuthPage.

For this here, I want to use useEffect.

So, import that from React

so that we can call getSession in there.

And for that,

we need to import { getSession } from 'next-auth/client':

and then here in useEffect,

we have this effect function and our dependency array

without any dependencies here,

since we have no special dependencies.

And we call getSession,

and then here we find out whether we have a session or not.

And then here,

I wanna check if we do have a session,

because here the problem is if we are authenticated already.

And if we do have a session,

then I want to redirect a way.

For this here,

we can either redirect with window.location.ref

or with the router.

So, we can import { useRouter } from 'next/Router':

like this.

Get access to the router,

useRouter like that.

And then in here simply call router.replace

and go to the starting page for example.

And now add router as a dependency

since it's technically is one,

though it of course shouldn't change.

So now, we can redirect if we are authenticated.

Of course, I don't wanna show the AuthForm

whilst I'm still figuring out

whether we are authenticated or not.

And therefore again we can use useState here,

importing it from react to have our IsLoading state,

whilst we are figuring out whether we have a session or not.

And this starts with a value of true,

but here, if we don't have a session,

and therefore we need to log in

and therefore we wanna show the AuthForm.

If that's the case,

I'll setIsLoading{false}: here.

And then again,

we can show some fallback whilst we are loading,

and return a paragraph where we say loading like this.

And this will not be styled in any way,

you could of course add some styling.

With that if I enter /auth here in the URL,

we see loading briefly and then I'm redirected.

So that works.

And with that, we now also protect our AuthPage

and the profile page.

And we make sure that depending

on our authentication status,

we can only reach and use different kinds of pages.

And we can't visit all the pages all the time.

And that of course is an important part of authentication.