1
00:00:01,310 --> 00:00:03,160
Our author reducer is all set up.

2
00:00:03,200 --> 00:00:07,010
Now we need to think about the different state properties that this thing is going to manage and how

3
00:00:07,010 --> 00:00:08,720
we might want to change them.

4
00:00:08,750 --> 00:00:13,100
So the best way to do this is to go back over to our diagram over here and really think about the different

5
00:00:13,100 --> 00:00:18,160
ways that we would want to manage or change the state inside of our auth provider.

6
00:00:18,170 --> 00:00:23,390
So I think that there are probably three very obvious locations where we probably want to change some

7
00:00:23,390 --> 00:00:26,900
information related to our users authentication status.

8
00:00:26,960 --> 00:00:29,750
The first one is probably art sign up screen.

9
00:00:29,750 --> 00:00:35,000
So I think that our sign up screen needs to have some way to change our authentication state or kind

10
00:00:35,000 --> 00:00:36,620
of initiate a change.

11
00:00:36,650 --> 00:00:41,390
In other words whenever a user enters email and password and hits that sign up button we probably want

12
00:00:41,390 --> 00:00:44,360
to send some signal over to our auth provider until it.

13
00:00:44,450 --> 00:00:48,830
Hey you need to go and try to sign up with the API or something like that.

14
00:00:49,010 --> 00:00:54,140
So I'm going to draw in that line right there and I'll put in a little red box just indicate the information

15
00:00:54,140 --> 00:00:56,340
that we really want to share.

16
00:00:56,350 --> 00:01:01,570
So I think that we want to say something like from the sign up screen over to our provider tried to

17
00:01:01,600 --> 00:01:09,850
sign up and maybe we should also pass along the email and the password that the user entered into that

18
00:01:09,850 --> 00:01:10,990
form as well.

19
00:01:11,350 --> 00:01:16,180
It's that some signal that we want to send from the sign up screen over to our auth provider.

20
00:01:16,360 --> 00:01:20,590
The second location where we probably want to do something like this is our sign and screen.

21
00:01:20,590 --> 00:01:24,790
So whenever a user enters a email and password there as well we probably want to send a signal from

22
00:01:24,790 --> 00:01:32,640
the sign and screen over to the author provider and say something like hey please tried to sign in.

23
00:01:32,860 --> 00:01:38,830
And once again in this case we play I want to send along an email and a password as well.

24
00:01:40,100 --> 00:01:41,220
Now the final location.

25
00:01:41,230 --> 00:01:45,550
Remember I said there's gonna be three three places where we want to change some information stored

26
00:01:45,580 --> 00:01:48,980
inside of our off provider is going to be our account screen.

27
00:01:49,180 --> 00:01:54,150
Remember that account screen is going to have a single button on it over here that says sign out.

28
00:01:54,250 --> 00:01:59,340
So whenever user taps that button we probably want to once again change our authentication state.

29
00:01:59,620 --> 00:02:04,630
So whenever user taps that button we will probably want to share some information or send it in little

30
00:02:04,660 --> 00:02:11,760
notification of sorts from the account screen back to our auth provider and say tried to sign out so

31
00:02:11,800 --> 00:02:17,560
in all three cases we want to essentially change our state in these two over here we're gonna provide

32
00:02:17,560 --> 00:02:22,360
some data along with that request to change our state but in account screen there's really no data to

33
00:02:22,360 --> 00:02:26,710
send along we're really just kind of sending a notification that says hey please try to sign us out

34
00:02:26,710 --> 00:02:32,890
of the application so it's going to be up to the auth provider to implement some different action functions

35
00:02:33,160 --> 00:02:38,230
that are going to teach take each of these different signals and then somehow update the state stored

36
00:02:38,230 --> 00:02:45,110
inside the provider and say OK we're either now signed in or not signed in or whatever else now that

37
00:02:45,120 --> 00:02:49,740
we've got a reasonable idea of the different ways we need to change our states and where we are changing

38
00:02:49,740 --> 00:02:55,230
it from let's try to create some different action functions inside of our off context file and just

39
00:02:55,230 --> 00:03:01,120
kind of get a good idea of what we're going to try to do inside of each of those so back inside my off

40
00:03:01,220 --> 00:03:07,070
context right underneath my auth reducer I'm going to write out the scaffolding for three different

41
00:03:07,070 --> 00:03:10,550
action functions three different ways that I want to change my state.

42
00:03:10,550 --> 00:03:13,130
So my first function I'm going to call sign in.

43
00:03:13,130 --> 00:03:16,070
Actually let's go in order here we'll call it sign up.

44
00:03:16,070 --> 00:03:22,940
Remember whenever we create an action function it's going to be a function called with dispatch that's

45
00:03:22,940 --> 00:03:26,970
going to return a function and the inter function right here.

46
00:03:27,000 --> 00:03:29,540
That's what actually gets called inside of our component.

47
00:03:29,550 --> 00:03:34,050
The only reason we've got this setup right here is that remember inside of our create data context we

48
00:03:34,050 --> 00:03:38,380
need to get access to the dispatch that is only given to us right here.

49
00:03:38,430 --> 00:03:43,140
So the only way that we can really get that variable available inside of our actions is to go through

