1
00:00:00,560 --> 00:00:06,060
In the last section we did an overview of the passport J.S. library and we got a sort of sense of how

2
00:00:06,060 --> 00:00:11,220
it might help us out with authentication with Google inside of our out in this section.

3
00:00:11,220 --> 00:00:17,560
We're now going to continue by installing passport and installing the passport Google law strategy.

4
00:00:17,850 --> 00:00:22,410
We'll then start to wire them up inside of our application and we'll get a better sense of exactly how

5
00:00:22,410 --> 00:00:23,670
they work.

6
00:00:23,670 --> 00:00:30,720
So to start off we're going to make sure that we install passports into our project.

7
00:00:30,820 --> 00:00:36,000
Now we're going to install many different modules into our project over time every single time we do.

8
00:00:36,000 --> 00:00:41,510
We're always going to be using the command line and we'll be making use of the NPM package manager.

9
00:00:41,580 --> 00:00:48,900
So inside of my server directory I'm going to run the command NPM install dash dash save passport.

10
00:00:49,110 --> 00:00:54,370
So that's our base passport module member that's the generic set of helpers that makes passport work

11
00:00:54,370 --> 00:00:55,540
well with Express.

12
00:00:55,770 --> 00:01:05,110
And then we're also going to install one strategy called Passport dash Google dash off 20.

13
00:01:05,460 --> 00:01:12,000
Now you see the 20 on here you might be kind of scratching your head and saying did he mean to say 20.

14
00:01:12,000 --> 00:01:13,210
And yes I did.

15
00:01:13,320 --> 00:01:17,840
Make sure you put passport google oh off 20 like so.

16
00:01:18,150 --> 00:01:20,000
So let's install this.

17
00:01:20,040 --> 00:01:24,330
Hit enter let it do its thing and while that runs I'm going to tell you a little bit about why we're

18
00:01:24,330 --> 00:01:28,290
using this last 20 thing really quickly because you might be curious.

19
00:01:29,100 --> 00:01:34,470
If I change back over to the passport documentation which I still have open I'm going to open up the

20
00:01:34,470 --> 00:01:38,030
strategy section and I'll search for Google.

21
00:01:38,310 --> 00:01:43,080
Now when I do that you're going to see on here Google off authentication strategy over here.

22
00:01:43,140 --> 00:01:45,190
And so that kind of seems more relevant.

23
00:01:45,360 --> 00:01:48,410
And the name of that library is Passport Google off.

24
00:01:48,600 --> 00:01:51,870
I encourage you to click on the saying or just follow along.

25
00:01:51,870 --> 00:01:53,320
It really doesn't matter.

26
00:01:54,120 --> 00:01:57,880
And once you get here you'll go to the get hub page around this module.

27
00:01:57,900 --> 00:02:01,670
If you scroll down a little bit you'll notice this first paragraph right here.

28
00:02:01,800 --> 00:02:08,550
This paragraph essentially says that the passport Google module only works or only exists for backwards

29
00:02:08,550 --> 00:02:15,330
compatibility and it actually recommends that you use either the passport Google Auth. one or a passport

30
00:02:15,370 --> 00:02:17,040
Google allow 20 modules.

31
00:02:17,040 --> 00:02:19,140
And so that's why we were using about 20.

32
00:02:19,530 --> 00:02:24,850
So we can click on this 20 link right here and then we'll get some documentation around to how to set

33
00:02:24,850 --> 00:02:29,340
up this strategy inside of our application.

34
00:02:29,340 --> 00:02:33,600
And so if you want to you can read a little bit about usage down here but believe me we're going to

35
00:02:33,600 --> 00:02:38,220
go through all these different steps and great great detail.

36
00:02:38,220 --> 00:02:41,360
Now just in case you're curious why is it called 0.20.

37
00:02:41,550 --> 00:02:45,630
Well 20 is short for 2.00 or aloft 2.0.

38
00:02:45,990 --> 00:02:50,340
You can't put dots inside of NPM module named names.

39
00:02:50,370 --> 00:02:56,460
And so the library author decided to say or 20 instead of just like a watch 2 or something like that.

40
00:02:56,730 --> 00:02:59,180
Anyways we've now got them all off.

41
00:02:59,200 --> 00:03:00,930
Insall inside of our application.

42
00:03:01,170 --> 00:03:06,020
So let's change back over to our code editor and start to put this thing together.

43
00:03:06,210 --> 00:03:10,410
Now I'm going to tell you that for this very first authentication feature that we're going to work on

44
00:03:10,800 --> 00:03:16,570
we're going to just go ahead and place all of our code directly into his index file.

45
00:03:16,590 --> 00:03:21,770
So we've got one single location where we can see all of this authentication logic.

46
00:03:22,080 --> 00:03:27,750
But as soon as we finish this feature or maybe even when we get like halfway through it we're going

