Blessing we do inside of render off button is make sure that both button has a click event handler to
either sign the user in or sign them out when appropriate.
So I want to make two additional helper methods on my class right underneath on off change.
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
a callback and I'll add an on sign out and this will be a arrow function as well.
So then in each of these We're going to want to access our auth instance which is assigned to this start
off.
Now we want to call either the sign in or the sign out method on either one OK so on on sign in right
here I'm going to call this dot off dot.
Sign in.
And then when I try to sign out I want to call this dot dot sign out like so.
Now one thing I want to point out here we don't really have to make these helper methods.
We could have just passed the sign in and sign out methods directly to these two buttons that we have
right here creating the two helper methods is a little bit of extra work.
However it also would make this component a lot more clear to other engineers in the future if they
ever took a look at what was going on inside this thing.
So personally I kind of like defining helper methods just because they helped describe what is going
on inside of a component.
But again it's totally up to you.
OK so now we need to wire up these click event handlers.
So on the sign out button right here I'm going to add a On Click event handler and each time that someone
clicks this thing I'm going to call this dot on sign out.
And then on the second button all do an on click and I'll do this start on sign in.
Now one quick thing to keep in mind dear we do not want to put on parentheses on either of these methods.
If you put parentheses on there then that means that that method is going to be called the instant this
component is rendered to the screen which is probably not the behavior that you want at all.
So make sure that you do not have parentheses after either of those method names.
All right.
So will now save this and then we'll finally do a quick test inside of our browser.
OK.
So I see signing with Google.
So I'm going to click that I get my pop up right here I'll select an account or get kicked back over
to my application and the button changes to say sign out and then next I'll try clicking sign out and
I instantly get signed out and the button goes back to sign it with Google.
That's pretty much it.
Not that bad.
All right.
So this looks fantastic.
We've got a single Rehab component that encompasses everything having to do with Google authentication
inside of our application.
So we are going to use redux inside this up so might be a bit curious whether or not it is best practice
to do all this kind of business logic looking stuff inside of a rock component.
Well I do have some thoughts about that.
So let's take a pause right here.
When we come back the next section we're going to start laying out some the redux design of our application
and talk about exactly how authentication is going to work into the redux side of our app.
So quick pause and I'll see you in just a minute.