Use with Netlify Identity

useAuth works withnetlify-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 tonetlify.com, login, find your site, and enable 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

or

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

3. Configure useAuth

Netlify Identity is meant to be zero-config, but you need to configureuseAuth 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";
exportconstwrapPageElement=({ element})=>(
<>
<AuthConfigauthProvider={NetlifyIdentity}navigate={navigate}/>
{element}
</>
);

With NextJS

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

4. Enjoy 😊

You're ready to useuseAuth anywhere on your site. Check theAPI Reference for more detail.

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

Users get a widget like this: