gatsby-plugin-netlify-identity-gotrue
See the demo! ✨ https://gatsby-identity-demo.jonsully.net ✨
See the demo code 🤖 here! 🤖
A simple Gatsby plugin for enabling a comprehensive and fully-featured Netlify Identity implementation into your Gatsby site. This plugin is a simplistic wrapper around react-netlify-identity-gotrue
. See that repository for the full API documentation available within Gatsby.
Install
npm i gatsby-plugin-netlify-identity-gotrue
# or
yarn add gatsby-plugin-netlify-identity-gotrue
Then, in gatsby-config.js
, add an entry to plugins
:
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-netlify-identity-gotrue`,
options: {
url: `https://your-unique-site.netlify.app` // ❗REQUIRED❗
// Do _not_ include any path (/.netlify/identity, etc.) and
// leave the trailing slash off.
}
}
]
}
❗PLEASE NOTE - This plugin will fail if Netlify Identity isn’t enabled for your live Netlify site. Local development uses the same Netlify Identity instance as your live / ‘prod’ site.
Usage
Once you’ve installed the plugin into your Gatsby site and added the plugin options to your gatsby-config.js
file, you can pull in the useIdentityContext
hook anywhere in your site. Just add import { useIdentityContext } from 'react-netlify-identity-gotrue'
to your file’s import statements (NOTE: this plugin pulls in react-netlify-identity-gotrue
so the import should work just fine and you don’t need to manually install react-netlify-identity-gotrue
) then anywhere you need it, call the hook: const identity = useIdentityContext()
In context, this looks like:
// my-account.js
import React from 'react'
import { useIdentityContext } from 'react-netlify-identity-gotrue'
export default () => {
const identity = useIdentityContext()
return {
identity.user
? <p>Welcome to your account, {identity.user.email}</p>
: <p>Please log in</p>
}
}
To learn more about the identity
object and the full API available to you when using this plugin, please see react-netlify-identity-gotrue
.
To see a fully working, implemented demo using this plugin (for ideas or in-context references), please see gatsby-plugin-netlify-identity-gotrue-demo
Note ❗
This repository, the underlying react-netlify-identity-gotrue
repository, and the gatsby-plugin-netlify-identity-gotrue-demo
repository that consumes this one are not related to Netlify’s netlify-identity-widget
stack or @sw-yx’s react-netlify-identity
stack, both of which ultimately sit on gotrue-js
. This stack is written in pure React and interfaces with Netlify Identity directly without any dependencies. You can read some history about the three stacks here: https://jonsully.net/blog/announcing-react-netlify-identity-gotrue.