Gatsby Auth Starter AWS Amplify

Gatsby Auth Starter AWS Amplify is a GitHub boilerplate that adds a full authentication flow — sign-up, sign-in, multi-factor authentication, and sign-out — to a Gatsby site by wiring it to Amazon Cognito through AWS Amplify.

What is Gatsby Auth Starter AWS Amplify?

This starter project implements a basic authentication flow for signing up and signing in users, as well as protected client-side routing, using the AWS Amplify framework. It is built on Gatsby's React-based static site generator and includes the frontend code and configuration needed to connect to a Cognito user pool. The repository is authored by dabit3 (Nader Dabit) and currently has 320 stars on GitHub. It is meant as a foundation you can extend when creating Gatsby applications that require user accounts.

Key Features

• Complete authentication flow — Includes user sign-up, sign-in, multi-factor authentication (MFA), and sign-out screens and handlers.
• Protected client-side routing — Demonstrates how to gate routes so only authenticated users can access certain pages.
• AWS Amplify integration — Uses the @aws-amplify/cli and aws-amplify libraries to provision and talk to backend services.
• Amazon Cognito backend — The Amplify CLI pushes a CloudFormation template that adds an Amazon Cognito resource for user management.
• One-click Amplify deployment — A deploy button in the README lets you provision the fullstack app in the Amplify Console using your AWS account and enables continuous deployment for frontend and backend changes.
• Local development setup — The README provides step-by-step instructions for creating the project with gatsby new, configuring the Amplify CLI with amplify configure, and running gatsby develop locally.

Who should use this starter?

• Gatsby developers who need to add authentication to a new or existing site without building the flow from scratch.
• Developers learning AWS Amplify who want a minimal, readable example of wiring Cognito into a React/Gatsby frontend.
• Serverless beginners looking for a small codebase that shows how to connect a static site to AWS authentication services.

What can you do with it?

• Add login to a Gatsby app — Use this starter as the base to get sign-up and sign-in pages plus route guards for members-only content.
• Create protected user areas — The client-side route protection makes it possible to gate dashboards, account pages, or any other section behind authentication.
• Experiment with Amplify + Gatsby — The small, focused codebase is a practical reference for how Auth.signIn and related Amplify API calls fit into Gatsby.

How does this template work?

1. Create a new project from the starter using gatsby new gatsby-amplify-auth https://github.com/dabit3/gatsby-auth-starter-aws-amplify.
2. Install dependencies with yarn or npm install.
3. Install the AWS Amplify CLI globally with npm install -g @aws-amplify/cli and run amplify configure.
4. Run amplify init to set up the project, choosing JavaScript/React, source directory src, distribution directory public, and the provided build/start commands.
5. Run amplify push to deploy the CloudFormation template that provisions the Amazon Cognito resource.
6. Start the development server with gatsby develop.

FAQ

Is this starter free to use?

The starter code is publicly available on GitHub and costs nothing to download. However, you need an AWS account to deploy and run it, and the AWS resources you create (such as Amazon Cognito) may incur usage charges.

What AWS services does it use?

It uses AWS Amplify for CLI tooling and client libraries, and Amazon Cognito for user authentication. The amplify push step generates a CloudFormation template that includes an Amazon Cognito resource.

What are the prerequisites to run it locally?

You need Node.js, either Yarn or npm, the Gatsby CLI, an AWS account, and the AWS Amplify CLI installed globally. The README links to a video guide for configuring the Amplify CLI.

What authentication methods are included?

Sign-up, sign-in, multi-factor authentication (MFA), and sign-out are all included. The template also demonstrates protected client-side routing, so you can restrict pages to authenticated users.