{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install ra-auth-auth0"],"cli":null},"imports":["import { Auth0AuthProvider } from 'ra-auth-auth0';","import { httpClient } from 'ra-auth-auth0';","import { Auth0Client } from '@auth0/auth0-spa-js';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}