Authentication with Amplify

1. Open the amplify/auth/resource.ts file and replace its content with the code below to configure authentication for the application:

import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
  userAttributes: {
    preferredUsername: {
      mutable: true,
      required: false,
    },
  },
});

• loginWith.email: users sign up and sign in with their email.
• preferredUsername: the Cognito preferred_username attribute, used to store the user’s display name.

2. Run the following command in the root folder of the project to deploy the backend to AWS:

npx ampx sandbox

• Wait until the terminal shows Deployment completed and File written: amplify_outputs.json. The first deployment takes about 2 - 3 minutes.
• The amplify_outputs.json file is created in the root folder of the project. This file contains the User Pool, User Pool Client and Identity Pool information that the application uses to connect to Amazon Cognito.
• Keep this terminal running. The sandbox keeps watching the amplify folder and automatically redeploys every time you save a file.

3. Open the CloudFormation console to check if the stack has been created.

• Select the stack whose name starts with amplify-fcajdms- and ends with -sandbox-…. This stack has a nested stack for the auth part.
• Open the auth nested stack, select the Resources tab, then click the Physical ID of AWS::Cognito::UserPool to open the Cognito User Pool console.

4. Open a second terminal in the root folder of the project, run the following command to start the application: npm run dev

• Open http://localhost:3000
• Click Sign up to register a new account.

5. Enter the user information:

• Display name (Display name), for example: admin
• Enter your email.
• Password, for example: Admin@123
• Click Sign up

6. Go back to the Cognito User Pool console, select User management -> Users in the left menu. You will see a registered user with the Unconfirmed status.

7. Open your email to get the confirmation code that was sent automatically.

8. Enter the confirmation code in the application, then click Submit

9. Go back to the Cognito User Pool console and click the Refresh icon. You will see the user with the Confirmed status.

10. Sign in to the application with the email and password you just registered.

11. You have signed in successfully. The Home page shows your display name.

12. Select My Profile in the left menu, then click Update profile

13. Enter the old password, the new password and confirm the new password. Then click Update

14. Click OK

15. Click Sign out to sign out

16. Click Sign in to sign in again. Enter the email and the new password, then click Sign in

17. You have signed in successfully with the new password.