Check out a free preview of the full Rapid Development on AWS: React, Node.js & GraphQL course:
The "Adding Authentication to React" Lesson is part of the full, Rapid Development on AWS: React, Node.js & GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Steve uses AWS Amplify to add a login page.

Get Unlimited Access Now

Transcript from the "Adding Authentication to React" Lesson

[00:00:00]
>> Steve Kinney: So we had a problem statement in the very beginning here. [LAUGH] The problem statement is, we wanna make this app real. We wanna persist our mortal enemies in a database where they'll live forever. And so we haven't done any of that yet. So first thing we wanna do is we want to be able to show our client set application, like where to find all of this configuration.

[00:00:24] You can do this anywhere in your application, I'm gonna do this in Index.JS. Index.JS is again that I first start a file, is where this application begins is the very first file loaded when we start up the application. So that seems like a really great place to do some configuration.

[00:00:47] So all we'll do is we'll say, import amplify from this AWS amplify library.
>> Steve Kinney: Cool and so we've brought it in there but we also that can configuration file that was generated for us we need to tell our application, hey can you look at this configuration file. So what we'll do is we'll say Amplify or actually, we'll pull in that configuration.

[00:01:20] We'll say import and you'll call this whatever you want. Import configuration from dot slash AWS export. That file that we looked at before that said do not edit in all capital letters like it was screaming at you. You can, don't edit it but you can totally read it and use it cause it's really important.

[00:01:37] Actually pull it in was import configuration from AWS exports. Cool, so now we have amplified, we have our configuration, we just have to have the two of them meet. So what we'll do is actually say amplify.configure. And we'll give it our configuration.
>> Steve Kinney: Cool and so this is basically, we had a client side app that didn't have a back end.

[00:02:10] We spun up a back end that doesn't really do anything yet. And now we're basically, this is the kind of link between our front end and our backend together. All right, very cool. I wanna talk a little bit about how to turn on and off features in AWS mobile hub.

[00:02:31] So we go back over to our terminal. We can do AWS mobile and you just type features and I actually, kind of, tell you which one's are on and off. So I can turn off analytics for instance and I hit Enter as I, I noticed you turned it off.

[00:02:50] Do you want to disable it? You're right, I do. And it turns it off and now you see the only one you have on is hosting. I can't think of a world where you'd want to turn off hosting. Because eventually you do want to put this application on the Internet.

[00:03:04] I mean, I assume. I guess, maybe if it's some kind of electron application where it's going to be built into the app, you wouldn't need that. But I'm really stretching at this point. Anytime that you make a change to the backend though, like you only made it on your computer, the backend is again, in the cloud which is again someone else's computer, so we do need to tell Amazon that that has changed.

[00:03:30] So do AWS mobile, push. And it says connecting to the back end AWS mobile project is preparing it's updating it and there's pulling down the configuration. So it made a bunch of changes, it pulls down the configuration an effectively changes all those files that I told you not to edit because it's changing and if you start changing them, it's going to blow away your settings.

[00:03:57] Cool, so I'm going to do a git commit wire in basic SWS mobile hub settings. Probably need to do git add first.
>> Steve Kinney: Git commit "Wire in basic AWS Mobile Hub settings". However, I just said that made Siri on my iPad believe that I was talking to her so that's a fun thing.

[00:04:33] Cool and when you look at git status
>> Steve Kinney: We'll push it out, or get log, rather. There, we have the change. And we'll push it right up to git. So if you want to see any of the changes I've made. Other than adding those three lines into index.js, I have not done anything super important yet.

[00:04:54] But this is the kind of major change right now, which is just again, telling the front end about the back end and that everything is in place. So now what I want to do is I want to start off effectively we're gonna have a database and an API but we know that those are bound by user.

[00:05:13] So we need some way to identify specific users first. The very first thing we'll likely set up is we'll set up authentication. Now, the authentication that comes out of the box if you don't give it any custom settings is pretty solid right. You'll actually define a unique identifier to anonymous users so it knows that given an anonymous user moving around your app.

[00:05:36] Which is again useful if using the analytic stuff. Slightly creepy as well, but it's fine. It actually has two factor auth out of the box vis SMS. Where when they sign up it'll send them a text message and every single time they log in, it will also send them a text message.

[00:05:54] Which is really strong but it's also kind of cool to think about the fact that you don't have to wire up any of that. It's not like, let me go get a twillio api and then go send them this thing and so on. It's just like saying, I want authentication, it's like, here's some rock solid authentication, you're like, wow, calm down a little bit here, that's a bit much.

[00:06:14] But, let's take a look at what that looks like. So anytime we want to create a new feature or change one of our backend settings, awsmobilehub. Again, that's kind of like our hook into everything here. And then, if we wanna change a feature, we just kinda give it the name of that feature.

