1
00:00:00,700 --> 00:00:05,680
In the last section we've got a very brief introduction to the world of oh off all we've really said

2
00:00:05,680 --> 00:00:12,820
so far is that the Olof authentication flow is what more or less generates this nice red sign in with

3
00:00:12,820 --> 00:00:13,540
Google button.

4
00:00:13,540 --> 00:00:16,030
Right we haven't really done a lot outside of that.

5
00:00:16,030 --> 00:00:20,230
So inside this section we're going to start crawling through this diagram that walks through the cloth

6
00:00:20,330 --> 00:00:21,160
flow.

7
00:00:21,190 --> 00:00:27,380
Now again I really do not expect you to listen to me in this video and comprehend every last step.

8
00:00:27,400 --> 00:00:31,370
I just want you to have a very general idea of what's going on.

9
00:00:31,450 --> 00:00:36,670
And then as we start to implement the actual flow we will reference this diagram many different times

10
00:00:36,910 --> 00:00:42,310
and say you know kind of say hey here's the part we are working on at present.

11
00:00:42,350 --> 00:00:42,570
OK.

12
00:00:42,610 --> 00:00:43,910
So let's go to this diagram.

13
00:00:45,560 --> 00:00:48,340
I'm going to zoom in and we'll get started.

14
00:00:48,480 --> 00:00:54,600
Now you'll see three different columns on here client server and Google the everything inside of this

15
00:00:54,690 --> 00:01:02,460
client column is essentially steps or actions that are being initiated or kind of undertaken by our

16
00:01:02,460 --> 00:01:06,390
client which is really referring to our user and their browser.

17
00:01:06,420 --> 00:01:11,310
So it's our user clicking around doing something inside of this column over here.

18
00:01:11,310 --> 00:01:12,670
Next is the server column.

19
00:01:12,750 --> 00:01:17,910
This is all the logic that you and I are going to put together this represents our server our running

20
00:01:17,940 --> 00:01:19,290
express server.

21
00:01:19,680 --> 00:01:25,260
Finally as the Google column this represents Google like the entire entity and their servers that are

22
00:01:25,260 --> 00:01:28,350
going to aid inside of the process.

23
00:01:28,350 --> 00:01:33,090
Now one last thing before we start to go through this flow remember that the entire purpose of this

24
00:01:33,490 --> 00:01:36,490
stuff is authenticating our users.

25
00:01:36,540 --> 00:01:43,200
So being able to identify who is logging in to our application remember that we are creating surveys

26
00:01:43,200 --> 00:01:43,430
here.

27
00:01:43,440 --> 00:01:45,470
That's the entire point of this application.

28
00:01:45,540 --> 00:01:49,740
We are allowing our users to create surveys and pay money to us and all that kind of stuff.

29
00:01:49,950 --> 00:01:53,860
And so we definitely want to understand who is creating what survey right.

30
00:01:53,930 --> 00:01:55,100
It makes sense.

31
00:01:55,140 --> 00:02:00,300
And so whenever a user does something inside of our application we need to be able to identify who is

32
00:02:00,300 --> 00:02:00,970
doing it.

33
00:02:01,080 --> 00:02:04,430
And so that's why we need authentication.

34
00:02:04,530 --> 00:02:09,230
We will talk about just kind of like the ideas behind authentication in general later on.

35
00:02:09,240 --> 00:02:12,180
But right now it's just concentrate on this flow.

36
00:02:12,270 --> 00:02:17,270
So we start up here at the very top left where user clicks on Sumba and inside of our application.

37
00:02:17,280 --> 00:02:23,850
So presumably like in the browser that says log in with Google whenever that happens we are going to

38
00:02:23,910 --> 00:02:33,110
redirect our user or direct them to a route of something like localhost Colin 5000 slash off slash Google.

39
00:02:33,150 --> 00:02:38,940
Now first off remember that local Five thousand is the current address that we are using to host our

40
00:02:38,940 --> 00:02:40,420
server remember.

41
00:02:40,530 --> 00:02:42,110
So here's localhost five thousand.

42
00:02:42,180 --> 00:02:45,270
That's what's hosting our server right now.

43
00:02:45,270 --> 00:02:49,250
Now the route that they're going to be accessing is off slash Google.

44
00:02:49,460 --> 00:02:52,670
There is nothing inherently important about that.

45
00:02:52,800 --> 00:02:59,820
I'm just kind of arbitrarily deciding and saying if anyone goes to the route off slash Google on our

46
00:02:59,820 --> 00:03:07,590
server that means that they probably want to go into our last flow so whenever we receive that user

47
00:03:07,650 --> 00:03:13,220
Our server is going to say oh someone is trying to authenticate through Google with our application.

