DEV Community

Cover image for Gatsby Auth with AWS Amplify
Oleg Chursin
Oleg Chursin

Posted on

Gatsby Auth with AWS Amplify

#gatsby #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
Enter fullscreen mode Exit fullscreen mode

Add TS (optional)

This step is optional but highly recommended

Add TS plugin 

yarn add gatsby-plugin-typescript
Enter fullscreen mode Exit fullscreen mode

Add TypeScript definitions 

yarn add -D @types/react @types/react-dom @types/node
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Configure Amplify 

amplify configure
Enter fullscreen mode Exit fullscreen mode

Actionable bash response:

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

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Step 2. Initialize inside Gatsby project

from the root of your project run:

amplify init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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

Step 3. Add Auth API 

amplify add auth
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 4. Deploy the config to AWS 

amplify push
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add the following to gatsby-browser.js

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

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

#GatsbyNYC

Top comments (2)

Collapse
 
marksteven profile image
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

Collapse
 
marksteven profile image
marksteven • • Edited

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

Read next

lakhera2015 profile image

📌 21 Days of DevOps Interview -Day 15 - ALB vs NLB 📌

Prashant Lakhera -

muhammad_ahmad_khan profile image

Integrating Multiple EKS Clusters with ArgoCD for Simplifying Kubernetes Operations

Muhammad Ahmad Khan -

recursivecodes profile image

Live Streaming from Unity - Broadcasting from a Meta Quest (Part 8)

Todd Sharp -

anurag_vishwakarma profile image

Ansible vs Terraform

Anurag Vishwakarma -