@xid-kit/remix

Assistants serveur de loader et action Remix, stockage de session parcookie et gestionnaire de callback OAuth avec ré-exports du SDK React.

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

// 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é.

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 avecSet-Cookie.

// 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)

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

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 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 sessionHttpOnly ; ils ne sont jamais écrits dans localStorage.