gatsby-theme-amplify-cognito

Gatsby Theme Cognito with Amplify

A wrapper theme to use Cognito (Amplify AWS) with your Gatsby website.

Installation

To use this theme in your Gatsby sites, follow these instructions:

1. Install the theme

   npm install --save gatsby-theme-amplify-cognito

2. Set up User Pool in AWS

3. Add the theme to your gatsby-config.js:

   module.exports = {
     plugins: [{
       resolve: `gatsby-theme-amplify-cognito`,
       options: {
           region: '',
           userPoolId: '',
           userPoolWebClientId: ''
       },
   }]
   }

4. Populate the options with the details from your User Pool

5. Each page is passed a prop of authState and authData which contain the details of the user session

6. Use the components to create your page:

   import { SignIn, SignOut } from 'gatsby-theme-amplify-cognito';
    
   const Homepage = ({authState, authData}) => {
       return <section>
           {(props.authState !== "signedIn") ?
               <SignIn authState={authState} /> :
               <>
                   <h1>Hello {authData.username}</h1>
                   <SignOut />
               </>
           }
       </section>
   }

7. Start your site

   gatsby develop