So let's now make sure
that users can actually also log into our application
and not just create new accounts.
For that, we first of all must make sure
that we can switch from signup to login mode,
so that users can click this button,
this link here,
and they then stay on this page.
But we somehow change the mode behind the scenes,
so that when the form is submitted,
we actually don't trigger the signup action
as we currently always do,
but that we instead either trigger that action
or the login action,
which we have yet to add to this application
depending on which mode the user selected.
And therefore, let's start by switching that mode
when that button or that link here is clicked.
And there would be different ways of handling this.
We could, for example,
use the useState Hook offered by React
to keep track of some mode state
that's either login or signup, let's say.
And we could then change that mode
whenever that link below the form is clicked.
But I'll not use that hook here,
instead, I'll use search params,
query params, for managing that mode.
My idea is that when we click that login
with existing account link,
I lead to user to the page they're already on.
But I add a query parameter called mode here,
which I'll set to login.
And with Next.js,
we can then easily extract any query parameters,
any search parameters that might have been set
on that page we're currently on
by using a special prop
that's added to all page components in Next.js applications.
So for that, I'll go to that root page.js file here,
that homepage,
and there we can use object destructuring
to get hold of the searchParams prop.
That's a special prop that's added automatically
to all page components in Next.js,
and it will contain an object
that has one key for any query parameter
that might've been set on the currently active URL.
So if I redirect a user to the currently active page
with a mode query parameters set to login,
there will be a mode property
on that searchParams object here.
So I can get my formMode
or however we wanna call it
by accessing searchParams.mode.
Now of course, this might not be set at all
if no query parameters were added,
and therefore, I'll add an initial state of login here.
So formMode is login
if searchParams.mode doesn't have a value.
Now we can pass this through a prop
that could be called mode to the AuthForm.
And in the AuthForm,
we can, and should therefore accept
and destructure a prop called mode,
which will be a string with the word login or signup.
That's the plan.
So we can now use this mode prop,
which will contain such a string down here
and check if mode is login.
In which case, I actually wanna render a different link
that says create an account.
Because if the mode is login,
I want to offer the user a link
to go to the account creation mode instead.
Therefore the query parameter mode should be set
to signup, in that case.
On the other hand,
if mode is equal to signup,
I want to render that link I had there originally,
where I say login with existing account.
So that I got either this link
or this link depending on the mode value,
and these links can then be used to switch the mode.
Now it's not just the links that depend on the modes,
instead, it's also the text on this button, for example.
Here we can also check if the mode is login, let's say.
In which case, I wanna give the button a caption of Login.
And otherwise, if it's not login,
if it's signup,
it should have a caption of Create Account, let's say.
And if you save that all you should be able to reload,
and if you click on Create an account,
and then on login with existing account,
you should be able to switch between these different modes.
And that's now the important first step.
The next step now is to add a login server action
and to dynamically change that server action
that's assigned to the form
or that's assigned to use formState,
to be precise, based on the mode.
That's what we'll do next.