1 00:00:00,700 --> 00:00:05,300 I think that we've now got a pretty good idea of how re-act router Dohm works inside of application 2 00:00:05,390 --> 00:00:10,440 and we've also written out a pretty good amount of code to set up some initial idea around navigation. 3 00:00:10,520 --> 00:00:15,080 So we're not going to start to pivot our attention and focus on handling authentication inside of our 4 00:00:15,080 --> 00:00:15,790 app. 5 00:00:15,890 --> 00:00:21,080 In this video we're going to have a general discussion on how we handle authentication in general like 6 00:00:21,080 --> 00:00:25,370 any type of web application and then we will very quickly start to talk about how we're going to work 7 00:00:25,370 --> 00:00:28,940 it specifically into a react and redux application. 8 00:00:29,000 --> 00:00:30,580 So let's get to it. 9 00:00:30,590 --> 00:00:30,950 All right. 10 00:00:30,950 --> 00:00:35,150 So first off the idea here is that inside of her head her we're going to have some button that says 11 00:00:35,150 --> 00:00:38,580 something like log in with Google to handle authentication. 12 00:00:38,630 --> 00:00:42,680 We're going to use Google's off to authentication flow. 13 00:00:42,800 --> 00:00:48,390 I can almost guarantee you that you have gone through a lot flow before in your own experience. 14 00:00:48,530 --> 00:00:53,480 So any time that you ever click on some button like log in with Google or log in with Facebook or logging 15 00:00:53,480 --> 00:01:00,920 into LinkedIn that is you going through a lot 2.00 flow the pinnacle or the very traditional screen 16 00:01:00,920 --> 00:01:03,010 that you see anytime you go through a lot. 17 00:01:03,020 --> 00:01:07,250 Flow is someone window like this over here is something that says hey this application wants to know 18 00:01:07,250 --> 00:01:11,480 your e-mail address or access your profile or whatever else it might be. 19 00:01:11,480 --> 00:01:16,640 And then you as a user can either accept or reject that request. 20 00:01:16,640 --> 00:01:21,170 So in this video we're going to get a better idea of what it really is and how the flow works. 21 00:01:21,170 --> 00:01:22,330 Let's get to it. 22 00:01:22,610 --> 00:01:23,000 All right. 23 00:01:23,000 --> 00:01:29,540 So in many applications that you've used You've probably also seen e-mail and password authentication. 24 00:01:29,540 --> 00:01:35,120 Even Google itself when you sign into Google or Facebook you have to use e-mail and password authentication 25 00:01:35,810 --> 00:01:38,750 with this very classic form about an occasion over here. 26 00:01:38,960 --> 00:01:44,360 We generally store a record inside of some type of database and that record is going to maintain the 27 00:01:44,360 --> 00:01:47,740 user's e-mail address and their encrypted password. 28 00:01:47,790 --> 00:01:52,640 And so with email and password authentication you're essentially inside of your own application or maintaining 29 00:01:52,640 --> 00:01:54,900 a record of who each user is. 30 00:01:54,980 --> 00:02:00,440 And you have some very intricate and detailed information about each and every user and each time that 31 00:02:00,440 --> 00:02:05,570 a user tries to log in with email and password authentication we're essentially going to take and compare 32 00:02:05,630 --> 00:02:09,880 the e-mails entered e-mail and password with whatever is saved inside the database. 33 00:02:10,010 --> 00:02:14,270 And then a user is considered to be logged in to an application whenever they enter the correct email 34 00:02:14,270 --> 00:02:15,370 and password. 35 00:02:15,380 --> 00:02:18,970 So again that is traditional email and password authentication. 36 00:02:18,980 --> 00:02:25,010 So let's kind of compare that kind of easier or more traditional sense of authentication with Olof authentication 37 00:02:25,070 --> 00:02:28,460 which is what you and I are going to use. 38 00:02:28,550 --> 00:02:34,730 So with authentication a user is going to first authenticate with some outside service provider through 39 00:02:34,850 --> 00:02:41,840 email and password authentication means an outside service provider is any provider such as Google or 40 00:02:41,840 --> 00:02:45,340 LinkedIn or Facebook as very popular examples. 41 00:02:45,350 --> 00:02:52,010 Now with this flow we are essentially getting a user to authorize our application to access their information 42 00:02:52,100 --> 00:02:55,790 stored on Google's or LinkedIn or Facebook servers. 43 00:02:55,790 --> 00:03:00,710 So this outside provider is going to essentially tell us some information about this user such as their 44 00:03:00,740 --> 00:03:04,590 email their name or whatever other info you and I request. 45 00:03:04,820 --> 00:03:11,300 So we are really trusting this outside provider quite a bit to identify this user and we are absolutely 46 00:03:11,300 --> 00:03:16,040 trusting this outside provider that they are telling us correct information here. 47 00:03:16,040 --> 00:03:22,070 A good analogy here is to imagine if you are running some type of like lottery operation like lets say 48 00:03:22,070 --> 00:03:26,480 you put a lottery together and someone comes through your door inside of your office and says Hey I 49 00:03:26,480 --> 00:03:28,790 just won the lottery Ive got a winning ticket. 50 00:03:28,880 --> 00:03:32,690 If you are the lottery provider and youre running this lottery chances are the first thing you want 51 00:03:32,690 --> 00:03:36,000 to do is make sure that this person is who they say they are right. 52 00:03:36,050 --> 00:03:41,000 You want to make sure that they are so and so and that they actually won the lottery with that ticket 53 00:03:41,000 --> 00:03:41,810 in hand. 54 00:03:41,930 --> 00:03:47,960 And so you can either kind of take that person's identification like maybe a driver's license or something 55 00:03:47,960 --> 00:03:48,570 like that. 56 00:03:48,710 --> 00:03:54,050 Or if that person has some friend who will vouch for them it would be like you trusting that friend 57 00:03:54,320 --> 00:03:57,770 to say oh yes this person is who they say they are. 58 00:03:57,770 --> 00:04:02,360 So with email and pass TROETH indication that is like you collecting credentials on your own like some 59 00:04:02,360 --> 00:04:04,020 identification for the user. 60 00:04:04,160 --> 00:04:09,650 Whereas with authentication we are essentially trusting some friend of that person saying that they 61 00:04:09,650 --> 00:04:13,070 are who they say they are now with Oh. 62 00:04:13,250 --> 00:04:18,980 It's really a kind of two sided thing that we get with off with email and password authentication this 63 00:04:18,980 --> 00:04:20,690 is solely about authentication. 64 00:04:20,690 --> 00:04:26,510 It is just about identifying a user and associating some information with them or with oh off we actually 65 00:04:26,510 --> 00:04:29,010 get kind of two results out of this flow. 66 00:04:29,240 --> 00:04:34,340 On the one hand we still get that same type of user identification inside of application. 67 00:04:34,340 --> 00:04:39,650 So when the user goes through the flow we get some information that says oh yeah this is Jane Doe and 68 00:04:39,650 --> 00:04:43,640 this is their email address and here is their picture or whatever it is. 69 00:04:43,820 --> 00:04:50,720 But with the flow we also can request access to make actions on behalf of the user through that service 70 00:04:50,720 --> 00:04:51,750 provider. 71 00:04:51,800 --> 00:04:56,570 Now classic examples of that would be like if we put together some application that wanted to manage 72 00:04:56,630 --> 00:05:02,010 a user's e-mail account like maybe filter their emails or try to read their emails. 73 00:05:02,180 --> 00:05:06,660 We would use a lot flow to get access to that user's e-mail account. 74 00:05:06,680 --> 00:05:13,700 So Olaf is not only about authentication it's also about letting our application get access to all that 75 00:05:13,700 --> 00:05:16,700 user's data on some outside service provider. 76 00:05:16,700 --> 00:05:20,160 Now in our case we're only concerned about use case number one here. 77 00:05:20,240 --> 00:05:26,630 We are just making use of oath to identify a user we are not going to use cloth to try to like make 78 00:05:26,630 --> 00:05:31,420 actions on behalf of the user and try to access Google services. 79 00:05:31,500 --> 00:05:32,760 Now on that note on that. 80 00:05:32,760 --> 00:05:33,820 Number two right there. 81 00:05:33,870 --> 00:05:38,340 Very common question that I get is how do you use a watch to do that. 82 00:05:38,340 --> 00:05:43,110 You know how do you actually use this offload to make actions or requests over to Google on behalf of 83 00:05:43,110 --> 00:05:43,870 a user. 84 00:05:44,120 --> 00:05:50,040 Just so you know as a quick side topic here every time that you go through a lot flow its eventually 85 00:05:50,040 --> 00:05:54,600 is going to say something like Hey this Apple wants to know your e-mail access your profile maybe it 86 00:05:54,600 --> 00:06:00,840 will also say read your browser history or access all of your e-mails or whatever else that might be 87 00:06:01,310 --> 00:06:05,190 a list of things that the app wants to do is known as its list of scopes. 88 00:06:05,190 --> 00:06:09,050 A scope is essentially a permission that you are granting to an application. 89 00:06:09,090 --> 00:06:14,060 Now with Google in particular you can get a list of all valid scopes at this address right here. 90 00:06:14,070 --> 00:06:16,920 Now keep in mind google very frequently changes. 91 00:06:16,970 --> 00:06:17,820 You are or else. 92 00:06:17,820 --> 00:06:22,350 So by the time you watch this video this link right here might be broken if that link is broken you 93 00:06:22,350 --> 00:06:26,050 can always do a very simple Google search for something like Google. 94 00:06:26,070 --> 00:06:27,780 Olof I don't know. 95 00:06:27,780 --> 00:06:34,080 Scope list or something like that and you should see something like this right here on Earth 2.0 scopes 96 00:06:34,080 --> 00:06:40,670 for Google API is so on this page is a list of all the different scopes that you can ask for. 97 00:06:40,740 --> 00:06:45,380 And each of these different scopes are going to give you access to a different portion of the users 98 00:06:45,400 --> 00:06:46,360 account. 99 00:06:46,360 --> 00:06:50,590 Now in our case the only thing that you and I really care about is probably going to be like a user's 100 00:06:50,630 --> 00:06:55,990 e-mail just so we can confirm that they are who they say they are and that we have some piece of information 101 00:06:55,990 --> 00:06:57,180 too tied to a user. 102 00:06:57,280 --> 00:07:05,200 So in our application we are probably going to ask for a scope of email somewhere inside of here. 103 00:07:05,240 --> 00:07:07,120 We go. 104 00:07:07,120 --> 00:07:10,060 So here's the list of scopes for Google sign in. 105 00:07:10,270 --> 00:07:16,120 We can ask for a user's e-mail or their profile very easily and get the e-mails or the user's email 106 00:07:16,120 --> 00:07:18,640 address or their basic profile info. 107 00:07:18,640 --> 00:07:25,450 So we would use a scope named profile or email to get access to those two pieces of information if we 108 00:07:25,450 --> 00:07:29,310 had asked for a scope of something like I don't know about this one right year. 109 00:07:29,320 --> 00:07:36,250 So Google API is dot com slash off cloud platform that would allow us to manage the user's data across 110 00:07:36,250 --> 00:07:41,130 all Google Cloud platform services or what have you if we wanted to access their email. 111 00:07:41,170 --> 00:07:44,760 We would probably do a search on this page for Gmail like this right here. 112 00:07:45,130 --> 00:07:49,390 And this is a list of scopes that we could ask for to get access to the user's e-mails so if we ask 113 00:07:49,390 --> 00:07:54,670 for this scope right here then we would get the ability to read compose send in primally deletes all 114 00:07:54,700 --> 00:07:56,150 email from G-mail. 115 00:07:56,210 --> 00:08:01,270 And one thing I would make clear is that this scope is intended to be a string like a string value that 116 00:08:01,270 --> 00:08:04,350 we are going to pass over to Google when we go through the overflow. 117 00:08:04,510 --> 00:08:08,650 The scope even though it looks like a r l is not something that you're going to like add into your address 118 00:08:08,650 --> 00:08:09,260 bar. 119 00:08:09,450 --> 00:08:10,710 Let's talk more about scopes later on. 120 00:08:10,720 --> 00:08:13,100 But like I said this is a very common question I get. 121 00:08:13,150 --> 00:08:18,170 So I just want to very quickly give you a heads up on how you would kind of get access to a user's account. 122 00:08:18,170 --> 00:08:19,190 All right. 123 00:08:19,600 --> 00:08:23,740 So back over here a diagram. 124 00:08:23,870 --> 00:08:28,730 Now if you've ever gone through one of my other courses before I have many courses that make use of 125 00:08:28,760 --> 00:08:34,580 Google off and just about every Google overflow that I show and every single other course makes use 126 00:08:34,700 --> 00:08:38,750 of a wealth for servers in this course for the first time ever. 127 00:08:38,750 --> 00:08:42,370 So if you've gone through all that with me before this time it's going to be a little bit different. 128 00:08:42,410 --> 00:08:48,020 So this is the first I'm going to show you how to do a lot for javascript browser apps or some javascript 129 00:08:48,020 --> 00:08:50,220 code that is running inside the browser. 130 00:08:50,600 --> 00:08:53,360 And so there's a little difference between these two flows right here. 131 00:08:53,360 --> 00:08:54,480 Let's take a quick pause. 132 00:08:54,500 --> 00:08:58,100 When we come back the next section I'll describe the differences between the two and how it's going 133 00:08:58,100 --> 00:09:00,340 to affect how our application is set up. 134 00:09:00,530 --> 00:09:02,290 So quick break and I'll see you in just a minute.