{"id":22992,"library":"xadmin-auth","title":"Xadmin Auth","description":"Xadmin Auth is the authentication module for the Xadmin ecosystem (v3.3.4), providing user login, logout, permission checks, and session management for React applications. It integrates tightly with xadmin-model and xadmin-form v3, requires react-router-dom v6 for routing, and lodash for utilities. Designed for admin panels, it offers higher-level auth components and hooks compared to raw auth libraries. Release cadence is irregular but semver-compliant. Key differentiator: seamless with Xadmin UI framework; standalone use is not recommended without adjacent xadmin packages.","status":"active","version":"3.3.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install xadmin-auth","lang":"bash","label":"npm"},{"cmd":"yarn add xadmin-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add xadmin-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"JSX and component lifecycle needed for auth components","package":"react","optional":false},{"reason":"Utility functions for object manipulation and deep cloning","package":"lodash","optional":false},{"reason":"Routing for protected routes and navigation after auth actions","package":"react-router-dom","optional":false},{"reason":"Core Xadmin framework providing base abstractions","package":"xadmin","optional":false},{"reason":"Form handling for login and registration forms","package":"xadmin-form","optional":false},{"reason":"Internationalization support for auth UI messages","package":"xadmin-i18n","optional":false},{"reason":"Data models for user and permission entities","package":"xadmin-model","optional":false}],"imports":[{"note":"ESM-only package since v3; CommonJS require will fail.","wrong":"const AuthProvider = require('xadmin-auth')","symbol":"AuthProvider","correct":"import { AuthProvider } from 'xadmin-auth'"},{"note":"Named export, not default export.","wrong":"import useAuth from 'xadmin-auth'","symbol":"useAuth","correct":"import { useAuth } from 'xadmin-auth'"},{"note":"Import directly from package root; subpaths may break in future versions.","wrong":"import { withAuth } from 'xadmin-auth/withAuth'","symbol":"withAuth","correct":"import { withAuth } from 'xadmin-auth'"}],"quickstart":{"code":"import React from 'react';\nimport { AuthProvider, useAuth } from 'xadmin-auth';\nimport { Xadmin } from 'xadmin';\n\nfunction LoginPage() {\n  const { login } = useAuth();\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    const form = new FormData(e.target);\n    try {\n      await login(form.get('username'), form.get('password'));\n      alert('Logged in!');\n    } catch (err) {\n      alert('Login failed: ' + err.message);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input name=\"username\" placeholder=\"Username\" />\n      <input name=\"password\" type=\"password\" placeholder=\"Password\" />\n      <button type=\"submit\">Log In</button>\n    </form>\n  );\n}\n\nfunction App() {\n  return (\n    <Xadmin>\n      <AuthProvider>\n        <LoginPage />\n      </AuthProvider>\n    </Xadmin>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Shows setup of AuthProvider and useAuth hook with a basic login form."},"warnings":[{"fix":"Ensure your project uses ESM (type: module in package.json) and uses import statements.","message":"v3 drops CommonJS support; only ES modules are provided.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Wrap app in <AuthProvider> and replace 'authenticated' with 'withAuth(Component)'.","message":"v3 restructured exports; 'authenticated' HOC replaced by 'withAuth' and 'AuthProvider' is now required.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Replace signOut() calls with logout().","message":"The 'signOut' method in useAuth is deprecated in favor of 'logout'.","severity":"deprecated","affected_versions":">=3.2.0 <4.0.0"},{"fix":"Wrap your app with <Xadmin> before <AuthProvider>.","message":"AuthProvider and useAuth must be used within an Xadmin component tree.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use FormData or ensure object has 'username' and 'password' fields as per API expectations.","message":"The 'login' method expects FormData-like structure; passing plain objects may fail.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install xadmin-auth' or 'yarn add xadmin-auth'.","cause":"Package not installed or not in node_modules.","error":"Module not found: Can't resolve 'xadmin-auth'"},{"fix":"Ensure component is inside <AuthProvider>.","cause":"useAuth hook called outside of AuthProvider.","error":"TypeError: Cannot destructure property 'login' of '(0 , ...)' as it is undefined."},{"fix":"Use named import: import { AuthProvider } from 'xadmin-auth'.","cause":"Importing a default export when only named exports exist (e.g., import AuthProvider from 'xadmin-auth').","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}