Accès anticipé : cette fonctionnalité est actuellement proposée en accès anticipé. En l’utilisant, vousacceptez les conditions d’essai gratuit applicables dans le Contrat d’abonnement principal d’Okta. [En apprendre plus à propos des étapes de publication→](/docs/troubleshoot/product-lifecycle/product-release-stages)
Informations requises
Compte Auth0: inscription à l’URL auth0.com – React
16.11+: Ce package prend en charge React 16.11.0 et versions ultérieures, incluant React 17,
18, et 19 – Tailwind CSS 3+ : suivez le guide Guide d’installation de Tailwind
CSS
Installation
npm/pnpm : installe le package avec les dépendances paires requises (
react-hook-form et @auth0/auth0-react).shadcn : installe le code source du composant et la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration Auth0.Démarrage rapide
1. Enveloppez votre application avec Auth0Provider et Auth0ComponentProvider
App.tsx
2. Utilisez un composant universel Auth0
OrganizationManagementPage.tsx
Configuration
Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast pour tous les composants.
Auth0ComponentProvider
Configurer l’authentification, le thème, l’internationalisation, les notifications toast et les options de mise en cache des requêtes TanStack
Style
L’importation de la feuille de style dans le démarrage rapide (@auth0/universal-components-react/styles) active tous les styles de composants.
**Utilisateurs de Tailwind v4 :**ajoutez
@import "@auth0/universal-components-react/tailwind" à votre fichier CSS.**Utilisateurs de shadcn :**aucune importation nécessaire, les styles sont déjà inclus dans votre configuration Tailwind.Styling & Theming Guide
Apprennez comment personnaliser l’apparence des composants pour qu’elle corresponde à votre image de marque, y compris les préréglages de thèmes, la prise en charge du mode sombre, les variables CSS et les options de style
Exemples de mises en œuvre
Consultez des exemples fonctionnels complets dans les modèles d’application.Code Examples
Modèles d’applications React SPA (npm), React SPA (shadcn), et Next.js complètes avec schémas de mise en œuvre