Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

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
Docs
Tutorials
Plugins
Blog
Showcase