Skip to content
  • Getting Started

Use with Netlify Identity

useAuth works with netlify-identity-widget, which is designed as a zero-config login widget. You'll need 3 lines of configuration with useAuth.

Example app 👉 example/useauth-gatsby-netlify-identity

1. Set up Netlify Identity

You'll need to enable Netlify Identity for your site. Go to, login, find your site, and enable identity.

Enable Netlify Identity
Enable Netlify Identity

2. Install dependencies

Install both useAuth and netlify-identity-widget. We put providers in peer dependencies to reduce package sizes :)

yarn add react-use-auth netlify-identity-widget


npm install react-use-auth netlify-identity-widget

3. Configure useAuth

Netlify Identity is meant to be zero-config, but you need to configure useAuth itself. It needs to know you're using Netlify Identity and how to navigate on your site.

With Gatsby

// gatsby-browser.js
import { AuthConfig } from "react-use-auth";
import { NetlifyIdentity } from "react-use-auth/netlify-identity";
import { navigate } from "gatsby";
export const wrapPageElement = ({ element }) => (
<AuthConfig authProvider={NetlifyIdentity} navigate={navigate} />

With NextJS

// pages/_app.js
import { AuthConfig } from "react-use-auth";
import { NetlifyIdentity } from "react-use-auth/netlify-identity";
import { useRouter } from "next/router";
function MyApp({ Component, pageProps }) {
const router = useRouter();
return (
navigate={(url) => router.push(url)}
<Component {...pageProps} />

4. Enjoy 😊

You're ready to use useAuth anywhere on your site. Check the API Reference for more detail.

const Login = () => {
const { isAuthenticated, login, logout } = useAuth();
if (isAuthenticated()) {
return <button onClick={logout}>Logout</Button>;
} else {
return <button onClick={login}>Login</Button>;

Users get a widget like this:

Netlify Identity login widget
Netlify Identity login widget

Use with Auth0
Role/scope permissions
Created with ❤️ by Swizec et. al.