1
00:00:02,190 --> 00:00:08,710
Now let's make sure we can also login and for that in the auth action creator, so in the store actions folder

2
00:00:08,710 --> 00:00:12,720
in the auth file, we can duplicate the sign up

3
00:00:12,930 --> 00:00:18,210
action creator, copy it and rename that copy to login

4
00:00:18,220 --> 00:00:22,870
and this also will need an e-mail and a password but it will send the request to a slightly different URL.

5
00:00:22,870 --> 00:00:26,620
If you have a look at the official docs for signing in,

6
00:00:26,620 --> 00:00:30,370
this is your URL. Now it might look almost equal

7
00:00:30,490 --> 00:00:37,170
but here, the difference is this word, sign in with password, instead of sign up after accounts colon.

8
00:00:37,170 --> 00:00:40,380
This is what we need to change to have a valid URL again

9
00:00:40,400 --> 00:00:46,110
and of course therefore, you could also think about ways of merging this into one function and reusing

10
00:00:46,110 --> 00:00:51,750
code, I'll explicitly let it split up here to make it really clear that we have two separate functions

11
00:00:51,750 --> 00:00:57,940
here and now with that, we're sending a request to this URL. We still need to attach email, password

12
00:00:57,970 --> 00:01:03,250
and this return secure token field too which always should be true and we'll get back pretty much the same

13
00:01:03,250 --> 00:01:08,630
data as when we sign up, just one extra field which basically tells us whether this

14
00:01:08,650 --> 00:01:16,100
email is part of an existing account. So other than that, we send the same data here,

15
00:01:16,150 --> 00:01:17,160
we can leave it as it is,

16
00:01:17,160 --> 00:01:22,300
we want to have this check here and therefore here, I can then also log my response data.

17
00:01:22,300 --> 00:01:30,320
Of course I don't want to dispatch a sign up action here but instead, dispatch a new login action thereafter,

18
00:01:30,340 --> 00:01:31,890
though we're also not doing anything

19
00:01:31,900 --> 00:01:34,120
there for now, we'll soon do so,

20
00:01:34,120 --> 00:01:37,500
I can already change what we dispatched. With that,

21
00:01:37,510 --> 00:01:38,490
let's see whether that works

22
00:01:38,500 --> 00:01:44,290
but for this of course, some changes on the auth screen are required because right now there, we always

23
00:01:44,290 --> 00:01:51,190
when we press this button, we always sign up right now and that's not what I want, instead of always signing

24
00:01:51,190 --> 00:01:58,210
up, I want to either sign up or login depending on which mode we're in and this mode should be changeable

25
00:01:58,210 --> 00:02:01,730
with the help of this button which allows us to switch between modes.

26
00:02:02,110 --> 00:02:07,990
So in order to be able to switch between modes, we need to manage some additional state in the auth screen,

27
00:02:07,990 --> 00:02:12,940
basically a state that allows us to find out whether we're in login mode or in sign up mode.

28
00:02:12,940 --> 00:02:22,560
So here I use my state and I start with false because this should say is sign up and set is sign up

29
00:02:22,560 --> 00:02:28,300
and that therefore tells us whether we're currently in sign up mode or if that's false if we're in the

30
00:02:28,300 --> 00:02:29,040
login mode

31
00:02:29,040 --> 00:02:31,680
basically because these are the two modes we have, right?

32
00:02:31,710 --> 00:02:37,190
So is sign up is false initially because initially, I want to be in login mode and now we can use is

33
00:02:37,190 --> 00:02:42,450
sign up to determine what happens when we press the login button but also which text we output

34
00:02:42,480 --> 00:02:45,740
there. So let's start with the text, here

35
00:02:45,790 --> 00:02:48,090
I don't always want to say login,

36
00:02:48,140 --> 00:02:51,320
instead I want to check if is sign up is true,

37
00:02:51,380 --> 00:02:57,020
then here I want to say sign up and I only want to say login if this is not true

