1
00:00:01,170 --> 00:00:05,860
Blessing we do inside of render off button is make sure that both button has a click event handler to

2
00:00:05,860 --> 00:00:08,950
either sign the user in or sign them out when appropriate.

3
00:00:08,950 --> 00:00:14,680
So I want to make two additional helper methods on my class right underneath on off change.

4
00:00:14,680 --> 00:00:20,180
I'm going to add in on sign in and I'm going to make this an arrow function because it is going to be

5
00:00:20,180 --> 00:00:25,760
a callback and I'll add an on sign out and this will be a arrow function as well.

6
00:00:26,120 --> 00:00:31,390
So then in each of these We're going to want to access our auth instance which is assigned to this start

7
00:00:31,400 --> 00:00:31,990
off.

8
00:00:32,090 --> 00:00:38,940
Now we want to call either the sign in or the sign out method on either one OK so on on sign in right

9
00:00:38,940 --> 00:00:41,410
here I'm going to call this dot off dot.

10
00:00:41,430 --> 00:00:43,730
Sign in.

11
00:00:43,910 --> 00:00:51,100
And then when I try to sign out I want to call this dot dot sign out like so.

12
00:00:51,170 --> 00:00:55,770
Now one thing I want to point out here we don't really have to make these helper methods.

13
00:00:55,880 --> 00:01:01,580
We could have just passed the sign in and sign out methods directly to these two buttons that we have

14
00:01:01,580 --> 00:01:05,680
right here creating the two helper methods is a little bit of extra work.

15
00:01:05,690 --> 00:01:10,310
However it also would make this component a lot more clear to other engineers in the future if they

16
00:01:10,310 --> 00:01:12,580
ever took a look at what was going on inside this thing.

17
00:01:12,740 --> 00:01:17,420
So personally I kind of like defining helper methods just because they helped describe what is going

18
00:01:17,420 --> 00:01:18,460
on inside of a component.

19
00:01:18,470 --> 00:01:21,520
But again it's totally up to you.

20
00:01:21,600 --> 00:01:24,260
OK so now we need to wire up these click event handlers.

21
00:01:24,440 --> 00:01:31,820
So on the sign out button right here I'm going to add a On Click event handler and each time that someone

22
00:01:31,820 --> 00:01:38,380
clicks this thing I'm going to call this dot on sign out.

23
00:01:38,560 --> 00:01:45,830
And then on the second button all do an on click and I'll do this start on sign in.

24
00:01:45,870 --> 00:01:50,860
Now one quick thing to keep in mind dear we do not want to put on parentheses on either of these methods.

25
00:01:50,950 --> 00:01:55,180
If you put parentheses on there then that means that that method is going to be called the instant this

26
00:01:55,180 --> 00:01:59,530
component is rendered to the screen which is probably not the behavior that you want at all.

27
00:01:59,530 --> 00:02:03,660
So make sure that you do not have parentheses after either of those method names.

28
00:02:04,030 --> 00:02:04,300
All right.

29
00:02:04,310 --> 00:02:08,510
So will now save this and then we'll finally do a quick test inside of our browser.

30
00:02:09,320 --> 00:02:09,530
OK.

31
00:02:09,540 --> 00:02:11,190
So I see signing with Google.

32
00:02:11,220 --> 00:02:16,580
So I'm going to click that I get my pop up right here I'll select an account or get kicked back over

33
00:02:16,580 --> 00:02:22,110
to my application and the button changes to say sign out and then next I'll try clicking sign out and

34
00:02:22,110 --> 00:02:25,540
I instantly get signed out and the button goes back to sign it with Google.

35
00:02:25,690 --> 00:02:26,460
That's pretty much it.

36
00:02:26,460 --> 00:02:27,780
Not that bad.

37
00:02:27,780 --> 00:02:28,650
All right.

38
00:02:28,860 --> 00:02:30,000
So this looks fantastic.

39
00:02:30,000 --> 00:02:35,610
We've got a single Rehab component that encompasses everything having to do with Google authentication

40
00:02:35,640 --> 00:02:37,080
inside of our application.

41
00:02:37,440 --> 00:02:42,930
So we are going to use redux inside this up so might be a bit curious whether or not it is best practice

42
00:02:43,080 --> 00:02:47,940
to do all this kind of business logic looking stuff inside of a rock component.

43
00:02:47,940 --> 00:02:49,170
Well I do have some thoughts about that.

44
00:02:49,170 --> 00:02:50,670
So let's take a pause right here.

45
00:02:50,730 --> 00:02:54,840
When we come back the next section we're going to start laying out some the redux design of our application

46
00:02:55,080 --> 00:02:59,750
and talk about exactly how authentication is going to work into the redux side of our app.

47
00:02:59,790 --> 00:03:01,900
So quick pause and I'll see you in just a minute.