Now let's make sure we can also login and for that in the auth action creator, so in the store actions folder
in the auth file, we can duplicate the sign up
action creator, copy it and rename that copy to login
and this also will need an e-mail and a password but it will send the request to a slightly different URL.
If you have a look at the official docs for signing in,
this is your URL. Now it might look almost equal
but here, the difference is this word, sign in with password, instead of sign up after accounts colon.
This is what we need to change to have a valid URL again
and of course therefore, you could also think about ways of merging this into one function and reusing
code, I'll explicitly let it split up here to make it really clear that we have two separate functions
here and now with that, we're sending a request to this URL. We still need to attach email, password
and this return secure token field too which always should be true and we'll get back pretty much the same
data as when we sign up, just one extra field which basically tells us whether this
email is part of an existing account. So other than that, we send the same data here,
we can leave it as it is,
we want to have this check here and therefore here, I can then also log my response data.
Of course I don't want to dispatch a sign up action here but instead, dispatch a new login action thereafter,
though we're also not doing anything
there for now, we'll soon do so,
I can already change what we dispatched. With that,
let's see whether that works
but for this of course, some changes on the auth screen are required because right now there, we always
when we press this button, we always sign up right now and that's not what I want, instead of always signing
up, I want to either sign up or login depending on which mode we're in and this mode should be changeable
with the help of this button which allows us to switch between modes.
So in order to be able to switch between modes, we need to manage some additional state in the auth screen,
basically a state that allows us to find out whether we're in login mode or in sign up mode.
So here I use my state and I start with false because this should say is sign up and set is sign up
and that therefore tells us whether we're currently in sign up mode or if that's false if we're in the
login mode
basically because these are the two modes we have, right?
So is sign up is false initially because initially, I want to be in login mode and now we can use is
sign up to determine what happens when we press the login button but also which text we output
there. So let's start with the text, here
I don't always want to say login,
instead I want to check if is sign up is true,
then here I want to say sign up and I only want to say login if this is not true
and here of course, I don't always want to say switch to sign up,
what I say here depends on the mode we're in.
So here, I will now use back ticks with switch to, so that here I can inject a dynamic value which
now depends on is sign up and then the dynamic value either is a string where I say login because if
is sign up is true, we switch to the login mode or if is sign up is false,
we switch to the sign up mode because we are in login mode, so that changes the text.
Now here in this function, I want to call set is sign up and basically invert it, for this we can use
that function form of updating this where here we get our previous state, so where I pass a function
to the setter function here and I return what the previous state is not.
So the previous state of course is a boolean because with is sign up, we are managing a boolean state
which initially is false
and now here therefore I get that current state and I set the opposite as a new state.
So if this is currently true, I set it to false, if it was false I set it to true,
that's what's happening here.
Now we just need to make sure that different things happen here and for that, I'll rename this from sign up
handler to auth handler to be more generic in its naming and of course bind my auth handler down there
and now in that auth handler function, we can check in which mode we are.
So here I can check if is sign up is true
and if that is the case, then of course I want to dispatch this action, so that's fine. Else if that's
not true, I want to dispatch the other action and therefore we can even change this a bit, dispatch down
there and define our action up here
and now my action initially is undefined
and then I set action either to this or I set action equal to auth actions login with form state
input values email and form state input values password, like that and now action is a variable
which I can pass to dispatch down there.
So I always dispatch this action but this action is either the result of auth actions sign up or of auth
actions login depending on whether we're in sign up mode or in login mode. With that, we're really flexible
and now if we save this, if I switch here, you see the text updates here on Android as well and therefore
now if I switch to login mode, so if this says login and I try logging in here, make sure you enter
the same credentials you used before for creating this and I press login,
this looks pretty good,
I get my console output here with the data
this URL should return.
So that looks like it works and with that, we're able to sign up and to login but of course we're not doing
anything with that token right now
and of course we also have no error management or a loading state management.
So these are things we'll also have to add.