TLDR: GitHub repo:https://github.com/olegchursin/gatsby-auth-amplify
Steps to follow along:
Create new Gatsby project
gatsby new gatsby-auth-amplifyAdd TS (optional)
This step is optional but highly recommended
Add TS plugin
yarn add gatsby-plugin-typescriptAdd TypeScript definitions
yarn add-D @types/react @types/react-dom @types/nodeChange files extensions
.js —>.tsx
Hook up AWS Amplify Framework
Auth is handled by AWS Cognito
Steps:
- Install AWS Amplify CLI
- Configure Amplify
- Initialize inside Gatsby project
- Add Auth API
- Deploy the config to AWS
- Protect the ‘protected-page’
Step 1. Install AWS Amplify CLI
npminstall-g @aws-amplify/cliamplify--versionConfigure Amplify
amplify configureActionable bash response:
Signinto your AWS administrator account:https://console.aws.amazon.com/Press Enter tocontinueActionable 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-1You 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 Profileinyourlocalmachine? Profile Name: olegchursinSuccessfullysetup the new user.Step 2. Initialize inside Gatsby project
from the root of your project run:
amplify initActionable bash response:
? Enter a nameforthe project gatsby-auth-amplify? Enter a nameforthe environment dev? Choose your default editor: Visual Studio Code? Choose thetypeof app that you're building javascriptPlease 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 startActionable bash response:
Do you want to use an AWS profile? Yes? Please choose the profile you want to use defaultAdding backend environment dev to AWS Amplify Console app: d1mhcdbiatabfc⠧ Initializing projectinthe cloud...Explore the newly generatedamplify folder:Screenshot: amplify folder structure
Step 3. Add Auth API
amplify add authActionable 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. Howdoyou wantusersto be able to signin? Username Do you want to configure advanced settings? No, I amdone.Successfully added resource gatsbyauthamplifycba7570a locallyStep 4. Deploy the config to AWS
amplify pushActionable 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 tocontinue?(Y/n)You should have a newauth folder insideamplify/backend.
Go to AWS consoleCognito —> 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-reactAdd the following togatsby-browser.js
importAmplify,{Auth}from"aws-amplify"importawsConfigfrom"./src/aws-exports"Amplify.configure(awsConfig)AddwithAuthenticator 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
ClickCreate 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
Top comments(2)
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
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
For further actions, you may consider blocking this person and/orreporting abuse
