---
title: "@vonvon-kit/react"
description: "Provider React 19, hooks, composants de contrôle et blocs de construction d'interface hébergée pour les applications client."
locale: "fr"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/fr/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/react

## Configuration du fournisseur

Statut du registre : UNPUBLISHED. Installez ce SDK uniquement depuis un checkout du code source du dépôt ; n'utilisez pas de registre de paquets externe.

```tsx
import { VonvonProvider } from '@vonvon-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
<VonvonProvider
  mode="oidc"
  issuer="https://vonvon.id"
  clientId="client_abc123"
  redirectUri="https://app.example.com/auth/callback"
>
  {children}
</VonvonProvider>
  )
}
```

## Hooks

| Hook | Retourne |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: VonvonUser \| null |
| `useSession` | isLoaded, isSignedIn, session: VonvonSession \| null |
| `useSessionList` | isLoaded, sessions, setActive pour le sélecteur multi-session |
| `useSignIn` | Assistants du flux de connexion Hosted Auth |
| `useOrganization` | isLoaded, organization: VonvonOrganization \| null, membership |
| `useOrganizationList` | isLoaded, userMemberships pour l'interface du sélecteur d'organisation |
| `useAPIKeys` | Liste et actions des clés API de gestion pour les intégrations console |
| `useVonvonContext` | VonvonContextValue brut (usage avancé ; préférer les hooks typés ci-dessus) |

## Composants de contrôle

| Composant | Type de props | Objectif |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | Affiche les enfants uniquement lorsque la session est chargée et connectée |
| `SignedOut` | `SignedOutProps` | Affiche les enfants uniquement lorsque chargé et non connecté |
| `Protect` | `ProtectProps` | Barrière de permission et de rôle avec interface de secours optionnelle |
| `VonvonLoaded` | `VonvonLoadedProps` | Affiche les enfants une fois l'hydratation du SDK terminée (isLoaded true) |
| `VonvonLoading` | `VonvonLoadingProps` | Affiche les enfants pendant que le SDK est encore en chargement (isLoaded false) |
| `VonvonFailed` | `VonvonFailedProps` | Affiche les enfants lorsque le chargement du SDK échoue avec une erreur irrécupérable (status error) |
| `VonvonDegraded` | `VonvonDegradedProps` | Affiche les enfants lorsque le SDK est chargé mais en état dégradé (status degraded) |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | Gestionnaire de callback de redirection OAuth : recharge l'état de session et redirige vers afterSignInUrl ou appelle onSuccess |
| `RedirectToSignIn` | `RedirectToSignInProps` | Monte et redirige immédiatement vers la page de connexion |
| `RedirectToSignUp` | `RedirectToSignUpProps` | Monte et redirige immédiatement vers la page d'inscription |
| `RedirectToUserProfile` | `RedirectToUserProfileProps` | Monte et redirige immédiatement vers la page de profil utilisateur |
| `RedirectToOrganizationProfile` | `RedirectToOrganizationProfileProps` | Monte et redirige immédiatement vers la page de profil d'organisation |
| `RedirectToCreateOrganization` | `RedirectToCreateOrganizationProps` | Monte et redirige immédiatement vers la page de création d'organisation |
| `SignInButton` | `SignInButtonProps` | Bouton sans style qui navigue vers l'URL de connexion au clic |
| `SignUpButton` | `SignUpButtonProps` | Bouton sans style qui navigue vers l'URL d'inscription au clic |
| `SignOutButton` | `SignOutButtonProps` | Bouton sans style qui appelle signOut au clic |

## Composants d'interface

| Composant | Usage |
| --- | --- |
| `SignIn` | Panneau de connexion intégré (Hosted Auth) |
| `SignUp` | Panneau d'inscription intégré |
| `UserAvatar` | Image d'avatar utilisateur avec initiales de secours |
| `UserButton` | Menu avatar avec changement de session et déconnexion |
| `UserProfile` | Sécurité du compte et gestion du profil |
| `OrganizationSwitcher` | Sélecteur d'organisation active |
| `OrganizationProfile` | Membres, rôles, intégration admin SSO |
| `CreateOrganization` | Flux de création d'organisation |
| `OrganizationList` | Liste des organisations de l'utilisateur pour l'interface du sélecteur |

## Pas encore implémenté

Les éléments suivants figurent sur la feuille de route publique mais ne sont pas exportés par le package actuel. Ne supposez pas leur disponibilité dans cette version.

| Symbole | Engagement de conception |
| --- | --- |
| `GoogleOneTap` | Intégration connexion en un clic |
| `Waitlist` | Composant de barrière d'inscription à la liste d'attente |
| Composants de facturation | Intégrations de gestion d'utilisation et de plan |
| `useReverification` | Hook d'authentification step-up |

## Apparence

Transmettez `appearance` aux composants UI préconstruits tels que `SignIn`, `UserProfile` ou `OrganizationSwitcher`, et non à `VonvonProvider`. Les types Appearance exportés fournissent des substitutions typées de variables CSS et de classes d'éléments; tout le texte visible utilise les descripteurs d'exécution Lingui.

Source: https://vonvon.id/fr/sdks/react/index.mdx