@xid-kit/react

Provider React 19, hooks, composants de contrôle et blocs de construction d'interface hébergée pour les applications client.

Configuration du fournisseur

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.