48
00:03:13,230 --> 00:03:13,550
OK.

49
00:03:13,560 --> 00:03:15,300
That's fantastic.

50
00:03:15,300 --> 00:03:20,520
We take that request that incoming requests and we immediately forward it on to Google.

51
00:03:20,520 --> 00:03:25,530
So we see that incoming request we say OK hey user We understand you want to.

52
00:03:25,540 --> 00:03:25,940
Off.

53
00:03:25,980 --> 00:03:26,750
No problem.

54
00:03:26,880 --> 00:03:28,460
We're going to help you out with that.

55
00:03:28,470 --> 00:03:34,440
But first you need to go over to Google servers and make sure that you grant our application permission

56
00:03:34,650 --> 00:03:37,790
to read about your profile on Google.

57
00:03:38,160 --> 00:03:45,280
So we redirect the user to Google dot com slash off and then we also specify an app ID and that up idea

58
00:03:45,320 --> 00:03:49,110
something important and something we'll talk about later on.

59
00:03:49,110 --> 00:03:55,560
Now when we send the user on to Google Google we'll then show them some permission page and it's going

60
00:03:55,560 --> 00:04:01,110
to be something that says like hey this application wants to have access to your profile or your email.

61
00:04:01,290 --> 00:04:06,660
If you've ever signed in with Google before or Facebook or get hub or anything like that I guarantee

62
00:04:06,660 --> 00:04:08,870
you you've seen this message in the past.

63
00:04:08,940 --> 00:04:12,900
So it's some page that says hey this application wants to access your profile.

64
00:04:13,050 --> 00:04:15,890
Do you allow that like is that OK.

65
00:04:15,960 --> 00:04:20,850
And then in theory the user will say yup it's cool I grant them permission.

66
00:04:20,850 --> 00:04:26,190
So the user will see that message in their browser they will click the button that says I grant permission

67
00:04:26,190 --> 00:04:27,080
to this person.

68
00:04:27,240 --> 00:04:30,240
It's cool when that happens.

69
00:04:30,270 --> 00:04:32,280
And this is where things start to get a little bit hairy.

70
00:04:32,280 --> 00:04:33,920
OK so bear with me here.

71
00:04:33,930 --> 00:04:37,550
So when the user clicks on the button that says yup everything looks good.

72
00:04:37,860 --> 00:04:47,490
Google automatically redirects the user back over to an address of local host 5000 slash off slash Google

73
00:04:47,610 --> 00:04:49,080
slash callback.

74
00:04:49,080 --> 00:04:54,290
Now the route on their Of off Google callback back again that is just random.

75
00:04:54,300 --> 00:04:56,030
That's off the top of my head.

76
00:04:56,040 --> 00:04:58,080
The route is not inherently important.

77
00:04:58,110 --> 00:05:02,040
I'm just telling you that is the route that we're going to use in our application.

78
00:05:02,040 --> 00:05:04,200
It could easily be something else if we wanted to.

79
00:05:04,230 --> 00:05:06,120
Totally fine.

80
00:05:06,120 --> 00:05:10,830
What's a little bit more relevant about that you are although is that inside of the queery stream so

81
00:05:10,830 --> 00:05:16,420
everything after the little question mark in there there's going to be a parameter of code.

82
00:05:16,770 --> 00:05:17,240
OK.

83
00:05:17,370 --> 00:05:26,040
Code now that code is really important to us when the user is redirected back to our application from

84
00:05:26,040 --> 00:05:26,770
Google.

85
00:05:27,120 --> 00:05:34,250
Google is putting that code inside the URL we are going to see that request coming in.

86
00:05:34,350 --> 00:05:39,200
We're going to put the user on hold and then we're going to take that little code.

87
00:05:39,330 --> 00:05:46,380
We're then going to use that code to make a follow up request from our server directly over to Google

88
00:05:46,470 --> 00:05:49,340
and we're going to include that code in that request.

89
00:05:49,470 --> 00:05:52,700
The code is important because that is what allows.

90
00:05:52,770 --> 00:06:00,520
You mean like us our server to reach back out to Google and say hey we're pretty sure this user who

91
00:06:00,560 --> 00:06:04,550
has like pending on our server right now we're pretty sure they just granted us permission.

92
00:06:04,680 --> 00:06:10,920
And you just gave us this code so we want to exchange this code with some details about this user like

93
00:06:11,250 --> 00:06:16,350
give us their email give us their profile give us their identifying information.

94
00:06:16,500 --> 00:06:18,340
So Google is going to take that code.

95
00:06:18,390 --> 00:06:20,710
They're going to say OK yeah this looks legit.