50
00:03:43,140 --> 00:03:48,780
this entire bound actions process call each one of those different action functions with dispatch and

51
00:03:48,780 --> 00:03:55,460
that will give this inner function right here access to the dispatch function that we really care about.

52
00:03:55,490 --> 00:04:00,410
So then inside of sign up remember this function right here is going to be what is called from our component.

53
00:04:00,480 --> 00:04:05,540
It's like we just said we probably want to make sure that whenever we try to sign up we pass along the

54
00:04:05,540 --> 00:04:08,210
email and password that the user is trying to sign up with.

55
00:04:08,930 --> 00:04:12,860
So I'm going to imagine that this function right here that's going to eventually be called my component

56
00:04:13,010 --> 00:04:17,990
is going to receive an object that's going to have the email and password that the user is trying to

57
00:04:17,990 --> 00:04:24,470
sign up with so then inside of here we can start to think about the different steps that we probably

58
00:04:24,470 --> 00:04:31,460
want to go through inside of your well chances are I think that we need to probably make a make API

59
00:04:31,460 --> 00:04:36,260
request to sign up with that email and password.

60
00:04:36,260 --> 00:04:41,480
So in other words make a request off to that express API that we just built and setup and try to sign

61
00:04:41,480 --> 00:04:50,080
up with that email and password and then after that if we sign up then we probably want to somehow modify

62
00:04:50,110 --> 00:04:56,630
our state and say that we are signed or let's just say authenticated.

63
00:04:56,680 --> 00:04:59,910
So if we sign up remember we then get back at Jason web token.

64
00:04:59,980 --> 00:05:03,970
So we probably want to say OK well we are now signed up we're signed in we're authenticated.

65
00:05:03,970 --> 00:05:08,500
So you want to modify our state managed by our author reduce the right here to reflect the fact that

66
00:05:08,500 --> 00:05:11,090
we are now authenticated.

67
00:05:11,140 --> 00:05:15,610
We also need to consider the case in which making this API request would fail.

68
00:05:15,610 --> 00:05:26,090
So if signing up fails we probably need to reflect an error message somewhere or something like that.

69
00:05:26,110 --> 00:05:30,040
So in total I think that's what we need to do inside of our sign up action function we need to make

70
00:05:30,040 --> 00:05:34,930
our API request if it goes through we need to modify our state say that we're now authenticated.

71
00:05:34,930 --> 00:05:40,120
Otherwise if that process fails we need to somehow show an error message to the user in some way to

72
00:05:40,120 --> 00:05:45,100
let our user know hey sorry but like that's about email password maybe the emails already in use made

73
00:05:45,100 --> 00:05:46,240
that request failed.

74
00:05:46,240 --> 00:05:48,470
Whatever else.

75
00:05:48,500 --> 00:05:52,490
That's a good kind of first stab at sign up let's not do the same thing for.

76
00:05:52,490 --> 00:06:00,500
Sign in and sign out as well will you sign in so we're gonna get our dispatch.

77
00:06:00,520 --> 00:06:03,200
We're going to return once again.

78
00:06:03,220 --> 00:06:08,230
I think that we're going to call that thing with a email and password inside of an object so I can receive

79
00:06:08,230 --> 00:06:09,580
those arguments right here.

80
00:06:10,920 --> 00:06:14,960
And we're going to once again go through the same steps I'm gonna put some comments inside of here by

81
00:06:14,970 --> 00:06:16,820
going to abbreviate them significantly.

82
00:06:16,980 --> 00:06:27,290
So I'll say tried to sign in handle success by updating state handle failure by showing error message

83
00:06:28,000 --> 00:06:32,660
somehow and we don't really know necessarily how to best show an error message to the user but we'll

84
00:06:32,660 --> 00:06:34,410
figure that out and just a little bit.

85
00:06:34,640 --> 00:06:37,980
And then finally we can stub out our sign out as well.

86
00:06:42,250 --> 00:06:47,410
So whenever we try to sign our user out well there's really no information we're taking along no parameters

87
00:06:47,410 --> 00:06:48,990
no arguments or anything like that.

88
00:06:49,000 --> 00:06:54,600
So all we really have to do here is somehow sign out OK.

89
00:06:54,610 --> 00:06:57,420
So those are three different action functions.

90
00:06:57,500 --> 00:07:01,880
So let's now wire those up down here to our create data context just to make them available to all of

91
00:07:01,880 --> 00:07:03,080
our different screens.

92
00:07:03,210 --> 00:07:07,700
So inside of here I'll put sign in sign out and sign up

93
00:07:10,690 --> 00:07:10,950
okay.

94
00:07:11,010 --> 00:07:12,110
That's a good place to get started.

95
00:07:12,110 --> 00:07:17,450
We at least have a idea of the different things we're going to do inside of this context object.

96
00:07:17,560 --> 00:07:21,050
So now that we've got this stuff put together another quick pause and we come back in the next video

97
00:07:21,290 --> 00:07:25,760
we're gonna start to wire up Acciona inside of our project and just make sure that we can actually access

98
00:07:25,760 --> 00:07:29,750
our API because it definitely seems like the next step here is to make sure that we can make an API

99
00:07:29,750 --> 00:07:35,450
request to that express API we've put together so quick pause and some setup in the next video.