In the last section we've got a very brief introduction to the world of oh off all we've really said
so far is that the Olof authentication flow is what more or less generates this nice red sign in with
Google button.
Right we haven't really done a lot outside of that.
So inside this section we're going to start crawling through this diagram that walks through the cloth
flow.
Now again I really do not expect you to listen to me in this video and comprehend every last step.
I just want you to have a very general idea of what's going on.
And then as we start to implement the actual flow we will reference this diagram many different times
and say you know kind of say hey here's the part we are working on at present.
OK.
So let's go to this diagram.
I'm going to zoom in and we'll get started.
Now you'll see three different columns on here client server and Google the everything inside of this
client column is essentially steps or actions that are being initiated or kind of undertaken by our
client which is really referring to our user and their browser.
So it's our user clicking around doing something inside of this column over here.
Next is the server column.
This is all the logic that you and I are going to put together this represents our server our running
express server.
Finally as the Google column this represents Google like the entire entity and their servers that are
going to aid inside of the process.
Now one last thing before we start to go through this flow remember that the entire purpose of this
stuff is authenticating our users.
So being able to identify who is logging in to our application remember that we are creating surveys
here.
That's the entire point of this application.
We are allowing our users to create surveys and pay money to us and all that kind of stuff.
And so we definitely want to understand who is creating what survey right.
It makes sense.
And so whenever a user does something inside of our application we need to be able to identify who is
doing it.
And so that's why we need authentication.
We will talk about just kind of like the ideas behind authentication in general later on.
But right now it's just concentrate on this flow.
So we start up here at the very top left where user clicks on Sumba and inside of our application.
So presumably like in the browser that says log in with Google whenever that happens we are going to
redirect our user or direct them to a route of something like localhost Colin 5000 slash off slash Google.
Now first off remember that local Five thousand is the current address that we are using to host our
server remember.
So here's localhost five thousand.
That's what's hosting our server right now.
Now the route that they're going to be accessing is off slash Google.
There is nothing inherently important about that.
I'm just kind of arbitrarily deciding and saying if anyone goes to the route off slash Google on our
server that means that they probably want to go into our last flow so whenever we receive that user
Our server is going to say oh someone is trying to authenticate through Google with our application.
OK.
That's fantastic.
We take that request that incoming requests and we immediately forward it on to Google.
So we see that incoming request we say OK hey user We understand you want to.
Off.
No problem.
We're going to help you out with that.
But first you need to go over to Google servers and make sure that you grant our application permission
to read about your profile on Google.
So we redirect the user to Google dot com slash off and then we also specify an app ID and that up idea
something important and something we'll talk about later on.
Now when we send the user on to Google Google we'll then show them some permission page and it's going
to be something that says like hey this application wants to have access to your profile or your email.
If you've ever signed in with Google before or Facebook or get hub or anything like that I guarantee
you you've seen this message in the past.
So it's some page that says hey this application wants to access your profile.
Do you allow that like is that OK.
And then in theory the user will say yup it's cool I grant them permission.
So the user will see that message in their browser they will click the button that says I grant permission
to this person.
It's cool when that happens.
And this is where things start to get a little bit hairy.
OK so bear with me here.
So when the user clicks on the button that says yup everything looks good.
Google automatically redirects the user back over to an address of local host 5000 slash off slash Google
slash callback.
Now the route on their Of off Google callback back again that is just random.
That's off the top of my head.
The route is not inherently important.
I'm just telling you that is the route that we're going to use in our application.
It could easily be something else if we wanted to.
Totally fine.
What's a little bit more relevant about that you are although is that inside of the queery stream so
everything after the little question mark in there there's going to be a parameter of code.
OK.
Code now that code is really important to us when the user is redirected back to our application from
Google.
Google is putting that code inside the URL we are going to see that request coming in.
We're going to put the user on hold and then we're going to take that little code.
We're then going to use that code to make a follow up request from our server directly over to Google
and we're going to include that code in that request.
The code is important because that is what allows.
You mean like us our server to reach back out to Google and say hey we're pretty sure this user who
has like pending on our server right now we're pretty sure they just granted us permission.
And you just gave us this code so we want to exchange this code with some details about this user like
give us their email give us their profile give us their identifying information.
So Google is going to take that code.
They're going to say OK yeah this looks legit.
This looks like the one that we just gave this to this user who just granted permission to this app
over here.
And so Google will then reply with some specific details about this user.
So we're going to get back some specific user details.
We're going to record those user details inside of our database and then we're going to essentially
do some stuff to uniquely identify this user in followup requests and so on this box right here I say
set user ID and cookie blah blah blah but we'll talk a little bit more about what that means in the
future.
And then the very last step in here I say kick user back to local host Colom 3000.
That's another piece that we'll talk about later on.
And at that point in time we will consider the user to be just kind of like magically logged in then
for any follow up request that the user ever makes.
Say we need some resources from the API or trying to pay some money to our application or we're trying
to create a new survey whatever it is we're going to make some follow up request.
And basically something magic is going to happen down here that we'll talk about later on.
Okay.
So that's the flow in total at this point in time.
I really don't want you to worry about these last steps.
Okay.
Please don't worry about them.
You and I are going to spend so much time talking about the intricacies of this stuff you're probably
going to hate me you're going to say Stephen you're talking about this like these last steps down here
way too much because there's a lot of detail down here.
So right now I only really want to be concerned with this first set of steps up here.
That's all I really want to be carrying out about at this point.
So at this point just consider this to be a very high level overview.
Again I've shown you some really complex things at this point in this course.
We've only done like basically a hello world with Express.
And so your head might be exploding trying to imagine how we do all this stuff with Express.
And if if you feel like that's you if if you like Steven well like the difficulty here just exploded.
That is fine.
Trust me totally fine.
I expect you totally fine to be like totally overwhelmed at this point.
No problem whatsoever.
We're going to go through this entire flow very slowly step by step and I am going to just guarantee
you that I will walk you through every last step of this process.
Okay.
So again please don't worry about.
OK.
So I think that's enough lecturing inside this section.
Again I really just want you to have a very high level overview.
You don't have to memorize any stuff whatsoever.
Not a problem.
So at this point we're going to take a quick break.
We're going to come back in the next section and we're going to start to talk about how we're going
to actually integrate or create this flow.
So let's get to it in the next section.