1
00:00:00,470 --> 00:00:04,590
Our head or component is now showing the correct text depending on whether or not the user is currently

2
00:00:04,590 --> 00:00:05,530
signed in.

3
00:00:05,550 --> 00:00:08,760
The only problem is that if we are signed out for a logged out.

4
00:00:08,790 --> 00:00:12,030
So between last section and this one I just made sure that I logged out.

5
00:00:12,330 --> 00:00:17,700
If I now click on logging in with Google I go through the flow but just as we've been seeing throughout

6
00:00:17,700 --> 00:00:22,330
the entire course we get presented with this nasty looking error message on the screen.

7
00:00:22,560 --> 00:00:24,930
So in this section we're going to figure out why we're seeing this.

8
00:00:24,960 --> 00:00:27,030
We're going to figure out how to fix it up.

9
00:00:27,210 --> 00:00:32,550
Now as we work on this and as we fix it this is all stuff that is very closely related to the back end

10
00:00:32,550 --> 00:00:38,250
of our application and you will recall that I said very recently that we're going to try to isolate

11
00:00:38,310 --> 00:00:40,550
either working on the back end or the front end.

12
00:00:40,560 --> 00:00:44,850
So hopefully this is going to be a rare occurrence in this course where we jump very quickly from the

13
00:00:44,850 --> 00:00:46,040
front end to the back end.

14
00:00:46,050 --> 00:00:47,600
And then again to the front end.

15
00:00:47,850 --> 00:00:50,160
So hopefully we won't do it too often.

16
00:00:51,030 --> 00:00:58,170
So to understand why we're seeing this air I first want to open up our server routes file where we define

17
00:00:58,350 --> 00:01:01,410
the route of off Google callback.

18
00:01:01,440 --> 00:01:09,080
So inside my code editor I need to find my route's directory which remember is in our top level directory.

19
00:01:09,090 --> 00:01:13,200
So here's route's right here and I'm going to open up all throughout Scott J.S..

20
00:01:13,560 --> 00:01:15,040
Now one of the routes inside of here.

21
00:01:15,210 --> 00:01:20,580
Basically the second one we defined was off Google Colback right here.

22
00:01:20,790 --> 00:01:25,170
Whenever a user came to this route and remember this is the same route that we are visiting right now

23
00:01:25,170 --> 00:01:27,000
that generates this error message.

24
00:01:27,000 --> 00:01:28,670
We are redirecting the user.

25
00:01:28,710 --> 00:01:35,070
We are kind of passing control of the user would be the best thing to say here off to the passport authenticate

26
00:01:35,070 --> 00:01:36,030
function right here.

27
00:01:37,840 --> 00:01:43,540
Now if you listen to the optional lectures a little bit ago where we covered a lot of extra topic we

28
00:01:43,540 --> 00:01:47,620
spoke a lot about how we wired up middleware inside of our application.

29
00:01:47,660 --> 00:01:49,970
And so if you recall from that optional lecture.

30
00:01:49,990 --> 00:01:52,700
So again if you skip the lecture you may have not heard it.

31
00:01:52,720 --> 00:01:57,910
We spoke about how the cookie session passport in initialize and passport's Session right here were

32
00:01:57,940 --> 00:02:01,690
all instances of middleware that we wired up to our application.

33
00:02:01,870 --> 00:02:07,870
And the purpose of middleware was to add a little bit of code that could intercept an incoming request

34
00:02:08,110 --> 00:02:11,110
and modify it or change it in some fashion.

35
00:02:11,110 --> 00:02:16,150
Now when we spoke about middleware we had said that these three middleware right here would intercept

36
00:02:16,360 --> 00:02:23,440
every incoming request but we had also said that middleware could be only instructed to look at single

37
00:02:23,500 --> 00:02:29,550
individual requests as well like requests to very individual or specific route handlers.

38
00:02:29,890 --> 00:02:36,970
So if we go back over to our auth routes file with this off Google callback right here passport authenticate

39
00:02:37,180 --> 00:02:40,760
of Google right here is actually a middleware.

40
00:02:41,050 --> 00:02:47,590
It is a function that takes the incoming request it further authenticates the user in this case remember

41
00:02:47,590 --> 00:02:53,480
it takes the code out of the L and then goes and fetches the user's profile and then it calls our call

42
00:02:53,480 --> 00:02:55,240
back in the Google strategy.

43
00:02:55,240 --> 00:02:58,330
After all that Google authentication stuff is finished.

44
00:02:58,330 --> 00:03:02,600
It then passes the request on to the next middleware.

45
00:03:02,620 --> 00:03:06,850
Inside the flow the next middleware in the chain for this request handler.

46
00:03:07,060 --> 00:03:13,000
But in this case we have not actually specified what this thing should do after the passport authenticate

47
00:03:13,000 --> 00:03:14,850
middleware has been executed.

48
00:03:14,860 --> 00:03:20,860
So right now this is executing and finishes up and then it says basically OK I have no idea what to

49
00:03:20,860 --> 00:03:22,280
do with this request now.

50
00:03:22,360 --> 00:03:23,770
I have no idea how to handle it.

51
00:03:23,890 --> 00:03:29,150
So I guess I'm just going to report that you can't get this route.

52
00:03:29,180 --> 00:03:30,950
Like basically something went wrong.

53
00:03:30,980 --> 00:03:36,920
I've got no code to handle requests to slash Google slash callback so to get our application working

54
00:03:37,250 --> 00:03:43,670
we need to add on another request handler in the old chain right here or another route handler to this

55
00:03:43,940 --> 00:03:45,250
existing one right here.

