Registry / auth-security / react-use-auth

react-use-auth

library2.1.0-14jsnpmunverified

React hook for adding authentication to apps with minimal setup. Current stable version 2.0.0 (August 2021) with 2.1.0-14 as prerelease. Supports Auth0, Netlify Identity, and Firebase. Key differentiator: uses XState state machine under the hood, handles SSR, and provides a declarative AuthConfig component. Release cadence is irregular; v2 introduced provider-specific imports to reduce bundle size. Peer dependencies must be installed separately (auth0-js, netlify-identity-widget, or firebase). Ships TypeScript definitions.

auth-security web-framework

npm install react-use-auth

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-USE-AUTH

react-use-auth

auth-securityjavascriptv2.1.0-14

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAuth

✓ import { useAuth } from 'react-use-auth'

✗ const useAuth = require('react-use-auth')

Default export is not available; ESM only.

AuthProvider

✓ import { AuthConfig } from 'react-use-auth'

✗ import { AuthProvider } from 'react-use-auth'

AuthProvider was renamed to AuthConfig in v1.0.0. Deprecated and removed in v2.

Auth0

✓ import { Auth0 } from 'react-use-auth/auth0'

✗ import { Auth0 } from 'react-use-auth'

Provider-specific imports were introduced in v2.0.0 to enable tree-shaking. Must import from subpath.

NetlifyIdentity

✓ import { NetlifyIdentity } from 'react-use-auth/netlify-identity'

✗ import { NetlifyIdentity } from 'react-use-auth'

Same as Auth0; provider-specific import path required in v2.

Complete setup of Auth0 with useAuth: configures AuthProvider, provides login/logout, and displays user info.

// App.tsx import * as React from 'react'; import { useAuth, AuthConfig } from 'react-use-auth'; import { Auth0 } from 'react-use-auth/auth0'; const navigate = (to: string) => window.location.assign(to); function App() { const { isAuthenticated, login, logout, user } = useAuth(); return ( <div> <AuthConfig navigate={navigate} authProvider={Auth0} params={{ domain: process.env.AUTH0_DOMAIN ?? 'example.auth0.com', clientID: process.env.AUTH0_CLIENT_ID ?? '' }} /> {isAuthenticated ? ( <div>Hello {user?.name}! <button onClick={logout}>Log out</button></div> ) : ( <button onClick={login}>Log in</button> )} </div> ); } export default App;

Debug

Known issues

breakingv2.0.0 changed import paths: Auth0 must be imported from 'react-use-auth/auth0' instead of 'react-use-auth'. This breaks all v1 imports.

fix

Update imports to provider-specific subpaths, e.g., import { Auth0 } from 'react-use-auth/auth0'.

affects: >=2.0.0 <3.0.0

deprecatedAuthProvider component was renamed to AuthConfig in v1.0.0 and removed in v2.

fix

Replace AuthProvider with AuthConfig in all JSX.

affects: >=2.0.0

deprecatedAuthentication provider peer dependencies (auth0-js, netlify-identity-widget, firebase, firebaseui) are not installed automatically. You must install one manually.

fix

Run 'yarn add auth0-js' (or netlify-identity-widget, firebase) as appropriate.

affects: all

gotchaThe authProvider param in AuthConfig expects a constructor function, not a module. Passing the wrong type may cause errors like 'authProvider is not a constructor'.

fix

Ensure the import provides a class/constructor: import { Auth0 } from 'react-use-auth/auth0' and pass Auth0 (not a string or object).

affects: >=1.0.0

gotchauseAuth() must be called inside a component wrapped with AuthConfig (or at least rendered after AuthConfig). Otherwise, it throws because the XState machine hasn't started.

fix

Place AuthConfig at a high level (e.g., _app.js or gatsby-browser.js) to ensure it renders before any useAuth calls.

affects: all

Errors

Common errors & fixes

useAuth is not a function or its return value is not iterable

Incorrect import path for useAuth; likely imported as default export but library only exports named.

fix

Use import { useAuth } from 'react-use-auth' (named import).

Cannot find module 'react-use-auth/auth0'

v2+ requires provider-specific subpaths; v1 did not have them.

fix

Upgrade to v2 and change imports to 'react-use-auth/auth0' or downgrade to v1 (not recommended).

authProvider is not a constructor

Passing a string or default import instead of the class/constructor from provider subpath.

fix

Use import { Auth0 } from 'react-use-auth/auth0' and pass Auth0 (the imported class) to AuthConfig.

Upgrade

Version history

2.1.0-14latest on npm

Audit

Dependencies

auth0-jsoptionalRequired when using Auth0 provider

firebaseoptionalRequired when using Firebase provider

firebaseuioptionalRequired when using Firebase provider

netlify-identity-widgetoptionalRequired when using Netlify provider

reactrequiredPeer dependency for hooks and JSX

react-domrequiredPeer dependency for React rendering

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Swizec/useAuth ↗

packagehttps://www.npmjs.com/package/react-use-auth ↗