Add User Authentication with Amazon Cognito

[qisforq]

Objective:

Implement user authentication in the Next.js application using Amazon Cognito to secure user access and provide login/signup functionality.

Prerequisites:

• [x] Create an Amazon Cognito User Pool using the Amplify CLI tool
• [x] Setup Google OAuth
• [ ] Setup Facebook OAuth
• [ ] Setup Apple OAuth

Tasks:

1. Configure Amplify in the Next.js application

   • [x] Initialize Amplify in the Next.js project
   • [x] Configure Amplify with the AWS Region, Cognito User Pool ID, and App Client ID
   • [x] Set up Amplify authentication with the desired configuration (e.g., enable email verification)

2. Implement user registration (dependent on #217 )

   • [x] Create a registration form component in the Next.js application
   • [x] Handle form submission and call the Amplify Auth.signUp method to register users
   • [ ] Display success or error messages based on the registration result

3. Implement user confirmation

   • [x] Create a confirmation form component in the Next.js application
   • [x] Handle form submission and call the Amplify Auth.confirmSignUp method to confirm user registration
   • [x] Display success or error messages based on the confirmation result

4. Implement user login

   • [x] Create a login form component in the Next.js application
   • [x] Handle form submission and call the Amplify Auth.signIn method to authenticate users
   • [x] Display success or error messages based on the login result
   • [x] Store the authenticated user's session or token securely

5. Implement user logout

   • [x] Create a logout button or link in the Next.js application
   • [x] Handle logout action and call the Amplify Auth.signOut method to log out users
   • [x] Clear any stored user session or token
   • [x] Redirect the user to the login page or any other appropriate page

6. Secure protected routes

   • [x] Identify the routes or pages in the Next.js application that require authentication
   • [x] Implement route guards or higher-order components to check the user's authentication status
   • [x] Redirect unauthenticated users to the login page when accessing protected routes

[qisforq]

https://docs.amplify.aws/nextjs/

[chef-louis]

Okay, file and folder structure are relatively organized now and sign-up, sign-in and sign-out flows are working as expected.

Still some key items left to finish

• [x] Test MFA functionality
• [x] Read in Name field for the user instead of "email" or "Google username"
• [x] Write user information and IDs to postgres database for user management (ie. card permissions, notification preferences, etc.). Changed this to write the user's email and name to the postgres DB as we only need one unique identifier (ie. email is sufficient)