---
title: "@xid-kit/remix"
description: "Assistants serveur de loader et action Remix, stockage de session parcookie et gestionnaire de callback OAuth avec ré-exports du SDK React."
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/remix

## Statut

Le statut du package est **Package actuel**. Les assistantsd'authentification de loader/action Remix, l'intégration de session parcookie et le gestionnaire de callback OAuth sont implémentés. Unaller-retour réel avec un IdP sur une infrastructure de production est enattente de vérification manuelle.

## Configuration du stockage de session

```ts
// app/sessions.server.ts
import { createXidSessionStorage } from '@xid-kit/remix'

export const sessionStorage = createXidSessionStorage({
  secret: process.env.SESSION_SECRET!, // required: cookie signing secret
  // cookieName: '__xid_session', maxAge: 2592000, secure: true
})
```

## Lecture de l'authentification dans les loaders

`getAuth` extrait un jeton bearer ou un cookie de session, le vérifiesans réseau et retourne un `AuthResult`. `requireAuth` lèveautomatiquement une redirection 302 vers `redirectPath` lorsque nonauthentifié.

```ts
import { getAuth, requireAuth } from '@xid-kit/remix'
import { json, redirect } from '@remix-run/node'
import type { LoaderFunctionArgs } from '@remix-run/node'
import { sessionStorage } from '~/sessions.server'

// Optional check
export async function loader({ request }: LoaderFunctionArgs) {
  const auth = await getAuth(request, {
jwtKey: process.env.XID_JWT_KEY!,
sessionStorage,
  })
  if (!auth.userId) return redirect('/login')
  return json({ userId: auth.userId, orgId: auth.orgId })
}

// Guard: throws redirect automatically when unauthenticated
export async function protectedLoader({ request }: LoaderFunctionArgs) {
  const auth = await requireAuth(
request,
{ jwtKey: process.env.XID_JWT_KEY!, sessionStorage },
{ redirectPath: '/login' },
  )
  return json({ userId: auth.userId })
}
```

## Gestionnaire de callback OAuth

`handleCallback` valide le paramètre `state` pour prévenir leCSRF, échange le code d'autorisation et retourne une `Response` avec`Set-Cookie`.

```ts
// app/routes/auth.callback.ts
import { handleCallback } from '@xid-kit/remix'
import type { ActionFunctionArgs } from '@remix-run/node'
import { sessionStorage } from '~/sessions.server'

export async function action({ request }: ActionFunctionArgs) {
  const result = await handleCallback(request, {
clientId: process.env.XID_CLIENT_ID!,
redirectUri: process.env.XID_REDIRECT_URI!,
sessionStorage,
defaultReturnTo: '/dashboard',
  })

  if (!result.ok) throw new Response(result.error, { status: 400 })
  return result.response // 302 redirect + Set-Cookie
}
```

## Fournisseur client (root.tsx)

```tsx
import { XidProvider } from '@xid-kit/remix' // re-export from @xid-kit/react
import { useLoaderData, Outlet } from '@remix-run/react'

export default function App() {
  const { auth } = useLoaderData<typeof loader>()
  return (
<XidProvider
  publishableKey={window.ENV.XID_PUBLISHABLE_KEY}
  initialState={auth.userId ? { userId: auth.userId } : undefined}
>
  <Outlet />
</XidProvider>
  )
}
```

## Client de l'API de gestion

```ts
import { xidClient } from '@xid-kit/remix'

const client = xidClient({ secretKey: process.env.XID_SECRET_KEY! })

export async function loader() {
  const result = await client.getUser('user_abc')
  if (!result.ok) throw new Response(result.error.message, { status: result.error.status })
  return json(result.value)
}
```

## API exportée

| Exporter | Type | Objectif |
| --- | --- | --- |
| `createXidSessionStorage` | function | Stockage de session par cookie Remix pour les jetons XID |
| `getAuth` | function | Vérifier le jeton JWT ou de session ; retourne AuthResult |
| `requireAuth` | function | Comme getAuth mais lève une réponse de redirection lorsque non authentifié |
| `handleCallback` | function | Callback OAuth : valide l'état, échange le code, définit le cookie desession |
| `xidClient` | function | Retourne un client d'API de gestion côté serveur lié à la clé secrète |
| `getTokenFromSession, setTokensInSession, clearTokensFromSession` | fonctions | Assistants de jetons de bas niveau pour la gestion personnalisée dessessions |

## Réexportations

Ré-exporte tous les composants client et hooks [@xid-kit/react](/fr/sdks/react) pourque `root.tsx` n'ait besoin que d'un seul import pour le fournisseuret les composants client.

## PKCE et sécurité

- Les clients publics utilisent Authorization Code avec PKCE S256. Aucunsecret client n'est stocké.
- `handleCallback` valide le paramètre `state` par rapport à lasession pour prévenir le CSRF.
- Les jetons d'accès sont stockés dans des cookies de session`HttpOnly` ; ils ne sont jamais écrits dans `localStorage`.

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