---
title: "@xid-kit/solid"
description: "Fournisseur de contexte SolidJS, primitives d'authentification basées surdes signaux et composants headless construits sur @xid-kit/core."
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/solid

## Statut

Le statut du package est **Package actuel**. Le fournisseur de contexteSolidJS, les primitives basées sur des signaux et les composants headlesssont implémentés. Un aller-retour réel avec un IdP sur une infrastructurede production est en attente de vérification manuelle.

## Configuration du fournisseur

Enveloppez votre application avec `XidProvider`. Il crée un`XidClient`, appelle `client.load()` au montage pour récupérerla session courante et se démonte via `onCleanup`.

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

export function App() {
  return (
<XidProvider publishableKey="pk_live_...">
  <Routes />
</XidProvider>
  )
}
```

## Primitives d'authentification

Chaque primitive retourne un `Accessor<T>` réactif (fonctionsgetter). Appelez-les dans JSX ou dans `createEffect` pour suivre leschangements.

```tsx
import { createAuth, createUser, createOrganization, createSession } from '@xid-kit/solid'
import { Show } from 'solid-js'

function Profile() {
  const auth = createAuth()
  // auth.isLoaded()  -- Accessor<boolean>
  // auth.isSignedIn() -- Accessor<boolean>
  // auth.userId()    -- Accessor<string | null>
  // auth.getToken()  -- () => Promise<Result<string, XidError>>
  // auth.signOut()   -- (options?) => Promise<Result<null, XidError>>

  return (
<Show when={auth.isLoaded()} fallback={<p>Loading...</p>}>
  <Show when={auth.isSignedIn()} fallback={<p>Not signed in</p>}>
    <p>Signed in as {auth.userId()}</p>
    <button onClick={() => void auth.signOut()}>Sign out</button>
  </Show>
</Show>
  )
}
```

## createOrganization et createSession

```tsx
const org = createOrganization()
// org() is CreateOrganizationReturn
if (org().isSignedIn) {
  console.log(org().organization?.name, org().membership?.role)
  await org().setActive('org_new_id')
}

const session = createSession()
if (session().isSignedIn) {
  const { value: token } = await session().getToken()
  // use token for backend requests
}
```

## Composants headless

```tsx
import { SignInButton, SignOutButton, Protect } from '@xid-kit/solid'

// Navigates to /sign-in by default
<SignInButton signInUrl="/auth/sign-in" redirectUrl="/dashboard">
  Log in
</SignInButton>

// Signs out all sessions; pass sessionId to target one
<SignOutButton redirectUrl="/home">Log out</SignOutButton>

// Role and permission gate
<Protect role="org:admin" fallback={<p>Admins only</p>}>
  <Settings />
</Protect>

<Protect permission="org:member:write" fallback={null}>
  <InviteForm />
</Protect>
```

## API exportée

| Exporter | Type | Objectif |
| --- | --- | --- |
| `XidProvider` | composant | Crée XidClient, appelle load() au montage et se démonte via onCleanup |
| `createAuth` | primitive | isLoaded, isSignedIn, userId, sessionId, session, getToken, signOut entant qu'Accesseurs |
| `createUser` | primitive | Accesseur encapsulant une union discriminante sur isLoaded / isSignedIn /user |
| `createOrganization` | primitive | Accesseur retournant l'organisation, l'appartenance et setActive pourl'organisation active |
| `createSession` | primitive | Accesseur retournant la session et getToken pour la session active |
| `SignInButton` | composant | Bouton headless naviguant vers l'URL de connexion au clic |
| `SignOutButton` | composant | Bouton headless qui appelle signOut au clic |
| `Protect` | composant | Portail de rôle et permission avec prop de secours |

## Stockage des jetons

- Les jetons de session sont des cookies `HttpOnly` définis par leWorker XID. Le SDK ne stocke jamais les jetons dans `localStorage`.
- `getToken()` retourne un JWT de courte durée (60 s) mis en cache par`TokenManager` dans `@xid-kit/core`.

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