56
00:03:45,440 --> 00:03:50,710
That's going to say after we are all done with a passport authenticate call then pass the request on

57
00:03:50,710 --> 00:03:52,700
to this next little step.

58
00:03:52,700 --> 00:04:01,730
So let's do that right now and then we'll get the entire log in process working so the first thing we're

59
00:04:01,730 --> 00:04:06,560
going to do is going to be to put in a couple of new lines here to make this line a little bit more

60
00:04:06,560 --> 00:04:07,360
legible.

61
00:04:07,640 --> 00:04:11,590
So I'm going to do New Line New Line and new line like so.

62
00:04:11,960 --> 00:04:17,990
And then after a passport authenticate I'm going out in another comma and then immediately after that

63
00:04:18,050 --> 00:04:23,700
I'm going to put in an arrow function which will be where the request is sent to after this passport

64
00:04:23,720 --> 00:04:31,910
authenticate middleware is executed this function will be called with rock rez and then we will add

65
00:04:31,910 --> 00:04:38,810
in an arrow function like so then inside if your whenever a request comes to this function right here

66
00:04:39,020 --> 00:04:44,820
we are going to redirect whoever's making the request off to some other route inside of our application.

67
00:04:44,840 --> 00:04:50,450
And so when I say redirect I want us to be thinking about well after the user successfully authenticates

68
00:04:50,450 --> 00:04:54,470
through Google where do we really want to send them to inside of our application.

69
00:04:54,470 --> 00:04:57,080
And what do we really want to do with this request.

70
00:04:57,080 --> 00:05:02,240
Well I think that we could very easily make the case to say after you successfully log in we really

71
00:05:02,240 --> 00:05:06,040
want to dump you at this dashboard screen right here.

72
00:05:06,040 --> 00:05:07,010
I mean you just signed in.

73
00:05:07,040 --> 00:05:12,290
I now want you to see a list of all the different surveys and whatnot that you have created over time.

74
00:05:12,560 --> 00:05:19,520
So after user signs and I really want to redirect them to the route of slash service so to do that inside

75
00:05:19,520 --> 00:05:21,570
the body this function will say rez dog.

76
00:05:21,590 --> 00:05:26,630
Redirect slash surveys like so.

77
00:05:27,590 --> 00:05:27,930
OK.

78
00:05:27,950 --> 00:05:29,610
So the response object right here.

79
00:05:29,620 --> 00:05:36,050
Remember that is what red stands for it stands for response has a function attached to it called redirect.

80
00:05:36,050 --> 00:05:41,870
This redirect function responds back to the browser and says oh hey I'm so glad you came here but I

81
00:05:41,870 --> 00:05:43,620
don't actually want to deal with you anymore.

82
00:05:43,670 --> 00:05:45,710
I don't want to deal with your request.

83
00:05:45,800 --> 00:05:50,470
I have this other route handler inside of our application that cares way more about you.

84
00:05:50,480 --> 00:05:56,090
So I want you to just go over to this other route of slash surveys instead and that thing will figure

85
00:05:56,090 --> 00:05:58,610
out exactly what to do with you.

86
00:05:58,670 --> 00:06:04,190
So to go through this flow one more time after the user comes back from the flow passport middleware

87
00:06:04,190 --> 00:06:05,240
takes over right here.

88
00:06:05,270 --> 00:06:11,320
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

89
00:06:11,330 --> 00:06:13,890
chain which is going to be this air of function.

90
00:06:13,910 --> 00:06:19,490
We take the request in and we tell the response to inform the browser that it needs to go to this other

91
00:06:19,490 --> 00:06:21,890
route OK.

92
00:06:22,220 --> 00:06:23,990
So let's test this out inside the browser.

93
00:06:23,990 --> 00:06:26,500
Now I'm going to flip back over.

94
00:06:26,510 --> 00:06:28,540
I'm going to make sure that I am still logged out.

95
00:06:28,640 --> 00:06:34,290
So over at localhost 5 0 0 0 0 an API slash log out of a tab open at this route.

96
00:06:34,460 --> 00:06:35,640
I can just refresh it.

97
00:06:35,810 --> 00:06:37,380
And that will leave me now the application.

98
00:06:37,460 --> 00:06:39,810
So I'm now definitely logged out.

99
00:06:40,040 --> 00:06:47,420
Now back at our re-act application I will navigate to localhost 3000 and I again see the log in with

100
00:06:47,420 --> 00:06:53,600
Google button on the screen if I click this I get sent in to the overflow I'll select my account I get

101
00:06:53,600 --> 00:06:56,660
kicked back to our application the redirect kicks in.

102
00:06:56,660 --> 00:07:02,280
I get sent to slash surveys which is now showing our dashboard component on the screen.

103
00:07:02,300 --> 00:07:04,450
Perfect just what we wanted.

104
00:07:04,820 --> 00:07:05,210
OK.

105
00:07:05,240 --> 00:07:11,270
So that gets us to you know at least kind of stage one of logging the user in successfully when the

106
00:07:11,270 --> 00:07:18,020
user logs in we change the content in the header and we redirect them over to the dashboard component.

107
00:07:18,020 --> 00:07:22,010
Now of course we still have to do a little bit of work on the header to say make sure that a user can

108
00:07:22,010 --> 00:07:23,640
log out and all that kind of good stuff.

109
00:07:23,810 --> 00:07:29,060
So let's continue in the next section and start to kind of wrap up the header here at least from the

110
00:07:29,090 --> 00:07:30,770
authentication standpoint.

111
00:07:30,770 --> 00:07:32,260
So we'll see you in just a second.