Skip to content
Straightforward integration with AWS Amplify and Cognito
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 9 commits ahead of jlengstorf:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
theme
.gitignore
README.md
package.json
yarn.lock

README.md

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
You can’t perform that action at this time.