Use withAuthenticator to Create a Sign-In UI

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.