[00:06:32] And again, you can always type in awsmobilehubfeatures or you just awsmobilehub or just AWS mobile, sorry.
>> Steve Kinney: And you can see the features that it supports at this moment. So looks like and we will take a lucky guess which one we need
>> Steve Kinney: Or what you use for sign in or do I just give away the [LAUGH].

[00:06:54] I meant to say authentication and authorization but do user sign-in. There's a quick thing that you need to realize. If you just do aws mobile hub or awsmobile enable, you're gonna get the default settings. Again, with user sign-in, that's not terrible. It's a rock-solid authentication system. There is stuff, though, like the database.

[00:07:19] Or the API layer, or any of these others ones where it's like, listen, I have opinions on what this database looks like. So if you want to be asked a bunch of questions, you can actually type it in --prompt. If you know what you want and you just want the defaults, you don't need to do --prompt, totally fine.

[00:07:37] But if you know that there's a whole bunch of things that I want to configure, we'll do --prompt and it'll basically ask you a bunch of questions and walk you through this.
>> Steve Kinney: Cool, so first question is you want the default settings? Which I guess I could have just not typed --prompt if I really wanted that.

[00:07:56] So go to advanced settings. So incognito is Amazon's Identity service, that's gonna be the one that we use because otherwise we have to go get Facebook or Google sign ins. We have to get API keys and configure all of that, but that effectively would allow you out of the box to be like login with Facebook or login with Google.

[00:08:17] You can do that as well, we're just not going to because I think I've I think I've gone on the Internet and gotten enough secret keys and displayed them all to you, okay? I think I'm gonna call it at this point and stop finding more secret keys to display on the Internet.

[00:08:31] Cool, so we'll do incognito user pools. And then, you can see, okay, how are users going to log in? Email, username, phone number. The phone number is required for a multi-factor authentication. Out of the box we'll also see that like if you do email, it'll actually send you an email with the code.

[00:08:52] Generally speaking, this is probably a pretty good idea. Like it means that whoever uses an email to sign up needs to be in control of that email in order to use it. Generally speaking, this is a good idea. There's a really great piece that came out a month or two ago which is like, for Gmail you can put a dot anywhere in the first part of the email address.

[00:09:10] Right, so like, I could be like, I could put a dot in between my first and last name and it'll still go to the same place. I can put a dot in between every letter, it'll still go to the same place. What somebody found out is that people were signing if a Netflix putting dots and that weren't the right email address and somebody else could like reset the password to their real email address, and basically take over the Netflix accounts, right?

[00:09:32] Now, if they were email the code to that email address, it had to verify it, they could have never got an opposition. So some of these features like, effectively make your authorizations scheme better than Netflix is which is kinda cool, right? So we'll go with the username, is like, let me tell you why emails are great and then pick season and cool.

[00:09:54] And then you can still like a minimum password length. Sure it seems right you can like go out of your way to make your password less secure you are interested? Like you are not gonna have to write the logic for enforcing how a password like rosswork. It's basically, you're just gonna say what you want it to be you can either, we are gonna use the default built in sign on page right which is.

[00:10:19] It's got its rough edges, right? But the idea that you get this all for free and you're getting good practices for free. Because let's be honest, if I was wiring up a webpage, what do you think the first test that I would skimp out on is doing this stuff right.

[00:10:37] Let me tell you how badly, especially if it's like a nights and weekends project, like how badly I wanna spend all of saturday enforcing password roles. I don't, ever. It's never going to happen, right? Also let's say I'm doing this at my job. Let me tell you what my employer would like not to be paying me for stuff that is tried and true, done a thousand times, right?

[00:10:59] Let's leverage this up, and let's focus on the things that make our applications unique and special. This doesn't seem particularly onerous though, so we'll go with it Cool. And you notice we're back on the command line. And if I fire off something of the Github application, you can kinda see.

[00:11:20]
>> Steve Kinney: Not a lot has changed just yet. And so if we look at this, we can see that we have our authentication service. We haven't actually didn't change something again cuz I just remembered I did ignore that entire folder so it's not gonna [LAUGH] we're not gonna say like, hmm, that's strange, and act like it's casually normal, but it's not.

[00:11:37] So let's actually go back into the code. And we can kinda see
>> Steve Kinney: We've got this file here and we've also, if we go in here as well, we can see sign in. That way we've got this idea that sign in is enabled. We're using user pools. We're preferring the user name.

[00:11:55] Multifactor configuration is off. The minimum password length is eight. All right, this is what I was talking about before as your configuration in your infrastructure as code, right? This isn't like somebody tweaked a few buttons. You can do everything via the command line tool or you can just go into the UI and change a bunch of stuff, right?

[00:12:15] But this is kind of cool because all of your basic settings here are kind of codified. And you can kind of tweak them if you need it and that will be deployed as your backend, which is incredibly cool. All right, so here we go and what we need to do next is an AWS mobile push.

[00:12:36] I guess I need not work with VS code,
>> Steve Kinney: Cool and so we're gonna push that back end up.