AWS Amplify Gen2 Authentication

Some times the guides does not help much and something is missing to make thinks work. In this case, this guide will help setting up a new project in AWS Amplify with Cognito Authentication.

There we go with the required steps:

1. Create a GitHub or CodeCommit repo.
2. Create a React App, in my case I'm using Vite.

npm create vite@latest my-app-name
npm install    

1. Add amplify to the new React app

npm create amplify@latest

1. Commit the changes to master/main branch

2. Create Amplify app in the AWS Console, select your repository and the master/main branch.

3. Once the deployment has been completed, download the file amplify_outputs.json and put it on the root of your project.

4. Add the authentication component, it can be found here: https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/

And that's it, now you can use Cognito authentication in your React app. I spent some time struggling with backend deployment on Amplify but it was because I didn't follow the correct order on this steps, we need first to add the Amplify files (step 3) and then deploy the app (step 5), otherwise the backend deployment will not be there.

See you in a next post!