And once we have added both of the buttons, as well as added the functions once for login and one for
a log out, now, I would want to hop over to a bigger screen and actually take it for a test drive.
So let's not forget, there we have Compi slot star and notice on the big screen, of course, we can
see both buttons and check out the console or here we have a user, which of course is undefined.
Then we have is authenticated, which is false and is loading is true.
So now, of course, what I would want is to click on a login and you can pick whichever option you
want.
But I'm going to start with a social connections.
So we click on this for the first time.
Essentially, there's going to be a pop up screen.
But once we're done with that, of course, initially our user was undefined and false and now we can
see that we have successfully logged in since our user is an object here.
And then we have is authenticated equal to true.
And then of course, we also have he is loading back to false.
Now, I also want to tell you that in this application, essentially, we won't use that user data.
So if you are working on a previous application on GitHub, one, you remember that we used email as
well as the I believe it was not a fabrication, but essentially that little icon that comes back from
the user in this case, we won't do that.
I simply want to check whether the user exists.
So if I have anything but undefined, we are in good shape.
So this is what we should see.
And now what I would want is back in the user context once this changes from false, the true essentially
once I'm authenticated now, of course, I would want to pass in that data.
So I would want to set up my user.
And the way we're going to do that is simply by setting up, of course, our logic in the user.
So if this changes, then, of course we will reinforce it.
And now instead of these control logs, I'm just going to say, you know what, if that is the case,
if is unticketed is true, then I'm going to go to set my user that my user, and I'll set it equal
to whatever user I'm getting from the OTH zero.
Now, I do want to add else, though, because I also remember that of course we will log out.
Correct.
If the user logs out then I don't want to keep my user as that object or whatever.
I'm passing it over here.
Instead, what I would want is go back to said my user and set it equal to force.
So initially, of course.
This is going to be false or it will run when the component mounts, correct, and then, of course,
we'll check what is the value and I assure you that valuable befalls.
So we will kind of reset it back to normal since that's our default value.
But then once we authenticate the user, then, of course, this won't be true or it will rerun because
the value will change.
So our use of fact depends on that value.
And then we'll set the user equal to the user, whatever we're getting back.
And once I have this one in place now, I would want to go back to the car buttons and set up the condition
where if I'm logged in, then show me the log out like.
If I'm locked out, then, of course, show me the log in, like, I think that would make a bit more
sense and I can check that by just looking at the user.
Remember, user was either false or can have it here as a value.
So now I'm going to say if the user exists essentially, then of course I'll show the log out.
So let's go above the first button.
And we're already getting that value, of course, from my user context.
I'll say if the user so if the user will be undefined, then of course we will go to the second condition.
However, if it is true.
Well, then we would want to show the logout, correct?
So this is going to be the case where if this is true, then we would want to show the log on option
like show.
So that's why we'll display here the button or if it is false.
And of course, we'll display the log in button.
So copy and paste.
Now we have our condition and that since we have log, then of course we should see only the logout
one.
Correct, because we just logged in our once I click on a log on notice, we'll flip.
And now of course, we have a log in option.
Now I think I can close the console.
I it's not necessary and I would want to try the email setup as well.
So we tried Google or, you know, let's maybe quickly try Twitter as well.
Again, for the first time, you have to go through the problem and then we'll go out again and I'll
try to log in with a email instead.
So in this case, I think I'm going to go with my Peter Hotmail dot com and make sure that I remember
the password correctly.
So there is no weird bugs.
And hopefully that worked.
And there is now, of course, I also logged in with a email and password, and last thing that I would
like to mention in this video is the fact that if you navigate to an application, essentially through
your local storage, you'll also see that every time we login, whether that is with Google, Twitter
or whatever, you also have a key value pair in your local storage.
So that's something that we took care of when we set up our index.
Remember, we had cache location and equal to local storage.
And there's also one thing that I forgot in the initial video when we were setting up the all the zero,
I promise you that when we're setting up the application, I'll also show you what happens when we push
this application to production.
So right now, I would want to go to applications and then I'll show you the testing one since that
one is already in production.
And remember, when it comes to these application, you are eyes, for example, callback you URLs.
We would every time need the you are all if that application is already hosted somewhere.
So, for example, at this point in our application, we only have this localhost three thousand.
But then eventually when you push this to production, make sure you grab the URL and again make sure
you don't add that trailing forward slash and then you just need to add a comma.
And again, you need to do that in three places, make sure you save and you'll be in good shape.
So at the moment we only have this localhost in our application.
But then once you push the production, make sure to come back to Al zero.
And I have the URL for your app, add a comma, make sure there's no forward slash and you'll be in
good shape.