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.