Rapid Development on AWS: React, Node.js & GraphQL Adding Amplify withAuthenticator into React

Transcript from the "Adding Amplify withAuthenticator into React" Lesson

[00:00:00]
>> Steve Kinney: So I did make some changes, so I wanna do an awsmobile pull, which again, cuz we made changes, not pill, pull.
>> Steve Kinney: It's gonna pull down our changes,
>> Steve Kinney: Into our application.
>> Steve Kinney: All right, now we've played around with some of the configuration. Time to actually add authentication to our application.

[00:00:27] Those are all words that are really fun to say in consecutive order. So we'll pull it up in code.
>> Steve Kinney: And again, forms are the best thing ever to do in client side applications. Stuff like radio buttons all of a sudden are hard and fun again. We're going to basically not do that.

[00:00:48] So for some of these things, AWS Amplified React provides a bunch of components that we can use. It provides an authenticator component, it also provides us higher order component called withAuthenticator. withAuthenticator wraps another component and basically provides an authenticator until they've signed in. And it handles all the state of where they are in that sign-in process.

[00:01:13] We've talked before that there can be two-factor, also. Okay, they've signed in, now we're waiting for the code. Or they've signed out but now we're waiting for confirmation. So on and so forth and what it does is it handles all of that state. Now, amplify provides the kind of primitive methods for you to wire all this off yourself by hand.

[00:01:31] And you can totally do that if you have a custom flow that you're looking to do. Also, for the authenticator component, if you don't like the way that it looks, you can theme it. We're not going to because watching me do CSS live is not worth it. But you can actually pass in even in-line styles as well, either way.

[00:01:50] So we're actually gonna pull that withAuthenticator higher order component in. And what we'll do is kind of the simplest thing for now. We'll wrap the entire application in our authenticator, basically being like, you either see a login page or you see the application. Now, if for instance, some applications have a certain amount of public data, we're not gonna go into that level of depth.

[00:02:14] This is a very private application, and it's an all or nothing affair in this case. And so in our application.js, that is the kind of root component of our client side application. We're gonna pull in the withAuthenticator component up at the top. And so we can basically say import, with curly braces, {withAuthenticator} from 'aws-amplify-react'.

[00:02:42] aws-amplify is generic JavaScript methods. If it's a React component that we're looking to use, it will be in the aws-amplify-react library. The curly braces are there's obviously more than one component in this library. So this is saying, like, of all the components, get me the withAuthenticator component. So we can pull that into our code base.

[00:03:07] Pulling it in is half the battle. The next thing we need to do is use it. Now a higher order component just basically wraps a kinda more traditional component in React. And we've decided that our application's an all or nothing affair. So what we wanna do is we wanna wrap the application component.

[00:03:24] This is where we're defining the application component. And the only thing we do in this file at the very end, all the way at the bottom,
>> Steve Kinney: Is we export it. Now we could use in the index file, we could also just wrap it right here. We're gonna say, hey instead of exporting the Application component, what I'd like you to do is,

[00:03:50]
>> Steve Kinney: I would love for you to export the Application component wrapped with the authenticator, right? So this is gonna handle, if they're logged in, they're gonna see the Application component. If they're not logged in, they are gonna see the authenticator, right? And it would be able to know whether or not it should show them the log in or if to show them the Application component.

[00:04:15]
>> Steve Kinney: Cool, so I'm gonna take that, and I'm going to just really quickly commit it.
>> Steve Kinney: Add withAuthenticator,
>> Steve Kinney: Nope.
>> Steve Kinney: Extra colon, that's fine. It'll push that out. All right, cool, let's actually now take it for a spin. So yarn start or npm start,
>> Steve Kinney: And where before, we saw our grudge bin application, we're gonna see something slightly different this time.

[00:04:52] We're gonna see this gorgeous sign-in component, right? This is our withAuthenticator, we're not signed in cuz we just added it. We haven't had the opportunity to sign in or sign out yet. We just added it, and once we are authenticated, then we'll be presented with the application. Now again, if you're using React router, there might be all sorts of fancy stuff that you wanna do custom.

[00:05:16] You can customize all of this. But just to get us started, let's use the one that's built in. And there's a whole bunch of functionality here that is not glamorous to work with, right, like forgot password. It seems like table stakes for an application, but also kind of not trivial if you're writing it yourself, either, right?

[00:05:38] And so this allows us to use that infrastructure to build applications and not worry about those problems with definite known solutions, but also still tedious to implement ourselves. So go ahead and sign out. And it's asking you all these questions. I'm pretty sure I can get away with a slightly reduced list of them at this point.

[00:05:57] I'll put in my bank password, password123. Let's try to sign up. I need an email as well.
>> Steve Kinney: Fun fact, you get error messages, right? It's already validating the space and the schema, I don't have to implement this myself. I don't like to do this stuff. Cool, and it sent me a code, and I'm just gonna pull that up real quick.

[00:06:25] I'll run this screen, and I've got a verification code that I can bring on over. And I can confirm, so then I can actually log in.
>> Steve Kinney: Cool, and then I am in the app.