netlify-gated-components
v1.0.11
Published
show/hide components based on login state using Netlify Identity in React
Downloads
25
Readme
GatedComponent
This is an NPM package that creates a React component for gated content functionality using Netlify Identity. It allows you to restrict access to certain parts of your application based on the user's authentication status.
Or more simply understood, put anything that needs authentication inside a <GatedComponent></GatedComponent>
tag and it will only be rendered if the user is logged in.
If you want to render a login form when the user is not authenticated, you can pass a component as a prop to the noAccessContent
prop.
Styling is not included in the package.
Installation
To install this package, run the following command:
# npm
npm install netlify-gated-components
# or yarn
yarn add netlify-gated-components
# or pnpm
pnpm add netlify-gated-components
Install dependencies
You also need to install the netlify-identity-widget
package to use this component. You can install it by running the following command:
# npm
npm install netlify-identity-widget
# or yarn
yarn add netlify-identity-widget
# or pnpm
pnpm add netlify-identity-widget
# Install types for TypeScript
npm install @types/netlify-identity-widget
# or yarn
yarn add @types/netlify-identity-widget
# or pnpm
pnpm add @types/netlify-identity-widget
Import the package into your React component:
import GatedComponent from 'netlify-gated-components'
Usage
To use the GatedComponent
component, you need to wrap the content you want to restrict access to inside the component. You can also specify a component to render when the user is not authenticated.
Note: To use this package, you need to pass the netlifyIdentity
object as a prop to the GatedComponent
component.
Props
netlifyIdentity
(required): The Netlify Identity object.children
(required): The content to render when the user is authenticated. Takes a valid React component.noAccessContent
(optional): The component to render when the user is not authenticated.reloadOnLogin
(optional): A boolean value that determines whether the page should be reloaded when the user logs in and out. Default istrue
.
Example
'use client'
import React, { useState, useEffect } from 'react'
import netlifyIdentity from 'netlify-identity-widget'
import GatedComponent from 'netlify-gated-components'
function Component() {
const [userName, setUserName] = useState('')
useEffect(() => {
setUserName(
netlifyIdentity?.currentUser()?.user_metadata?.full_name || 'Anon'
)
}, [])
const noAccessContent = (
<div className="gated-content-no-access">
<h4 className="gated-content-no-access-heading">
🔓 You must be logged in to see this content.
</h4>
<div className="gated-content-no-access-button-group">
<input
type="button"
value="Log in"
onClick={() => netlifyIdentity.open('login')}
className="gated-content-no-access-button"
id="gated-content-no-access-login-button"
/>
<input
type="button"
value="Sign up"
onClick={() => netlifyIdentity.open('signup')}
className="gated-content-no-access-button"
id="gated-content-no-access-signup-button"
/>
</div>
</div>
)
const content = (
<div className="gated-content">
<h4 className="gated-content-heading">👋 Logged in as {userName}.</h4>
<div className="gated-content-button-group">
<input
type="button"
value="Log out"
onClick={() => netlifyIdentity.logout()}
/>
</div>
</div>
)
return (
<div>
<GatedComponent
netlifyIdentity={netlifyIdentity}
noAccessContent={noAccessContent}
reloadOnLogin={true}>
{content}
</GatedComponent>
</div>
)
}
export default Component
License
MIT Open Source.
Author
Contributing
Contributions are welcome! Feel free to submit a pull request or open an issue if you have any questions or suggestions.
https://github.com/neontomo/netlify-gated-components-npm