1 00:00:00,690 --> 00:00:06,420 In the last section we got a high level overview of how a lot is going to be working inside of our application 2 00:00:07,350 --> 00:00:08,000 at this point. 3 00:00:08,010 --> 00:00:12,060 I want to start to talk a little bit more about how we're going to approach this problem. 4 00:00:12,150 --> 00:00:18,480 So we're going to be using a helper library called Passport J.S. to help us create this authentication 5 00:00:18,480 --> 00:00:19,310 flow. 6 00:00:19,440 --> 00:00:24,750 In particular the passport library is going to automatically take care of a couple of different steps 7 00:00:24,750 --> 00:00:25,630 inside of here. 8 00:00:25,770 --> 00:00:31,120 That's going to make our lives just a little bit easier to make sure that it's clear exactly what passport 9 00:00:31,120 --> 00:00:32,610 is going to be doing for us. 10 00:00:32,610 --> 00:00:34,960 I made a little change to this diagram. 11 00:00:35,170 --> 00:00:36,690 So let's take a glance at it. 12 00:00:37,080 --> 00:00:37,600 OK. 13 00:00:37,800 --> 00:00:43,470 So very clearly everything inside this yellow box right here this is essentially what passport is going 14 00:00:43,470 --> 00:00:49,110 to be automating for us or what it's going to be kind of helping us pull off without having to write 15 00:00:49,110 --> 00:00:51,080 a lot of boilerplate code. 16 00:00:53,630 --> 00:00:59,090 Now before we just kind of dive right in and make use of passport there's two big issues around it that 17 00:00:59,120 --> 00:01:02,030 I want to tell you about right now at the very get go. 18 00:01:02,030 --> 00:01:07,120 Now the reason I'm telling you about these two issues around passport is that they are very common complaints 19 00:01:07,330 --> 00:01:09,200 here about passport all the time. 20 00:01:09,320 --> 00:01:14,300 So I can tell you about these two very common complaints so that if we start making use of passport 21 00:01:14,390 --> 00:01:18,380 and you're sitting there thinking like man this passport stuff is just garbage. 22 00:01:18,380 --> 00:01:24,080 I want you to be really aware that you probably are voicing a complaint that many other people have 23 00:01:24,140 --> 00:01:25,180 as well. 24 00:01:25,910 --> 00:01:30,030 So here's the two big things that passport doesn't quite do so well. 25 00:01:30,080 --> 00:01:34,710 First off passport does help us automate this entire flow. 26 00:01:34,850 --> 00:01:40,610 But the issue is that it does require us to kind of reach in to some very specific points in the flow 27 00:01:40,760 --> 00:01:47,870 like let's just imagine like right here and right here and right here it requires us to reach in and 28 00:01:47,870 --> 00:01:51,650 add a little bit of code to make those steps work nicely. 29 00:01:51,680 --> 00:01:52,390 Some of the words. 30 00:01:52,550 --> 00:01:57,790 It automates vast majorities of the flow but not the entire thing. 31 00:01:57,800 --> 00:02:02,270 The reason that's a problem is that sometimes when you're setting up a cloth you get the feeling that 32 00:02:02,300 --> 00:02:07,820 you don't really understand the overall big picture and it feels like you're just kind of adding in 33 00:02:07,820 --> 00:02:13,800 some weird code in some weird places without having a good understanding of how it all fits together. 34 00:02:13,820 --> 00:02:20,210 So as we go through the setup and the passport's setup I will do my darndest to make sure that it's 35 00:02:20,210 --> 00:02:24,660 really clear what every line of code we're adding is doing inside this flow. 36 00:02:24,860 --> 00:02:30,560 But if you ever feel like you really don't have a good sense of the big picture hey that's totally fine. 37 00:02:30,570 --> 00:02:37,010 Again very common complaint something that a lot of people end up saying about passport. 38 00:02:37,020 --> 00:02:42,860 Now the second big issue with passport is just the inherent confusion and how the library is structured. 39 00:02:42,860 --> 00:02:45,420 So let me tell you exactly what I mean by that. 40 00:02:45,530 --> 00:02:50,320 Up to this point inside this video stuff like last minute and a half I've been saying just passport 41 00:02:50,480 --> 00:02:52,390 passport passport over and over again. 42 00:02:52,640 --> 00:02:59,170 But in reality when we make use of passport we are actually installing at least two different libraries. 43 00:02:59,420 --> 00:03:03,960 So let's talk about what those two libraries are OCHA. 44 00:03:04,010 --> 00:03:07,990 So in this diagram it has to kind of like things on it. 45 00:03:08,000 --> 00:03:12,400 We're just focused on the one on the left right now so just ignore the stuff on the right. 46 00:03:12,440 --> 00:03:18,530 So when we make use of passport we are actually installing at least two separate libraries. 47 00:03:18,560 --> 00:03:21,650 The first library is called Just passport that's all. 48 00:03:21,650 --> 00:03:23,660 It's just called passport. 49 00:03:23,930 --> 00:03:31,400 The core passport library or the core passport module is a set of very general functions and objects 50 00:03:31,400 --> 00:03:36,500 and helpers that make authentication work nicely inside of Express. 51 00:03:36,500 --> 00:03:44,540 So some very generic logic that can handle the idea of authentication with Express to actually implement 52 00:03:44,860 --> 00:03:48,020 a authentication flow with a very specific provider. 53 00:03:48,020 --> 00:03:54,290 However when I say provider I mean like specifically authentication with Google or with e-mail password 54 00:03:54,350 --> 00:04:00,770 or with Facebook or get or whoever else we install what are called Passport strategies. 55 00:04:00,770 --> 00:04:06,280 So there's many different strategies out in the world and each individual strategy helps you center 56 00:04:06,380 --> 00:04:11,100 set up authentication with one very specific provider. 57 00:04:11,120 --> 00:04:12,680 So this is a point of confusion. 58 00:04:12,680 --> 00:04:16,370 Number two with passport understanding what you're actually installing. 59 00:04:16,370 --> 00:04:22,760 You always install the base passport module and then you also install at least one passport strategy 60 00:04:23,060 --> 00:04:27,770 that will help you handle authentication with one specific provider. 61 00:04:27,770 --> 00:04:32,960 Now if you want to do multiple types of authentication inside of your application if you want to have 62 00:04:33,560 --> 00:04:38,350 authentication with Google and Facebook and Linked In and Twitter that's totally fine. 63 00:04:38,360 --> 00:04:44,210 It just means that you're going to install four separate strategies and wire all those up inside of 64 00:04:44,210 --> 00:04:48,760 your application as well for our application for our app. 65 00:04:48,800 --> 00:04:50,920 We're only handling sign up with Google. 66 00:04:50,990 --> 00:04:55,220 So we are going to be installing exactly one passport strategy. 67 00:04:55,220 --> 00:04:55,550 OK. 68 00:04:55,580 --> 00:05:01,100 So overall that's the two big complaints or kind of the two big like warning signs I'm going to put 69 00:05:01,100 --> 00:05:06,680 out there for you with passport so Warning Number one is sometimes it feels like we don't have a good 70 00:05:06,680 --> 00:05:12,590 sense of the overall flow of passport and then worrying number two is that we always have to install 71 00:05:12,590 --> 00:05:16,690 at least one of these strategies and hook it up inside of our application. 72 00:05:16,760 --> 00:05:22,040 Now before we close this out very quickly I want to pull out the passport documentation and just let 73 00:05:22,040 --> 00:05:27,380 you take a quick glance at it and I bet you might get a sense of these two complaints of spoken about 74 00:05:28,370 --> 00:05:30,070 inside of here. 75 00:05:30,100 --> 00:05:37,850 So in a new browser tab I'm going to do a search for passport G-S and then we'll click on hopefully 76 00:05:37,850 --> 00:05:41,540 the first link that pops up which is Passport G-S dot org. 77 00:05:43,060 --> 00:05:47,970 Now when you come here you're going to immediately see the word strategies all over the place. 78 00:05:48,010 --> 00:05:51,820 So you see strategies strategies and then scroll down a little bit. 79 00:05:51,820 --> 00:05:55,400 And while the war strategy is just all over the place strategies. 80 00:05:55,450 --> 00:06:02,070 So remember a strategy is a module that helps you authenticate with one very specific provider. 81 00:06:02,090 --> 00:06:06,910 So let's first take a look at the documentation page so you can click on documentation over here and 82 00:06:06,910 --> 00:06:12,690 you get this just kind of like very general basic overview on what passport's doing for you. 83 00:06:12,920 --> 00:06:15,720 You know if you want to feel free to read through this stuff. 84 00:06:15,880 --> 00:06:21,940 But I kind of feel like you will agree with me that it feels like it's not really giving you the overall 85 00:06:21,940 --> 00:06:23,690 picture of what's going on. 86 00:06:23,740 --> 00:06:29,230 You know I don't really see any diagram here that says hey here is like a very broad overview of exactly 87 00:06:29,230 --> 00:06:32,440 what's happening in very straightforward language. 88 00:06:32,440 --> 00:06:37,000 Now the first paragraph on here it does give you like you know some reason the idea of what's going 89 00:06:37,000 --> 00:06:37,180 on. 90 00:06:37,180 --> 00:06:40,900 But again I feel like it's just not super clear. 91 00:06:40,900 --> 00:06:44,090 Now the other thing I want to show you very quickly is the strategy's page. 92 00:06:44,110 --> 00:06:49,650 So if we go to strategies you can see a list of all the different providers or all the different strategies 93 00:06:49,720 --> 00:06:51,320 you can hook up to passports. 94 00:06:51,550 --> 00:06:56,370 So looking through here like here's passports Spotify so doing. 95 00:06:56,470 --> 00:06:58,350 Oh all through Spotify. 96 00:06:58,540 --> 00:07:04,180 So we can click on the strategy and it will take us to a hub repository that gives us some documentation 97 00:07:04,210 --> 00:07:09,280 or some idea of how to handle Passport authentication with Spotify. 98 00:07:09,640 --> 00:07:15,190 And so when we finished this course or when we finish wiring up Passport authentication you absolutely 99 00:07:15,190 --> 00:07:20,980 could come back through and wire the passport Spotify just as easily and then allow your users to sign 100 00:07:20,980 --> 00:07:23,240 up as Spotify as well. 101 00:07:23,260 --> 00:07:29,530 So when we go through the google stuff it's going to be very similar to how Spotify works and how Facebook 102 00:07:29,590 --> 00:07:32,300 and LinkedIn and all these other providers work as well. 103 00:07:32,530 --> 00:07:38,020 So really we're going to focus on this one Google provider and then you in theory should be able to 104 00:07:38,020 --> 00:07:41,700 easily come back and add in other providers if you want to. 105 00:07:42,450 --> 00:07:43,160 Okay. 106 00:07:43,870 --> 00:07:49,000 So I think that's enough talking about passports for this section. 107 00:07:49,210 --> 00:07:54,550 Let's continue into the next section and we're going to install passport and start to wired up inside 108 00:07:54,550 --> 00:07:55,460 of our application. 109 00:07:55,570 --> 00:07:57,580 So I'll see you in just a sec.