{"id":16666,"library":"ra-auth-auth0","title":"Auth0 Authentication Provider for react-admin","description":"ra-auth-auth0 is an authentication provider package designed to integrate Auth0 authentication seamlessly within applications built with the react-admin framework. The current stable version is 2.0.1, which supports react-admin v5 and @auth0/auth0-spa-js v2.x. This library typically releases updates in alignment with major react-admin versions to maintain compatibility, alongside patch releases for bug fixes. Its key differentiators include providing a pre-built Auth0AuthProvider that handles the authentication flow, an httpClient utility to forward Auth0 tokens to backend data providers, and flexible mechanisms for handling user permissions and roles via Auth0 claims, with options to customize redirect URIs and checkAuth behavior. It simplifies the integration of enterprise-grade authentication into react-admin applications.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/marmelab/ra-auth-auth0","tags":["javascript","typescript"],"install":[{"cmd":"npm install ra-auth-auth0","lang":"bash","label":"npm"},{"cmd":"yarn add ra-auth-auth0","lang":"bash","label":"yarn"},{"cmd":"pnpm add ra-auth-auth0","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Auth0 SDK for single-page applications, essential for all authentication operations.","package":"@auth0/auth0-spa-js","optional":false},{"reason":"React framework dependency, as react-admin is a React application framework.","package":"react","optional":false},{"reason":"The primary framework this package extends and integrates with.","package":"react-admin","optional":false},{"reason":"React DOM dependency, necessary for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"This package is primarily consumed as an ESM module. CommonJS require syntax is discouraged and may lead to issues.","wrong":"const Auth0AuthProvider = require('ra-auth-auth0').Auth0AuthProvider;","symbol":"Auth0AuthProvider","correct":"import { Auth0AuthProvider } from 'ra-auth-auth0';"},{"note":"httpClient is a named export for integrating Auth0 tokens with data providers, not a default export or submodule.","wrong":"import httpClient from 'ra-auth-auth0/httpClient';","symbol":"httpClient","correct":"import { httpClient } from 'ra-auth-auth0';"},{"note":"Auth0Client is provided by the peer dependency @auth0/auth0-spa-js, not by ra-auth-auth0 itself. It must be imported separately.","wrong":"import { Auth0Client } from 'ra-auth-auth0';","symbol":"Auth0Client","correct":"import { Auth0Client } from '@auth0/auth0-spa-js';"}],"quickstart":{"code":"import React, { useEffect, useRef, useState } from 'react';\nimport { Admin, Resource } from 'react-admin';\nimport { BrowserRouter } from 'react-router-dom';\nimport { Auth0AuthProvider, httpClient } from 'ra-auth-auth0';\nimport { Auth0Client } from '@auth0/auth0-spa-js';\nimport jsonServerProvider from 'ra-data-json-server';\n\n// Environment variables for Auth0 configuration (replace with your actual values or .env)\nconst VITE_AUTH0_DOMAIN = process.env.VITE_AUTH0_DOMAIN ?? 'your-auth0-domain.auth0.com';\nconst VITE_AUTH0_CLIENT_ID = process.env.VITE_AUTH0_CLIENT_ID ?? 'your-client-id';\nconst VITE_AUTH0_AUDIENCE = process.env.VITE_AUTH0_AUDIENCE ?? 'your-api-audience';\nconst VITE_LOGIN_REDIRECT_URL = process.env.VITE_LOGIN_REDIRECT_URL ?? `${window.location.origin}/auth-callback`;\nconst VITE_LOGOUT_REDIRECT_URL = process.env.VITE_LOGOUT_REDIRECT_URL ?? window.location.origin;\n\nconst auth0Client = new Auth0Client({\n    domain: VITE_AUTH0_DOMAIN,\n    clientId: VITE_AUTH0_CLIENT_ID,\n    cacheLocation: 'localstorage',\n    authorizationParams: {\n        audience: VITE_AUTH0_AUDIENCE,\n        redirect_uri: VITE_LOGIN_REDIRECT_URL,\n    },\n});\n\nconst authProvider = Auth0AuthProvider(auth0Client, {\n    loginRedirectUri: VITE_LOGIN_REDIRECT_URL,\n    logoutRedirectUri: VITE_LOGOUT_REDIRECT_URL,\n});\n\n// Example dataProvider using httpClient to pass Auth0 token\nconst dataProvider = jsonServerProvider(\n    'http://localhost:3000',\n    httpClient(auth0Client)\n);\n\nconst App = () => {\n    return (\n        <BrowserRouter>\n            <Admin authProvider={authProvider} dataProvider={dataProvider}>\n                <Resource name=\"posts\" />\n            </Admin>\n        </BrowserRouter>\n    );\n};\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to set up `ra-auth-auth0` with a basic `react-admin` application, initializing Auth0Client, configuring the authProvider, and integrating the httpClient with a data provider to forward authentication tokens."},"warnings":[{"fix":"Upgrade your `react-admin` package to v5.x or higher, and ensure `@auth0/auth0-spa-js` is at `^2.0.0`.","message":"Version 2.0.0 introduced breaking changes by upgrading peer dependencies to `react-admin` v5. Applications using older `react-admin` versions should stick to `ra-auth-auth0` v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Review any custom implementations that might have used internal `ra-core` imports and update them to use `react-admin` where applicable, or refactor to use public APIs.","message":"In version 2.0.0, internal `react-admin` imports changed from `ra-core` to `react-admin`. If you previously had custom code relying on internal imports, adjust them accordingly.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your root application component, or at least the `Admin` component, is a child of `<BrowserRouter>`.","message":"The `Auth0AuthProvider` requires the application to be wrapped within a `BrowserRouter` component from `react-router-dom` to handle redirects and routing correctly. Missing this will lead to authentication failures.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `ra-auth-auth0` version 2.0.1 or newer to resolve the `React.StrictMode` compatibility issue.","message":"If using React's Strict Mode (e.g., in development), versions prior to 2.0.1 could encounter an 'Invalid state' error during the authentication flow.","severity":"gotcha","affected_versions":"<2.0.1"},{"fix":"Configure an Auth0 Action to add roles/permissions to the ID token. If the claim name doesn't match 'role', override the `getPermissions` method in the authProvider configuration to correctly parse your token claims.","message":"To retrieve user roles or custom permissions from Auth0, you must configure Auth0 Actions to include these claims in the authentication token. By default, `ra-auth-auth0` looks for a claim with 'role' in its name, which might not match your Auth0 setup.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Upgrade `ra-auth-auth0` to version 2.0.1 or newer.","cause":"Using `ra-auth-auth0` versions prior to 2.0.1 in React's Strict Mode.","error":"Error: Invalid state"},{"fix":"Wrap your `Admin` component, or your entire application, with `<BrowserRouter>` from `react-router-dom`.","cause":"The `Auth0AuthProvider` relies on react-router's navigation context, which is missing if `BrowserRouter` is not wrapping the application.","error":"TypeError: Cannot read properties of undefined (reading 'push')"},{"fix":"Verify `loginRedirectUri` and `logoutRedirectUri` are correctly set. Ensure `redirectOnCheckAuth` is configured appropriately for your login flow; setting it to `false` requires a custom login page.","cause":"Misconfiguration of redirect URIs or `checkAuth` logic, potentially related to `redirectOnCheckAuth` setting.","error":"Infinite redirect loop on failures"},{"fix":"Upgrade `ra-auth-auth0` to version 1.1.0 or newer to ensure correct `checkAuth` rejection behavior with `redirectOnCheckAuth: false`.","cause":"Older versions of the provider might not correctly reject `checkAuth` when `redirectOnCheckAuth` is explicitly `false`, leading to unexpected behavior with custom login pages.","error":"checkAuth should reject when redirectOnCheckAuth is set to false"}],"ecosystem":"npm"}