README.md

Setup

We are using Gatsby as our front-end app and we will be using amplify's pre-built authentication UI components to create signin/signup flow.

Step 1

Install the following packages:

yarn add @aws-amplify/ui-react
yarn add aws-amplify

Step 2

Create a new file in the src directiry named "aws-exports.js" with the following content in it:

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
   
    "Auth": {
        "region": "ADD YOUR REGION",
        "userPoolId": "ADD YOUR POOL ID",
        "userPoolWebClientId": "ADD YOUR CLIENT ID"
    }
};


export default awsmobile;

Enter your region, client id and userpool id in this file. The best way is to use enviroment variables.

Step 3

Create a client for amplify. This is needed to initialize the amplify and pass that initialization to all the pages. You will find the client file in "/src/amplifyContext"

Here we are setting up our amplify with the configuration we defined in "aws-exports.js" file.

import React, { ReactNode } from "react"
import Amplify from "aws-amplify"
import awsmobile from "../aws-exports"

interface props {
  children: ReactNode
}

export default function amplifyClient({ children }: props) {
  Amplify.configure(awsmobile)

  return <div>{children}</div>
}

Step 4

Create a wrap root element to pass the client made in step 3 to all the components and pages in the gatsby at build time. You can find the wrap root element in "/src/wrappers".

Here we are just importing the client we made in step 3 and using it as a wrapper around our gatsby project.

import React from "react"
import AmplifyClient from "../amplifyContext/client"

export default ({ element }) => <AmplifyClient>{element}</AmplifyClient>

Step 5

Create "gatsby-browser.js" and "gatsby-ssr.js" files in your root directory and export our wrapper in these files. This is necessary to create the wrapper at build time

export { default as wrapRootElement } from './src/wrappers/wrap-root-element';

Step 6

Use Amplify pre-built UI components in your application.

import React from 'react';
import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';


const AuthStateApp: React.FunctionComponent = () => {
    const [authState, setAuthState] = React.useState<AuthState>();
    const [user, setUser] = React.useState<any>();

    React.useEffect(() => {
        onAuthUIStateChange((nextAuthState, authData) => {
            setAuthState(nextAuthState);
            setUser(authData)
        });
    }, []);

  return authState === AuthState.SignedIn && user ? (
      <div className="App">
          <div>Hello, {user.username}</div>
          <AmplifySignOut />
      </div>
  ) : (
      <AmplifyAuthenticator />
  );
}

export default AuthStateApp;

• Here we are using "onAuthUIStateChange()" which is a function that will fire whenever the state of the Authentication UI component changes.

• We are also using "AuthState" that tells us the current state of the user. It is an enum with the following values

AuthState {
  SignUp = 'signup',
  SignOut = 'signout',
  SignIn = 'signin',
  Loading = 'loading',
  SignedOut = 'signedout',
  SignedIn = 'signedin',
  SigningUp = 'signingup',
  ConfirmSignUp = 'confirmSignUp',
  confirmingSignUpCustomFlow = 'confirmsignupcustomflow',
  ConfirmSignIn = 'confirmSignIn',
  confirmingSignInCustomFlow = 'confirmingsignincustomflow',
  VerifyingAttributes = 'verifyingattributes',
  ForgotPassword = 'forgotpassword',
  ResetPassword = 'resettingpassword',
  SettingMFA = 'settingMFA',
  TOTPSetup = 'TOTPSetup',
  CustomConfirmSignIn = 'customConfirmSignIn',
  VerifyContact = 'verifyContact'
}

• The "" is your pre-built login/signup widget
• The "" is your pre-build signout button