Gatsby Auth with AWS Amplify

TLDR: GitHub repo: https://github.com/olegchursin/gatsby-auth-amplify

Steps to follow along:

Create new Gatsby project

gatsby new gatsby-auth-amplify

Add TS (optional)

This step is optional but highly recommended

Add TS plugin

yarn add gatsby-plugin-typescript

Add TypeScript definitions

yarn add -D @types/react @types/react-dom @types/node

Change files extensions

.js —> .tsx

Hook up AWS Amplify Framework

Auth is handled by AWS Cognito

Steps:

1. Install AWS Amplify CLI
2. Configure Amplify
3. Initialize inside Gatsby project
4. Add Auth API
5. Deploy the config to AWS
6. Protect the ‘protected-page’

Step 1. Install AWS Amplify CLI

npm install -g @aws-amplify/cli
amplify --version

Configure Amplify

amplify configure

Actionable bash response:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Actionable bash response:

Specify the AWS Region
? region:  (Use arrow keys)
❯ us-east-1
  us-east-2
  us-west-2
  eu-west-1
  eu-west-2
  eu-central-1
  ap-northeast-1

You will also need to provide user name and configure IAM user within the console.
NB: Save you credentials (download .csv or copy access keys)

Actionable bash response:

Enter the access key of the newly created user:
? accessKeyId:  AKIA355I4O**********
? secretAccessKey:  ehf7gWSzPULXtNN0d0v******************
This would update/create the AWS Profile in your local machine
? Profile Name:  olegchursin

Successfully set up the new user.

Step 2. Initialize inside Gatsby project

from the root of your project run:

amplify init

Actionable bash response:

? Enter a name for the project gatsby-auth-amplify
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

Actionable bash response:

Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: d1mhcdbiatabfc
⠧ Initializing project in the cloud...

Explore the newly generated amplify folder: Screenshot: amplify folder structure

Step 3. Add Auth API

amplify add auth

Actionable bash response:

Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added resource gatsbyauthamplifycba7570a locally

Step 4. Deploy the config to AWS

amplify push

Actionable bash response:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name             | Operation | Provider plugin   |
| -------- | ------------------------- | --------- | ----------------- |
| Auth     | gatsbyauthamplifycba7570a | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

You should have a new auth folder inside amplify/backend.

Go to AWS console Cognito —> User Pools and make sure your generated pool is there as well.

Step 5. Protect the ‘protected-page’

Install new libraries:

yarn add aws-amplify aws-amplify-react

Add the following to gatsby-browser.js

import Amplify, { Auth } from "aws-amplify"
import awsConfig from "./src/aws-exports"
Amplify.configure(awsConfig)

Add withAuthenticator to your protected-page:

• import it:
  import { withAuthenticator } from “aws-amplify-react”

• wrap the export:
  export default withAuthenticator(ProtectedPage)

Now you should be greeted with the login view: Screenshot: Login view

Click Create account, provide an email address that you have access to (for a confirmation code), have fun!

Resources

Gatsby Auth Amplify Starter by nadir Dabit: gatsby-auth-starter-aws-amplify: Gatsby Starter | GatsbyJS

• Video tutorial by Arbaoui Mehdi: Gatsby and AWS Amplify Authentication - YouTube

• Deploying to AWS Amplify: Deploying to AWS Amplify | GatsbyJS

#GatsbyNYC

Comments

[marksteven]

Update.
Code was fine it appears to be a bug in Visual studio
every time file was saved it added white space between the dashes
And sometimes it added them in the background whilst still looking right on the page??
Fully deleting VS and reload fixed issue and your code now works as expected.
Hope this helps other who may hit same issue

[marksteven]

Hi Oleg
Have followed your tutorial (minus installing the Typescript)
(Mac Catalina Visual Studio)
Project starts fine without authentication

If I add import to gatsby browser.js
Amplify, { Auth } from "aws-amplify"
import awsConfig from "./src/aws-exports"
Amplify.configure(awsConfig)

Still all good - then to index.js
line 3 import { withAuthenticator } from “aws-amplify-react”
finally line 23 export default withAuthenticator(IndexPage)

I then get this error and project fails to load

Generating development JavaScript bundle failed
/Users/marksteven/Documents/sites/gatsby-auth-amplify/src/pages/index.js: Unexpected character '“' (3:34)

1 | import React from "react"
2 | import { Link } from "gatsby"

3 | import { withAuthenticator } from “aws-amplify-react”
| ^
4 |
5 | import Layout from "../components/layout"
6 | import Image from "../components/image"

File: src/pages/index.js:3:34

failed Re-building development bundle - 0.615s

The red arrow is actually under the a of aws
Removing import { withAuthenticator } from “aws-amplify-react”
and withAuthenticator ()
It all comes good again and works.
Any ideas on what is going on here as I cannot find any documentation as to why this should not work but as I am new to Gatsby maybe I am doing something wrong.
Thanks for your time
Mark