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.jsmoduleexports = 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 const Layout = { const identity = const dialog setDialog = React const name = identity && identityuser && identityuseruser_metadata && identityuseruser_metadataname || "NoName" console const isLoggedIn = identity && identityisLoggedIn return <> <nav style= background: "green" > " " Login Status: <button className="btn" onClick= > isLoggedIn ? `Hello , Log out here!` : "LOG IN" </button> </nav> <main>children</main> <IdentityModal showDialog=dialog onCloseDialog= /> </> }
A very simple and unmaintained demo is here: https://github.com/sw-yx/plsdelete-netlify-identity-loop-bug