Gatsby Authentication with AWS Amplify

Note: this auth starter was adopted from the original starter by dabit3.

This auth starter implements a basic authentication flow for signing up signing in users as well as protected client side routing using AWS Amplify. Auth features:

User sign up
User sign in
Multi-factor Authentication
User sign-out
Password Reset
Error Feedback

Run locally

Create the project

gatsby new new-auth-site https://github.com/ben-siewert/gatsby-starter-auth-aws-amplify

Change into the new directory

cd new-auth-site

Install dependencies

yarn
# or
npm install

Install & configure the AWS Amplify CLI.

npm install -g @aws-amplify/cli

amplify configure

Create a new AWS Amplify Project

amplify init

Here, walk through the following steps:

Enter a name for the project YOURPROJECTNAME
Enter a name for the environment master
Choose your default editor: Visual Studio Code (or your editor of choice)
Choose the type of app that you're building javascript
What javascript framework are you using react
Source Directory Path: src
Distribution Directory Path: public
Build Command: npm run build
Start Command: npm run dev

The CLI will then initialize a project in the cloud.

Add Auth to the Ampliy project it will configure a CloudFormation template that has an Amazon Cognito resource that enables user authentication.

amplify add auth

Here, walk through the following steps:

Default configuration: (recommended)
How do you want users to be able to sign in?: recommended: (Email) or (Email and Phone Number)
Do you want to configure advanced settings?: recommended: (NO, I am done.) or (Yes, I want to make some additional changes)

Finally, Push the updated project configuration to AWS. It will deploy a CloudFormation template that has an Amazon Cognito resource that enables user authentication.

amplify push

Then you can run it by:

gatsby develop

berg-alex/gatsby-starter-auth-aws-amplify

Gatsby Authentication with AWS Amplify

Run locally