1
00:00:00,150 --> 00:00:06,090
And once we have added both of the buttons, as well as added the functions once for login and one for

2
00:00:06,090 --> 00:00:13,450
a log out, now, I would want to hop over to a bigger screen and actually take it for a test drive.

3
00:00:13,920 --> 00:00:20,250
So let's not forget, there we have Compi slot star and notice on the big screen, of course, we can

4
00:00:20,250 --> 00:00:27,750
see both buttons and check out the console or here we have a user, which of course is undefined.

5
00:00:28,080 --> 00:00:35,140
Then we have is authenticated, which is false and is loading is true.

6
00:00:35,700 --> 00:00:42,600
So now, of course, what I would want is to click on a login and you can pick whichever option you

7
00:00:42,660 --> 00:00:43,020
want.

8
00:00:43,020 --> 00:00:46,350
But I'm going to start with a social connections.

9
00:00:46,680 --> 00:00:48,890
So we click on this for the first time.

10
00:00:49,410 --> 00:00:51,660
Essentially, there's going to be a pop up screen.

11
00:00:51,960 --> 00:00:58,800
But once we're done with that, of course, initially our user was undefined and false and now we can

12
00:00:58,800 --> 00:01:04,230
see that we have successfully logged in since our user is an object here.

13
00:01:04,590 --> 00:01:09,020
And then we have is authenticated equal to true.

14
00:01:09,270 --> 00:01:12,630
And then of course, we also have he is loading back to false.

15
00:01:13,230 --> 00:01:19,280
Now, I also want to tell you that in this application, essentially, we won't use that user data.

16
00:01:19,650 --> 00:01:27,240
So if you are working on a previous application on GitHub, one, you remember that we used email as

17
00:01:27,240 --> 00:01:33,480
well as the I believe it was not a fabrication, but essentially that little icon that comes back from

18
00:01:33,480 --> 00:01:35,510
the user in this case, we won't do that.

19
00:01:35,700 --> 00:01:39,620
I simply want to check whether the user exists.

20
00:01:39,960 --> 00:01:44,610
So if I have anything but undefined, we are in good shape.

21
00:01:44,970 --> 00:01:46,380
So this is what we should see.

22
00:01:46,590 --> 00:01:56,250
And now what I would want is back in the user context once this changes from false, the true essentially

23
00:01:56,250 --> 00:02:00,690
once I'm authenticated now, of course, I would want to pass in that data.

24
00:02:01,020 --> 00:02:03,930
So I would want to set up my user.

25
00:02:04,380 --> 00:02:12,600
And the way we're going to do that is simply by setting up, of course, our logic in the user.

26
00:02:13,200 --> 00:02:17,130
So if this changes, then, of course we will reinforce it.

27
00:02:17,490 --> 00:02:22,230
And now instead of these control logs, I'm just going to say, you know what, if that is the case,

28
00:02:22,440 --> 00:02:32,130
if is unticketed is true, then I'm going to go to set my user that my user, and I'll set it equal

29
00:02:32,280 --> 00:02:36,530
to whatever user I'm getting from the OTH zero.

30
00:02:36,840 --> 00:02:41,340
Now, I do want to add else, though, because I also remember that of course we will log out.

31
00:02:41,790 --> 00:02:42,240
Correct.

32
00:02:42,660 --> 00:02:48,780
If the user logs out then I don't want to keep my user as that object or whatever.

33
00:02:48,780 --> 00:02:50,100
I'm passing it over here.

34
00:02:50,430 --> 00:02:55,610
Instead, what I would want is go back to said my user and set it equal to force.

35
00:02:55,890 --> 00:02:57,270
So initially, of course.

36
00:02:58,210 --> 00:03:04,330
This is going to be false or it will run when the component mounts, correct, and then, of course,

37
00:03:04,330 --> 00:03:07,780
we'll check what is the value and I assure you that valuable befalls.

38
00:03:08,080 --> 00:03:13,260
So we will kind of reset it back to normal since that's our default value.

39
00:03:13,570 --> 00:03:21,100
But then once we authenticate the user, then, of course, this won't be true or it will rerun because

40
00:03:21,250 --> 00:03:22,610
the value will change.

41
00:03:22,630 --> 00:03:24,680
So our use of fact depends on that value.

42
00:03:25,090 --> 00:03:31,030
And then we'll set the user equal to the user, whatever we're getting back.

43
00:03:31,210 --> 00:03:37,660
And once I have this one in place now, I would want to go back to the car buttons and set up the condition

44
00:03:38,200 --> 00:03:42,780
where if I'm logged in, then show me the log out like.

45
00:03:43,690 --> 00:03:50,860
If I'm locked out, then, of course, show me the log in, like, I think that would make a bit more

