Modified Gatsby starter README and used Amplify CLI with multi-env su…

…pport

.gitignore

@@ -0,0 +1,20 @@
+# Project dependencies
+.cache
+node_modules
+yarn-error.log
+
+# Build directory
+/public
+.DS_Store
+
+# aws
+.amplifyrc
+amplify
+src/aws-exports.js
+
+#amplify
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/backend/amplify-meta.json
+aws-exports.js
+awsconfiguration.json

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,103 @@
+# Gatsby Auth starter with AWS Amplify
+
+This auth starter implements a basic authentication flow for signing up signing in users as well as protected client side routing using [AWS Amplify](https://amplify.aws). Auth features:
+- User sign up
+- User sign in
+- Multi-factor Authentication
+- User sign-out
+
+![Alt Text](src/images/gatsby-auth.gif)
+
+## Getting Started
+
+1. Create the project
+
+```sh
+gatsby new gatsby-amplify-auth https://github.com/dabit3/gatsby-auth-starter-aws-amplify
+```
+
+2. Change into the new directory
+
+```sh
+cd gatsby-amplify-auth
+```
+
+3. Change into the new directory
+
+```sh
+yarn
+# or
+npm install
+```
+
+4. Install & configure the AWS Amplify CLI
+
+```sh
+npm i -g @aws-amplify/cli@multi-env
+
+amplify configure
+```
+
+> To see a video of how to configure the CLI, click [here](https://www.youtube.com/watch?v=fWbM5DLh25U)
+
+5. 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 __dev__
+- 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-script build__
+- Start Command: __npm run-script develop__
+
+6. Add authentication to your AWS Amplify project
+
+```sh
+amplify auth add
+```
+
+- Do you want to use the default authentication and security configuration? __Y__
+
+
+7. Push the updated project configuration to AWS
+
+```sh
+amplify push
+```
+
+8. Then you can run it by:
+```sh
+gatsby develop
+```
+
+## Hosting with the AWS Amplify Console
+
+1. Push your code to a Git repository of your choice.
+1. Login to the (AWS Amplify Console](https://console.aws.amazon.com/amplify/home)
+1. Connect your repository and branch.
+1. In the build settings, modify the **backend** phase to reuse the *dev* environment you created using the Amplify CLI.
+
+```sh
+backend:
+  phases:
+    build:
+      commands:
+        - '# Get Amplify CLI Cloud-Formation stack info from environment cache'
+        - export STACKINFO="$(envCache --get stackInfo)"
+        - '# Execute Amplify CLI with the helper script'
+        - amplifyPush --environment dev
+        - '# Store Amplify CLI Cloud-Formation stack info in environment cache'
+        - >-
+          envCache --set stackInfo "$(amplify env get --json --name
+          dev)"
+```
+
+1. Review your changes and then choose **Save and deploy**

gatsby-browser.js

@@ -0,0 +1,24 @@
+/**
+ * Implement Gatsby's Browser APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/browser-apis/
+ */
+
+// You can delete this file if you're not using it
+
+import Auth from '@aws-amplify/auth'
+import { setUser } from './src/utils/auth'
+
+export const onRouteUpdate = (state, page, pages) => {
+  Auth.currentAuthenticatedUser()
+    .then(user => {
+      const userInfo = {
+        ...user.attributes,
+        username: user.username
+      }
+      setUser(userInfo)
+    })
+    .catch(err => {
+      window.localStorage.setItem('gatsbyUser', null)
+    })
+}

gatsby-config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  siteMetadata: {
+    title: 'Gatsby Auth Starter AWS Amplify',
+  },
+  plugins: [
+    'gatsby-plugin-react-helmet',
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: 'gatsby-starter-default',
+        short_name: 'starter',
+        start_url: '/',
+        background_color: '#663399',
+        theme_color: '#663399',
+        display: 'minimal-ui',
+        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
+      },
+    },
+    'gatsby-plugin-offline',
+  ],
+}

gatsby-node.js

@@ -0,0 +1,19 @@
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/node-apis/
+ */
+
+// You can delete this file if you're not using it
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage } = actions
+
+  // page.matchPath is a special key that's used for matching pages
+  // only on the client.
+  if (page.path.match(/^\/app/)) {
+    page.matchPath = `/app/*`
+
+    // Update the page.
+    createPage(page)
+  }
+}

gatsby-ssr.js

@@ -0,0 +1,7 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+// You can delete this file if you're not using it