---
title: "@xid-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 locale documentation index at: https://xid.dev/fr/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react

## Configuration du fournisseur

```tsx
import { XidProvider } from '@xid-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
<XidProvider publishableKey="pk_live_..." apiUrl="https://xid.dev">
  {children}
</XidProvider>
  )
}
```

## Hooks

| Hook | Retourne |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: XidUser \| null |
| `useSession` | isLoaded, isSignedIn, session: XidSession \| null |
| `useSessionList` | isLoaded, sessions, setActive pour le sélecteur multi-session |
| `useSignIn` | Assistants du flux de connexion Hosted Auth |
| `useOrganization` | isLoaded, organization: XidOrganization \| 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 |
| `useXidContext` | XidContextValue 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 |
| `XidLoaded` | `XidLoadedProps` | Affiche les enfants une fois l'hydratation du SDK terminée (isLoaded true) |
| `XidLoading` | `XidLoadingProps` | Affiche les enfants pendant que le SDK est encore en chargement (isLoaded false) |
| `XidFailed` | `XidFailedProps` | Affiche les enfants lorsque le chargement du SDK échoue avec une erreur irrécupérable (status error) |
| `XidDegraded` | `XidDegradedProps` | 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

Passez `appearance` à `XidProvider` pour remplacer les variables CSS pour les intégrations en marque blanche. Toutes les chaînes visibles par l'utilisateur utilisent des descripteurs Lingui runtime ; les types `Appearance`, `AppearanceVariables` et `AppearanceElements` sont exportés pour des surcharges typées.

Source: https://xid.dev/fr/sdks/react/index.mdx