JayHill
4 min readOct 3, 2022

--

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:

  1. 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…

--

--

JayHill

Information Security Research 🧿💻