Skip to content

Commit 58eddb7

Browse files
grandmaestergrandmaester
committed
feat: updated content for components, fixed styling issues, added configs
1 parent ce21076 commit 58eddb7

44 files changed

Lines changed: 8547 additions & 847 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,5 @@
33
*.bak
44

55
node_modules
6-
universal-components/node_modules/
7-
universal-components/dist/
8-
temp/
9-
106
.vite
117
.lycheecache

‎main/docs.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5405,6 +5405,45 @@
54055405
{
54065406
"tab": "Events Catalog",
54075407
"href": "https://auth0.com/docs/events/"
5408+
},
5409+
{
5410+
"tab": "Universal Components",
5411+
"groups": [
5412+
{
5413+
"group": " ",
5414+
"pages": [
5415+
"docs/fr-ca/universal-components",
5416+
"docs/fr-ca/universal-components/auth0-component-provider",
5417+
"docs/fr-ca/universal-components/styling"
5418+
]
5419+
},
5420+
{
5421+
"group": "My Organization",
5422+
"pages": [
5423+
"docs/fr-ca/universal-components/my-organization/introduction",
5424+
{
5425+
"group": "Domain Management",
5426+
"pages": [
5427+
"docs/fr-ca/universal-components/my-organization/domain-management/domain-table"
5428+
]
5429+
},
5430+
{
5431+
"group": "IDP Management",
5432+
"pages": [
5433+
"docs/fr-ca/universal-components/my-organization/idp-management/sso-provider-table",
5434+
"docs/fr-ca/universal-components/my-organization/idp-management/sso-provider-create",
5435+
"docs/fr-ca/universal-components/my-organization/idp-management/sso-provider-edit"
5436+
]
5437+
},
5438+
{
5439+
"group": "Organization Management",
5440+
"pages": [
5441+
"docs/fr-ca/universal-components/my-organization/organization-management/organization-details-edit"
5442+
]
5443+
}
5444+
]
5445+
}
5446+
]
54085447
}
54095448
]
54105449
},
@@ -7862,6 +7901,45 @@
78627901
{
78637902
"tab": "Events Catalog",
78647903
"href": "https://auth0.com/docs/events/"
7904+
},
7905+
{
7906+
"tab": "Universal Components",
7907+
"groups": [
7908+
{
7909+
"group": " ",
7910+
"pages": [
7911+
"docs/ja-jp/universal-components",
7912+
"docs/ja-jp/universal-components/auth0-component-provider",
7913+
"docs/ja-jp/universal-components/styling"
7914+
]
7915+
},
7916+
{
7917+
"group": "My Organization",
7918+
"pages": [
7919+
"docs/ja-jp/universal-components/my-organization/introduction",
7920+
{
7921+
"group": "Domain Management",
7922+
"pages": [
7923+
"docs/ja-jp/universal-components/my-organization/domain-management/domain-table"
7924+
]
7925+
},
7926+
{
7927+
"group": "IDP Management",
7928+
"pages": [
7929+
"docs/ja-jp/universal-components/my-organization/idp-management/sso-provider-table",
7930+
"docs/ja-jp/universal-components/my-organization/idp-management/sso-provider-create",
7931+
"docs/ja-jp/universal-components/my-organization/idp-management/sso-provider-edit"
7932+
]
7933+
},
7934+
{
7935+
"group": "Organization Management",
7936+
"pages": [
7937+
"docs/ja-jp/universal-components/my-organization/organization-management/organization-details-edit"
7938+
]
7939+
}
7940+
]
7941+
}
7942+
]
78657943
}
78667944
]
78677945
}