96
00:06:20,880 --> 00:06:25,260
This looks like the one that we just gave this to this user who just granted permission to this app

97
00:06:25,260 --> 00:06:26,440
over here.

98
00:06:26,730 --> 00:06:31,120
And so Google will then reply with some specific details about this user.

99
00:06:31,230 --> 00:06:34,470
So we're going to get back some specific user details.

100
00:06:34,470 --> 00:06:40,530
We're going to record those user details inside of our database and then we're going to essentially

101
00:06:40,740 --> 00:06:47,640
do some stuff to uniquely identify this user in followup requests and so on this box right here I say

102
00:06:47,850 --> 00:06:52,110
set user ID and cookie blah blah blah but we'll talk a little bit more about what that means in the

103
00:06:52,110 --> 00:06:52,980
future.

104
00:06:53,210 --> 00:06:57,720
And then the very last step in here I say kick user back to local host Colom 3000.

105
00:06:57,750 --> 00:07:01,210
That's another piece that we'll talk about later on.

106
00:07:01,260 --> 00:07:07,170
And at that point in time we will consider the user to be just kind of like magically logged in then

107
00:07:07,170 --> 00:07:10,200
for any follow up request that the user ever makes.

108
00:07:10,200 --> 00:07:16,230
Say we need some resources from the API or trying to pay some money to our application or we're trying

109
00:07:16,230 --> 00:07:20,760
to create a new survey whatever it is we're going to make some follow up request.

110
00:07:20,850 --> 00:07:25,190
And basically something magic is going to happen down here that we'll talk about later on.

111
00:07:25,440 --> 00:07:26,130
Okay.

112
00:07:26,460 --> 00:07:26,770
Okay.

113
00:07:26,790 --> 00:07:29,580
So that's the flow in total at this point in time.

114
00:07:29,700 --> 00:07:32,710
I really don't want you to worry about these last steps.

115
00:07:32,880 --> 00:07:33,250
Okay.

116
00:07:33,300 --> 00:07:34,970
Please don't worry about them.

117
00:07:35,040 --> 00:07:40,150
You and I are going to spend so much time talking about the intricacies of this stuff you're probably

118
00:07:40,150 --> 00:07:44,160
going to hate me you're going to say Stephen you're talking about this like these last steps down here

119
00:07:44,160 --> 00:07:46,980
way too much because there's a lot of detail down here.

120
00:07:47,340 --> 00:07:52,870
So right now I only really want to be concerned with this first set of steps up here.

121
00:07:52,890 --> 00:07:56,610
That's all I really want to be carrying out about at this point.

122
00:07:56,610 --> 00:08:03,450
So at this point just consider this to be a very high level overview.

123
00:08:03,450 --> 00:08:08,700
Again I've shown you some really complex things at this point in this course.

124
00:08:08,700 --> 00:08:12,200
We've only done like basically a hello world with Express.

125
00:08:12,360 --> 00:08:17,350
And so your head might be exploding trying to imagine how we do all this stuff with Express.

126
00:08:17,520 --> 00:08:22,560
And if if you feel like that's you if if you like Steven well like the difficulty here just exploded.

127
00:08:22,560 --> 00:08:23,650
That is fine.

128
00:08:23,670 --> 00:08:25,430
Trust me totally fine.

129
00:08:25,680 --> 00:08:30,150
I expect you totally fine to be like totally overwhelmed at this point.

130
00:08:30,150 --> 00:08:31,610
No problem whatsoever.

131
00:08:31,890 --> 00:08:37,980
We're going to go through this entire flow very slowly step by step and I am going to just guarantee

132
00:08:37,980 --> 00:08:41,790
you that I will walk you through every last step of this process.

133
00:08:41,790 --> 00:08:42,460
Okay.

134
00:08:42,990 --> 00:08:44,750
So again please don't worry about.

135
00:08:45,580 --> 00:08:46,090
OK.

136
00:08:46,230 --> 00:08:48,330
So I think that's enough lecturing inside this section.

137
00:08:48,330 --> 00:08:52,080
Again I really just want you to have a very high level overview.

138
00:08:52,080 --> 00:08:54,420
You don't have to memorize any stuff whatsoever.

139
00:08:54,420 --> 00:08:55,840
Not a problem.

140
00:08:55,880 --> 00:08:58,220
So at this point we're going to take a quick break.

141
00:08:58,230 --> 00:09:02,220
We're going to come back in the next section and we're going to start to talk about how we're going

142
00:09:02,220 --> 00:09:04,840
to actually integrate or create this flow.

143
00:09:05,190 --> 00:09:08,070
So let's get to it in the next section.