gatsby-plugin-netlify-identity
Gatsby plugin which adds a React Netlify Identity Widget Provider for you.
This is a very light wrapper just to help automate the boring parts, please see https://github.com/sw-yx/react-netlify-identity-widget for more info on how to use RNIW.
Install
npm install --save gatsby-plugin-netlify-identity
## you may also need RNIW's peer dependencies
npm install --save react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden
How to use
// In your gatsby-config.js
module.exports = {
plugins: [
// You can should only have one instance of this plugin
{
resolve: `gatsby-plugin-netlify-identity`,
options: {
url: `https://your-identity-instance-here.netlify.com/` // required!
}
}
]
}
Options
To use this, you must have a Netlify site instance with Netlify Identity enabled (Deploy this demo to get started with one click). Then take the URL of that Netlify site and pass it in as the url
for this plugin’s options.
Usage
Once installed, you are free to use react-netlify-identity-widget
’s handy useIdentityContext
hook anywhere in your Gatsby app. If you also want the authentication modal, you can import it as well. A good place to put this is in a Layout component, but really you could also put it in a Navbar component, it really doesn’t matter since you’re inside the context anyway.
Some sample code for your convenience:
// src/components/Layout.js
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) || "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
A very simple and unmaintained demo is here: https://github.com/sw-yx/plsdelete-netlify-identity-loop-bug