Skip to content
Add Netlify Identity Authentication to any Gatsby app
JavaScript CSS
Branch: master
Clone or download
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
gatsby-theme-netlify-identity
gatsby-theme-tyra Bump lodash from 4.17.11 to 4.17.15 in /gatsby-theme-tyra Jul 31, 2019
.gitignore
README.md
netlify.toml
package.json
yarn.lock add gatsby plugin netlify for h/2 Jul 31, 2019

README.md

Gatsby Theme Netlify Identity

This repo is a yarn workspace.

Features:

  • Add Netlify Identity Authentication to any Gatsby app
  • 🕵🏼‍Shadow only the components you need to add authentication to
  • ♿ Accessible modal component that doesn't require a UI redesign unless you want to
  • 💁🏼‍♂️Drop down to use the headless react-netlify-identity API if you want to write your own auth UI

How to Use In Your Gatsby App

⚠️ Make sure to enable Netlify Identity on your site!

this theme adds gatsby-plugin-netlity-identity for you and ships some nice components!

yarn add gatsby-theme-netlify-identity

And add it to your config:

// In your gatsby-config.js
module.exports = {
  plugins: [
    // You can should only have one instance of this plugin
    {
      resolve: `gatsby-theme-netlify-identity`,
      options: {
        url: `https://your-netlify-identity-instance-here.netlify.com/`, // required! Make sure Identity is enabled!
      },
    },
  ],
}

Now you can use IdentityModal and useIdentityContext in your application!

import React from 'react'
import IdentityModal, { useIdentityContext } from 'react-netlify-identity-widget'
import 'react-netlify-identity-widget/styles.css' // delete if you want to bring your own CSS

const Layout = ({ children }) => {
  const identity = useIdentityContext()
  const [dialog, setDialog] = React.useState(false)
  const name =
    (identity &&
      identity.user &&
      identity.user.user_metadata &&
      (identity.user.user_metadata.name || identity.user.user_metadata.full_name)) ||
    'NoName'

  console.log(JSON.stringify(identity))
  const isLoggedIn = identity && identity.isLoggedIn
  return (
    <>
      <nav style={{ background: 'green' }}>
        {' '}
        Login Status:
        <button className="btn" onClick={() => setDialog(true)}>
          {isLoggedIn ? `Hello ${name}, Log out here!` : 'LOG IN'}
        </button>
      </nav>
      <main>{children}</main>
      <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
    </>
  )
}

export default Layout

Tyra

this project also converted https://github.com/madelyneriksen/gatsby-starter-tyra into a theme.

Local Development

yarn workspace demo develop

The demo will start at http://localhost:8000

NOTE: If you’re new to Yarn workspaces, check out this post for details.

You can’t perform that action at this time.