‎main/docs/fr-ca/universal-components.mdx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: Composants universels Auth0
3+
description: Composants professionnels React pour la gestion d’organization Auth0, conçus pour vous aider à créer plus rapidement des applications sécurisées et conviviales.
4+
sidebarTitle: Aperçu
5+
"og:title": Composants universels Auth0
6+
"og:description": Composants React professionnels pour la gestion d’organization Auth0
7+
permalink: composants-universels
8+
---
9+
10+
<Info>
11+
**Accès anticipé** : cette fonctionnalité est actuellement proposée en accès anticipé. En l’utilisant, vous
12+
13+
acceptez les conditions d’essai gratuit applicables dans le [Contrat d’abonnement principal d’Okta](https://www.okta.com/agreements/). [En apprendre plus à propos des étapes de publication
14+
15+
→](/docs/troubleshoot/product-lifecycle/product-release-stages)
16+
17+
</Info>
18+
19+
## Informations requises
20+
21+
<Check>
22+
**Compte Auth0**: inscription à l’URL [auth0.com](https://auth0.com) – **React
23+
16.11+**: Ce package prend en charge React 16.11.0 et versions ultérieures, incluant React 17,
24+
18, et 19 – **Tailwind CSS 3+** : suivez le guide [Guide d’installation de Tailwind
25+
CSS](https://tailwindcss.com/docs/installation)
26+
</Check>
27+
28+
## Installation
29+
30+
<CodeGroup>
31+
```bash npm (Recommended)
32+
npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
33+
```
34+
35+
```bash pnpm
36+
pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
37+
```
38+
39+
```bash shadcn
40+
npx shadcn@latest add @auth0/organization-details-edit
41+
```
42+
43+
</CodeGroup>
44+
45+
<Note>
46+
**npm/pnpm :** installe le package avec les dépendances paires requises (`react-hook-form` et `@auth0/auth0-react`).
47+
48+
**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.
49+
50+
</Note>
51+
52+
## Démarrage rapide
53+
54+
### 1. Enveloppez votre application avec Auth0Provider et Auth0ComponentProvider
55+
56+
```tsx App.tsx
57+
import { Auth0Provider } from "@auth0/auth0-react";
58+
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
59+
import "@auth0/universal-components-react/styles";
60+
61+
const authDetails = {
62+
domain: import.meta.env.VITE_AUTH0_DOMAIN,
63+
};
64+
65+
function App() {
66+
return (
67+
<Auth0Provider
68+
domain={authDetails.domain}
69+
clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
70+
authorizationParams={{
71+
redirect_uri: window.location.origin,
72+
}}
73+
>
74+
<Auth0ComponentProvider authDetails={authDetails}>
75+
{/* Your app components */}
76+
</Auth0ComponentProvider>
77+
</Auth0Provider>
78+
);
79+
}
80+
```
81+
82+
### 2. Utilisez un composant universel Auth0
83+
84+
<Warning>
85+
Les composants exigent une configuration Auth0 du locataire. Consultez la page de chaque composant et ses
86+
exigences de configuration.
87+
</Warning>
88+
89+
```tsx OrganizationManagementPage.tsx
90+
importer { useAuth0 } from "@auth0/auth0-react";
91+
importer { OrganizationDetailsEdit } à partir de "@auth0/universal-components-react/spa";
92+
93+
function OrganizationManagementPage() {
94+
const { isAuthenticated, isLoading } = useAuth0();
95+
96+
if (isLoading) return <div>Chargement...</div>;
97+
if (!isAuthenticated) return <div>Veuillez vous connecter</div>;
98+
99+
return (
100+
<div>
101+
<OrganizationDetailsEdit />
102+
</div>
103+
);
104+
}
105+
```
106+
107+
## Configuration
108+
109+
`Auth0ComponentProvider` gère l’authentification, la mise en cache, l’internationalisation et les notifications toast pour tous les composants.
110+
111+
```tsx
112+
<Auth0ComponentProvider
113+
authDetails={{ domain: "your-tenant.auth0.com" }}
114+
i18n={{ currentLanguage: "en" }}
115+
themeSettings={{ mode: "light", theme: "default" }}
116+
>
117+
{/* Your app components */}
118+
</Auth0ComponentProvider>
119+
```
120+
121+
<Card
122+
title="Auth0ComponentProvider"
123+
icon="gear"
124+
href="/docs/universal-components/auth0-component-provider"
125+
>
126+
Configurer l’authentification, le thème, l’internationalisation, les notifications toast et les options de mise en cache des requêtes TanStack
127+
</Card>
128+
129+
## Style
130+
131+
L’importation de la feuille de style dans le démarrage rapide (`@auth0/universal-components-react/styles`) active tous les styles de composants.
132+
133+
<Note>
134+
**Utilisateurs de Tailwind v4 :**ajoutez `@import "@auth0/universal-components-react/tailwind"` à votre fichier CSS.
135+
136+
**Utilisateurs de shadcn :**aucune importation nécessaire, les styles sont déjà inclus dans votre configuration Tailwind.
137+
138+
</Note>
139+
140+
Effectuez la personnalisation avec des variables CSS pour qu’elle corresponde à votre marque :
141+
142+
```css
143+
:root {
144+
--primary: #4f46e5; /* your brand color */
145+
--primary-foreground: #ffffff; /* text on buttons */
146+
}
147+
```
148+
149+
<Card
150+
title="Styling & Theming Guide"
151+
icon="paintbrush"
152+
href="/docs/universal-components/styling"
153+
>
154+
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
155+
</Card>
156+
157+
## Exemples de mises en œuvre
158+
159+
Consultez des exemples fonctionnels complets dans les modèles d’application.
160+
161+
<Card
162+
title="Code Examples"
163+
icon="github"
164+
href="https://github.com/auth0/auth0-ui-components/tree/main/examples"
165+
>
166+
Modèles d’applications React SPA (npm), React SPA (shadcn), et Next.js complètes avec schémas de mise en œuvre
167+
</Card>
168+
169+
<CardGroup cols={2}>
170+
<Card
171+
title="SaaStart Live Demo"
172+
icon="play"
173+
href="https://universal-components-saastart.vercel.app/"
174+
>
175+
Découvrez les composants de My Organization en action dans l’application B2B SaaS de référence mise en ligne.
176+
</Card>
177+
178+
<Card
179+
title="SaaS Starter Repository"
180+
icon="github"
181+
href="https://github.com/auth0-developer-hub/auth0-b2b-saas-starter"
182+
>
183+
Un point de départ sécurisé et performant pour développer des applications Web B2B SaaS modernes.
184+
</Card>
185+
</CardGroup>

0 commit comments

Comments
 (0)