In this video we're going to continue talking about how life works.
Now at the very end of the last video I had mentioned that if you've ever gone through a lot with me
before inside of another course I have shown you the oath for servers flow.
But in this application we're going to be using a slightly different flow or a slightly different setup.
This is going to be a flow specifically made for enabling authentication of users who are making use
of a javascript application running inside of a browser.
Let me tell you a couple of differences between the two.
The first thing the first difference is not really a difference at all.
So I want you to understand if you have learned this flow over here the flow we're going to be making
use of is very very similar in nature.
So at the end of the day both of these different flows are both these different approaches to handling
oath where the user is going to effectively kind of have the same result at the end of the day we are
asking the user to provide us access to information about them through some outside service provider.
And as a result of this process we're going to get some identifying information for the user such as
a profile or an e-mail address or an identification number.
And we're also going to get a token that is going to allow us to take some action on behalf of a user
without them directly involved or being involved.
So that's true of both these different flows.
Now usually we are going to be making use of the auth for servers flow.
Anytime that you are building an application that needs to access user data when they are not actively
logged into application or actively making use of it.
So an example of when you might definitely want to use this flow over here is if you are building some
application that is going to attempt to access the user's e-mail every 10 minutes and maybe attempt
to delete some e-mails that are flagged to spam or something like that but that type of application
you would want to be able to access their e-mail account every 10 minutes regardless of whether or not
the user is actively logged into your application and making use of it.
So for that type of application you would want to use this law for servers flow.
Now in our case we're not doing anything like that.
We are only making use of Google Earth just to allow a user to log in and then attempt to create a stream.
So we're not really associating a lot of information with the streams that are being created from each
of these users.
And we also don't have any need to attempt to access that user's data on Google servers so we're going
to instead use this other flow over here because we are only trying to kind of deal with this user when
they are actively logged into our application and making use of it.
All right.
So like I said we're going to be using this other flow over here.
Now I want to now show you a diagram that's going to help you understand exactly how this flow is going
to work.
At the end the day the flow that we're going to go through is going to be really easy and straightforward
because we're going to make use of a javascript library created by Google themselves to automate this
entire authentication process.
OK.
So here's the flow.
So the entire flow for a lot is going to be some interaction between our user and Google servers.
And there's actually going to be very little that you and I have to do inside this flow.
So we're going to start at the top left hand side and go through this step by step so everything is
going to begin when the user clicks on the log in with Google button inside of our header.
When that occurs we are going to hook up a click event handler to that button.
And so whenever user clicks on it we are going to run some code that is going to call Google's javascript
library and initiate the process.
When we do that call to that javascript library then that javascript library is going to automatically
automatically make an authentication request over to Google.
The result of which is going to be a little pop up window that appears inside the user's browser.
So this is going to be like a separate window that appears and prompts the user the user is going to
be prompted to grant access to our application to access their user account and get some information
about them.
So the user is going to click some Except button and then when that occurs that pop up window is going
to automatically close when the user accepts and that window closes the javascript library running inside
of our application is going to invoke a callback essentially inside of our react and redux application.
This callback is going to be invoked with some authorization token and profile information about the
user.
And that's what's going to identify this user and essentially prove that they are successfully logged
in through Google.
At that point in time we will then consider the user to be logged in as well.
Now as a part of this process but not shown on this diagram right here if the user ever happens to log
out of our application or happens to log out of Google servers we are going to get another callback
in vote and this other callback is going to essentially say hey the user just logged out.
So we'll need to make sure that we also wire up our application to listen for that call back then as
well.
Now if it seems like the flow rate here is really brief or you know kind of simplistic.
Well like I said this is a really easy way to get started with the flow.
Very simple very easy to get started with really easy to get a user to be signed in inside of your application
and then make requests on behalf of them or allow them some advanced access inside of your application.
OK so now that you've got kind of a vague idea of what's going to go on here let's take a quick pause.
When we come back the next video we're going to start doing a little bit of setup for Google authentication
inside of rap.
So quick break and I'll see you in just a minute.