How to build a NextJS app Built & Deployed Using Google SSO, & AWS Amplify
This is a customized authentication flow using, tailwinds CSS AWS amplify, Next.js and Amazon Cognito for our authentication
Amazon amplify allows for a couple different types of auth flows, you can sign up with email / text /google, as well as setup MFA .
Lastly we will then get the clients information on the server using api route
First I created the next js app running the following:
- npx create-next-app next-tailwind-auth
2. Add needed dependencies for the project: https://v2.tailwindcss.com/docs/guides/nextjs
yarn add aws-amplify tailwindcss@latest postcss@latest autoprefixer@latest
run:
output:
3. After installing remaining dependencies needed above, I created tailwindcss configuration files.
Run the following: npx tailwindcss init -p
4. Next we are going to reference the CSS we will be using. We do that by going to the styles/globals.css and editing that file with the following
@tailwind base;
@tailwind components;
@tailwind utilities;
5. After changing globals.css files. We next will get started with AWS Amplify.
6. I ran into some bugs while installing amplify cli onto my Mac. I ended up running this command: sudo npm install -g @aws-amplify/cli — unsafe-perm=true an it worked.
7. Next after installing the aws amplify cli correctly I had to config
8. While completing this step aws.amazon will pop open your browser and you will be asked to sign in and complete…
