Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-theme-amplify-cognito with all npm packages installed. Try it out:

require("gatsby/package.json"); // gatsby is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var gatsbyThemeAmplifyCognito = require("gatsby-theme-amplify-cognito")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-theme-amplify-cognito v3.0.0

Gatsby Theme Cognito with Amplify

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


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 />
  7. Start your site

    gatsby develop
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free