46
00:03:50,860 --> 00:03:55,390
sense and I can check that by just looking at the user.

47
00:03:55,810 --> 00:04:01,940
Remember, user was either false or can have it here as a value.

48
00:04:02,410 --> 00:04:09,430
So now I'm going to say if the user exists essentially, then of course I'll show the log out.

49
00:04:10,210 --> 00:04:12,850
So let's go above the first button.

50
00:04:13,420 --> 00:04:17,600
And we're already getting that value, of course, from my user context.

51
00:04:17,630 --> 00:04:25,140
I'll say if the user so if the user will be undefined, then of course we will go to the second condition.

52
00:04:25,150 --> 00:04:26,950
However, if it is true.

53
00:04:27,840 --> 00:04:31,030
Well, then we would want to show the logout, correct?

54
00:04:31,350 --> 00:04:37,830
So this is going to be the case where if this is true, then we would want to show the log on option

55
00:04:38,220 --> 00:04:38,820
like show.

56
00:04:39,090 --> 00:04:44,540
So that's why we'll display here the button or if it is false.

57
00:04:44,940 --> 00:04:48,320
And of course, we'll display the log in button.

58
00:04:48,630 --> 00:04:49,740
So copy and paste.

59
00:04:50,010 --> 00:04:57,900
Now we have our condition and that since we have log, then of course we should see only the logout

60
00:04:57,900 --> 00:04:58,070
one.

61
00:04:58,080 --> 00:05:03,720
Correct, because we just logged in our once I click on a log on notice, we'll flip.

62
00:05:03,910 --> 00:05:06,540
And now of course, we have a log in option.

63
00:05:06,840 --> 00:05:08,490
Now I think I can close the console.

64
00:05:08,730 --> 00:05:13,940
I it's not necessary and I would want to try the email setup as well.

65
00:05:14,190 --> 00:05:19,080
So we tried Google or, you know, let's maybe quickly try Twitter as well.

66
00:05:19,290 --> 00:05:27,540
Again, for the first time, you have to go through the problem and then we'll go out again and I'll

67
00:05:27,540 --> 00:05:30,670
try to log in with a email instead.

68
00:05:31,140 --> 00:05:39,870
So in this case, I think I'm going to go with my Peter Hotmail dot com and make sure that I remember

69
00:05:39,870 --> 00:05:41,300
the password correctly.

70
00:05:42,120 --> 00:05:44,310
So there is no weird bugs.

71
00:05:45,440 --> 00:05:46,970
And hopefully that worked.

72
00:05:48,330 --> 00:05:55,110
And there is now, of course, I also logged in with a email and password, and last thing that I would

73
00:05:55,110 --> 00:06:02,130
like to mention in this video is the fact that if you navigate to an application, essentially through

74
00:06:02,130 --> 00:06:08,610
your local storage, you'll also see that every time we login, whether that is with Google, Twitter

75
00:06:08,610 --> 00:06:14,370
or whatever, you also have a key value pair in your local storage.

76
00:06:14,550 --> 00:06:19,420
So that's something that we took care of when we set up our index.

77
00:06:19,460 --> 00:06:23,820
Remember, we had cache location and equal to local storage.

78
00:06:24,180 --> 00:06:30,930
And there's also one thing that I forgot in the initial video when we were setting up the all the zero,

79
00:06:30,930 --> 00:06:36,480
I promise you that when we're setting up the application, I'll also show you what happens when we push

80
00:06:36,480 --> 00:06:38,700
this application to production.

81
00:06:39,000 --> 00:06:44,790
So right now, I would want to go to applications and then I'll show you the testing one since that

82
00:06:44,790 --> 00:06:46,810
one is already in production.

83
00:06:47,160 --> 00:06:54,720
And remember, when it comes to these application, you are eyes, for example, callback you URLs.

84
00:06:55,260 --> 00:07:01,930
We would every time need the you are all if that application is already hosted somewhere.

85
00:07:02,250 --> 00:07:07,920
So, for example, at this point in our application, we only have this localhost three thousand.

86
00:07:08,280 --> 00:07:15,660
But then eventually when you push this to production, make sure you grab the URL and again make sure

87
00:07:15,660 --> 00:07:20,240
you don't add that trailing forward slash and then you just need to add a comma.

88
00:07:20,640 --> 00:07:27,900
And again, you need to do that in three places, make sure you save and you'll be in good shape.

89
00:07:28,290 --> 00:07:32,030
So at the moment we only have this localhost in our application.

90
00:07:32,280 --> 00:07:36,270
But then once you push the production, make sure to come back to Al zero.

91
00:07:37,310 --> 00:07:44,270
And I have the URL for your app, add a comma, make sure there's no forward slash and you'll be in

92
00:07:44,270 --> 00:07:44,710
good shape.