47
00:03:27,750 --> 00:03:34,040
to very quickly come back and refactor this file into several separate files inside of our codebase.

48
00:03:34,150 --> 00:03:40,380
OK so first feature everything inside of indexed J.S. and then we're going to very quickly refactor

49
00:03:40,380 --> 00:03:41,430
everything.

50
00:03:42,000 --> 00:03:42,310
OK.

51
00:03:42,330 --> 00:03:43,670
So let's get to it.

52
00:03:43,710 --> 00:03:48,240
The first thing to do is remove the existing route handler that we had set up previously.

53
00:03:48,240 --> 00:03:50,530
So the apt get forward slash.

54
00:03:50,580 --> 00:03:53,380
That was really just a test route and we don't really need it anymore.

55
00:03:53,520 --> 00:03:55,340
So I was going to delete it altogether.

56
00:03:55,860 --> 00:04:03,720
Next I'm going to require in two separate modules right underneath the require express statement.

57
00:04:03,750 --> 00:04:10,680
I'm going to first require in passports so I'll say require passport and I'll assign it to the variable

58
00:04:10,680 --> 00:04:17,520
of passport and then I'm going to also import or require in the strategy that we just installed as well.

59
00:04:17,970 --> 00:04:25,650
So I'll say Konst Google strategy is require passport Google.

60
00:04:25,800 --> 00:04:34,330
Make sure we get to ASSS their passport Google along with 20 lifeso.

61
00:04:34,570 --> 00:04:40,390
Now the passport Google 0.20 module actually exports a couple of different properties and we only care

62
00:04:40,390 --> 00:04:45,110
about one very particular property which is the strategy property.

63
00:04:45,130 --> 00:04:50,720
So we're going to add on Dot strategy and to the end like some OK.

64
00:04:50,960 --> 00:04:56,840
So we now have passports which remember give's express the idea of how to handle authentication and

65
00:04:56,840 --> 00:05:03,620
then the Google strategy which we use to instruct passport on exactly how to authenticate our users

66
00:05:04,010 --> 00:05:07,230
with Google Earth OK.

67
00:05:07,280 --> 00:05:09,350
So now we've got these two in here.

68
00:05:09,590 --> 00:05:16,880
We're going to take our passport library and we're going to inform it or tell it that it should understand

69
00:05:16,910 --> 00:05:20,720
how to make use of the Google strategy inside of our application.

70
00:05:21,080 --> 00:05:28,790
So underneath our app declaration right here we're going to say passport dot use that's a function.

71
00:05:28,800 --> 00:05:36,260
So we're going to put down our parentheses and then we're going to put down new Google strategy and

72
00:05:36,260 --> 00:05:38,670
put a set of parentheses after that as well.

73
00:05:39,170 --> 00:05:39,390
OK.

74
00:05:39,410 --> 00:05:43,650
So already we've got some kind of weird looking code right here.

75
00:05:43,690 --> 00:05:50,210
Let's start with what's going on inside of the function call new Google strategy creates a new instance

76
00:05:50,360 --> 00:05:53,100
of the Google passport strategy.

77
00:05:53,120 --> 00:05:59,420
So this essentially says hey application I want to somehow be able to authenticate my users with Google

78
00:06:00,050 --> 00:06:06,170
and inside of this function right here inside of this constructor we're going to pass in some configuration

79
00:06:06,350 --> 00:06:11,400
that tells this Google's strategy how to authenticate users inside of our application.

80
00:06:11,570 --> 00:06:17,030
And all very shortly see exactly what options and what configuration we pass in here to configure it

81
00:06:17,030 --> 00:06:22,220
for our out before we get there however I want to talk about the other function call that we just put

82
00:06:22,220 --> 00:06:25,490
in of passport Daut use.

83
00:06:25,610 --> 00:06:33,500
So passport use you can think of as kind of like a generic register something to say hey passport you

84
00:06:33,500 --> 00:06:38,870
know how to handle authentication in general but you don't really know how to authenticate users with

85
00:06:38,870 --> 00:06:43,010
a very specific service or a very specific provider.

86
00:06:43,010 --> 00:06:49,790
So you can think of passport use as saying passport I want you to be aware that there is a new strategy

87
00:06:49,790 --> 00:06:52,470
available and here it is make use of it.

88
00:06:52,610 --> 00:06:57,920
Understand that users can use this to authenticate themselves inside of our application.

89
00:06:59,280 --> 00:07:00,070
OK.

90
00:07:00,260 --> 00:07:01,760
So I think that's enough right now.

91
00:07:01,790 --> 00:07:02,870
Let's take a quick break.

92
00:07:02,870 --> 00:07:08,780
When we come back we're going to add in some additional number of options to this Google strategy to

93
00:07:08,780 --> 00:07:12,770
customize exactly how it behaves inside of our application.

94
00:07:12,770 --> 00:07:15,660
So let's take a quick break and I'll see you in one second.