Our head or component is now showing the correct text depending on whether or not the user is currently
signed in.
The only problem is that if we are signed out for a logged out.
So between last section and this one I just made sure that I logged out.
If I now click on logging in with Google I go through the flow but just as we've been seeing throughout
the entire course we get presented with this nasty looking error message on the screen.
So in this section we're going to figure out why we're seeing this.
We're going to figure out how to fix it up.
Now as we work on this and as we fix it this is all stuff that is very closely related to the back end
of our application and you will recall that I said very recently that we're going to try to isolate
either working on the back end or the front end.
So hopefully this is going to be a rare occurrence in this course where we jump very quickly from the
front end to the back end.
And then again to the front end.
So hopefully we won't do it too often.
So to understand why we're seeing this air I first want to open up our server routes file where we define
the route of off Google callback.
So inside my code editor I need to find my route's directory which remember is in our top level directory.
So here's route's right here and I'm going to open up all throughout Scott J.S..
Now one of the routes inside of here.
Basically the second one we defined was off Google Colback right here.
Whenever a user came to this route and remember this is the same route that we are visiting right now
that generates this error message.
We are redirecting the user.
We are kind of passing control of the user would be the best thing to say here off to the passport authenticate
function right here.
Now if you listen to the optional lectures a little bit ago where we covered a lot of extra topic we
spoke a lot about how we wired up middleware inside of our application.
And so if you recall from that optional lecture.
So again if you skip the lecture you may have not heard it.
We spoke about how the cookie session passport in initialize and passport's Session right here were
all instances of middleware that we wired up to our application.
And the purpose of middleware was to add a little bit of code that could intercept an incoming request
and modify it or change it in some fashion.
Now when we spoke about middleware we had said that these three middleware right here would intercept
every incoming request but we had also said that middleware could be only instructed to look at single
individual requests as well like requests to very individual or specific route handlers.
So if we go back over to our auth routes file with this off Google callback right here passport authenticate
of Google right here is actually a middleware.
It is a function that takes the incoming request it further authenticates the user in this case remember
it takes the code out of the L and then goes and fetches the user's profile and then it calls our call
back in the Google strategy.
After all that Google authentication stuff is finished.
It then passes the request on to the next middleware.
Inside the flow the next middleware in the chain for this request handler.
But in this case we have not actually specified what this thing should do after the passport authenticate
middleware has been executed.
So right now this is executing and finishes up and then it says basically OK I have no idea what to
do with this request now.
I have no idea how to handle it.
So I guess I'm just going to report that you can't get this route.
Like basically something went wrong.
I've got no code to handle requests to slash Google slash callback so to get our application working
we need to add on another request handler in the old chain right here or another route handler to this
existing one right here.
That's going to say after we are all done with a passport authenticate call then pass the request on
to this next little step.
So let's do that right now and then we'll get the entire log in process working so the first thing we're
going to do is going to be to put in a couple of new lines here to make this line a little bit more
legible.
So I'm going to do New Line New Line and new line like so.
And then after a passport authenticate I'm going out in another comma and then immediately after that
I'm going to put in an arrow function which will be where the request is sent to after this passport
authenticate middleware is executed this function will be called with rock rez and then we will add
in an arrow function like so then inside if your whenever a request comes to this function right here
we are going to redirect whoever's making the request off to some other route inside of our application.
And so when I say redirect I want us to be thinking about well after the user successfully authenticates
through Google where do we really want to send them to inside of our application.
And what do we really want to do with this request.
Well I think that we could very easily make the case to say after you successfully log in we really
want to dump you at this dashboard screen right here.
I mean you just signed in.
I now want you to see a list of all the different surveys and whatnot that you have created over time.
So after user signs and I really want to redirect them to the route of slash service so to do that inside
the body this function will say rez dog.
Redirect slash surveys like so.
OK.
So the response object right here.
Remember that is what red stands for it stands for response has a function attached to it called redirect.
This redirect function responds back to the browser and says oh hey I'm so glad you came here but I
don't actually want to deal with you anymore.
I don't want to deal with your request.
I have this other route handler inside of our application that cares way more about you.
So I want you to just go over to this other route of slash surveys instead and that thing will figure
out exactly what to do with you.
So to go through this flow one more time after the user comes back from the flow passport middleware
takes over right here.
It does its thing it says OK I'm all done I'm going to pass the request on to the next handler in this
chain which is going to be this air of function.
We take the request in and we tell the response to inform the browser that it needs to go to this other
route OK.
So let's test this out inside the browser.
Now I'm going to flip back over.
I'm going to make sure that I am still logged out.
So over at localhost 5 0 0 0 0 an API slash log out of a tab open at this route.
I can just refresh it.
And that will leave me now the application.
So I'm now definitely logged out.
Now back at our re-act application I will navigate to localhost 3000 and I again see the log in with
Google button on the screen if I click this I get sent in to the overflow I'll select my account I get
kicked back to our application the redirect kicks in.
I get sent to slash surveys which is now showing our dashboard component on the screen.
Perfect just what we wanted.
OK.
So that gets us to you know at least kind of stage one of logging the user in successfully when the
user logs in we change the content in the header and we redirect them over to the dashboard component.
Now of course we still have to do a little bit of work on the header to say make sure that a user can
log out and all that kind of good stuff.
So let's continue in the next section and start to kind of wrap up the header here at least from the
authentication standpoint.
So we'll see you in just a second.