38
00:02:57,020 --> 00:03:00,350
and here of course, I don't always want to say switch to sign up,

39
00:03:00,350 --> 00:03:03,020
what I say here depends on the mode we're in.

40
00:03:03,020 --> 00:03:13,050
So here, I will now use back ticks with switch to, so that here I can inject a dynamic value which

41
00:03:13,050 --> 00:03:20,190
now depends on is sign up and then the dynamic value either is a string where I say login because if

42
00:03:20,280 --> 00:03:25,340
is sign up is true, we switch to the login mode or if is sign up is false,

43
00:03:25,470 --> 00:03:32,360
we switch to the sign up mode because we are in login mode, so that changes the text.

44
00:03:32,360 --> 00:03:39,890
Now here in this function, I want to call set is sign up and basically invert it, for this we can use

45
00:03:39,890 --> 00:03:47,000
that function form of updating this where here we get our previous state, so where I pass a function

46
00:03:47,000 --> 00:03:52,740
to the setter function here and I return what the previous state is not.

47
00:03:52,880 --> 00:03:58,430
So the previous state of course is a boolean because with is sign up, we are managing a boolean state

48
00:03:58,460 --> 00:04:00,390
which initially is false

49
00:04:00,620 --> 00:04:06,200
and now here therefore I get that current state and I set the opposite as a new state.

50
00:04:06,200 --> 00:04:10,420
So if this is currently true, I set it to false, if it was false I set it to true,

51
00:04:10,430 --> 00:04:11,980
that's what's happening here.

52
00:04:12,810 --> 00:04:19,000
Now we just need to make sure that different things happen here and for that, I'll rename this from sign up

53
00:04:19,000 --> 00:04:28,060
handler to auth handler to be more generic in its naming and of course bind my auth handler down there

54
00:04:28,810 --> 00:04:33,130
and now in that auth handler function, we can check in which mode we are.

55
00:04:33,370 --> 00:04:37,180
So here I can check if is sign up is true

56
00:04:37,180 --> 00:04:45,110
and if that is the case, then of course I want to dispatch this action, so that's fine. Else if that's

57
00:04:45,110 --> 00:04:50,060
not true, I want to dispatch the other action and therefore we can even change this a bit, dispatch down

58
00:04:50,060 --> 00:04:53,280
there and define our action up here

59
00:04:53,540 --> 00:04:57,890
and now my action initially is undefined

60
00:04:57,890 --> 00:05:10,190
and then I set action either to this or I set action equal to auth actions login with form state

61
00:05:10,190 --> 00:05:24,250
input values email and form state input values password, like that and now action is a variable

62
00:05:24,580 --> 00:05:26,940
which I can pass to dispatch down there.

63
00:05:26,980 --> 00:05:33,880
So I always dispatch this action but this action is either the result of auth actions sign up or of auth

64
00:05:33,910 --> 00:05:40,750
actions login depending on whether we're in sign up mode or in login mode. With that, we're really flexible

65
00:05:40,750 --> 00:05:48,860
and now if we save this, if I switch here, you see the text updates here on Android as well and therefore

66
00:05:48,910 --> 00:05:56,390
now if I switch to login mode, so if this says login and I try logging in here, make sure you enter

67
00:05:56,390 --> 00:06:02,130
the same credentials you used before for creating this and I press login,

68
00:06:02,130 --> 00:06:03,300
this looks pretty good,

69
00:06:03,300 --> 00:06:06,730
I get my console output here with the data

70
00:06:06,840 --> 00:06:09,240
this URL should return.

71
00:06:09,240 --> 00:06:15,930
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

72
00:06:15,930 --> 00:06:17,930
anything with that token right now

73
00:06:17,970 --> 00:06:22,740
and of course we also have no error management or a loading state management.

74
00:06:22,830 --> 00:06:24,690
So these are things we'll also have to add.