{"id":28133,"library":"react-use-auth","title":"react-use-auth","description":"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.","status":"active","version":"2.1.0-14","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Swizec/useAuth","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-use-auth","lang":"bash","label":"npm"},{"cmd":"yarn add react-use-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-use-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required when using Auth0 provider","package":"auth0-js","optional":true},{"reason":"Required when using Firebase provider","package":"firebase","optional":true},{"reason":"Required when using Firebase provider","package":"firebaseui","optional":true},{"reason":"Required when using Netlify provider","package":"netlify-identity-widget","optional":true},{"reason":"Peer dependency for hooks and JSX","package":"react","optional":false},{"reason":"Peer dependency for React rendering","package":"react-dom","optional":false}],"imports":[{"note":"Default export is not available; ESM only.","wrong":"const useAuth = require('react-use-auth')","symbol":"useAuth","correct":"import { useAuth } from 'react-use-auth'"},{"note":"AuthProvider was renamed to AuthConfig in v1.0.0. Deprecated and removed in v2.","wrong":"import { AuthProvider } from 'react-use-auth'","symbol":"AuthProvider","correct":"import { AuthConfig } from 'react-use-auth'"},{"note":"Provider-specific imports were introduced in v2.0.0 to enable tree-shaking. Must import from subpath.","wrong":"import { Auth0 } from 'react-use-auth'","symbol":"Auth0","correct":"import { Auth0 } from 'react-use-auth/auth0'"},{"note":"Same as Auth0; provider-specific import path required in v2.","wrong":"import { NetlifyIdentity } from 'react-use-auth'","symbol":"NetlifyIdentity","correct":"import { NetlifyIdentity } from 'react-use-auth/netlify-identity'"}],"quickstart":{"code":"// App.tsx\nimport * as React from 'react';\nimport { useAuth, AuthConfig } from 'react-use-auth';\nimport { Auth0 } from 'react-use-auth/auth0';\n\nconst navigate = (to: string) => window.location.assign(to);\n\nfunction App() {\n  const { isAuthenticated, login, logout, user } = useAuth();\n  return (\n    <div>\n      <AuthConfig\n        navigate={navigate}\n        authProvider={Auth0}\n        params={{ domain: process.env.AUTH0_DOMAIN ?? 'example.auth0.com', clientID: process.env.AUTH0_CLIENT_ID ?? '' }}\n      />\n      {isAuthenticated ? (\n        <div>Hello {user?.name}! <button onClick={logout}>Log out</button></div>\n      ) : (\n        <button onClick={login}>Log in</button>\n      )}\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Complete setup of Auth0 with useAuth: configures AuthProvider, provides login/logout, and displays user info."},"warnings":[{"fix":"Update imports to provider-specific subpaths, e.g., import { Auth0 } from 'react-use-auth/auth0'.","message":"v2.0.0 changed import paths: Auth0 must be imported from 'react-use-auth/auth0' instead of 'react-use-auth'. This breaks all v1 imports.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Replace AuthProvider with AuthConfig in all JSX.","message":"AuthProvider component was renamed to AuthConfig in v1.0.0 and removed in v2.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Run 'yarn add auth0-js' (or netlify-identity-widget, firebase) as appropriate.","message":"Authentication provider peer dependencies (auth0-js, netlify-identity-widget, firebase, firebaseui) are not installed automatically. You must install one manually.","severity":"deprecated","affected_versions":"all"},{"fix":"Ensure the import provides a class/constructor: import { Auth0 } from 'react-use-auth/auth0' and pass Auth0 (not a string or object).","message":"The authProvider param in AuthConfig expects a constructor function, not a module. Passing the wrong type may cause errors like 'authProvider is not a constructor'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place AuthConfig at a high level (e.g., _app.js or gatsby-browser.js) to ensure it renders before any useAuth calls.","message":"useAuth() 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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Use import { useAuth } from 'react-use-auth' (named import).","cause":"Incorrect import path for useAuth; likely imported as default export but library only exports named.","error":"useAuth is not a function or its return value is not iterable"},{"fix":"Upgrade to v2 and change imports to 'react-use-auth/auth0' or downgrade to v1 (not recommended).","cause":"v2+ requires provider-specific subpaths; v1 did not have them.","error":"Cannot find module 'react-use-auth/auth0'"},{"fix":"Use import { Auth0 } from 'react-use-auth/auth0' and pass Auth0 (the imported class) to AuthConfig.","cause":"Passing a string or default import instead of the class/constructor from provider subpath.","error":"authProvider is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}