Use withAuthenticator to Create a Sign-In UI

Ali Spittel
InstructorAli Spittel

Share this video with your friends

Send Tweet
Published a year ago
Updated a year ago

We can now create a simple sign-in page for our users to be able to sign in to our application. AWS Amplify makes this super easy. We are just going to create a SignIn function that displays a simple <h1> and import withAuthenticator from aws-amplify. We will use that higher-order component to wrap our default export. This will use AWS Amplify's default UI for our user sign-in function.

Instructor: [0:00] We've enabled sign in on the backend. We deploy that through the Amplify admin UI, but we now need to add sign in to our frontend so that we can make sure that a user is who they say they are.

[0:12] I'll create a new page and call it signin.js. I'll create a function-based component to sign in. I'll also export that as a default. I'll return a header with a "hello" in it. I'll also add a link back to the home page. I'll use the next/link component.

[0:43] I'll need to add a wrapper around these elements. I'll go to my index.js now and clear out all the defaults that are returned from here. I'll delete this image import. You can import that link component. Here I'll link to the sign-in page. Now I'll run my next development server to test this all out.

[1:22] My home page links to the sign-in page, which right now it says hello and has a link to the home. On this page, we want the user to be able to sign in. We'll import the withAuthenticator component from AWS Amplify. WithAuthenticator is the higher-order React component.

[1:42] We'll wrap it around the export. You'll see that on this page you're able to sign in to your account if you have one. You're also able to reset your password or create account if you don't have one yet. I'll fill it out with my information and then create an account.

[1:57] In my email, I've gotten a forgot password code and I'll use that confirmation code to sign up. You can change this email text in the AWS Console and now you'll see that I am signed in.

[2:11] We've created a sign-in page and we've used the withAuthenticator higher-order component to add an authentication system to our frontend. Now we can check to make sure that users are who they say they are.