@xid-kit/remix

Utilidades de servidor para loaders y actions de Remix, almacenamiento de sesión por cookie, manejador de callback OAuth y re-exportaciones del SDK React.

Estado

El estado del paquete es Paquete actual. Las utilidades de autenticación para loader/action de Remix, la integración de sesión por cookie y el manejador de callback OAuth están implementados. Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual.

Configuración del almacenamiento de sesión

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

Lectura de autenticación en loaders

getAuth extrae un bearer token o cookie de sesión, lo verifica sin llamadas de red y devuelve un AuthResult. requireAuth lanza automáticamente una redirección 302 hacia redirectPath cuando no hay autenticación.

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

Manejador de callback de OAuth

handleCallback valida el parámetro state para prevenir CSRF, intercambia el código de autorización y devuelve una Response con Set-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
}

Provider de cliente (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>
  )
}

Cliente de Management API

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 exportada

Exportar	Tipo	Propósito
`createXidSessionStorage`	function	Almacenamiento de sesión por cookie de Remix para tokens XID
`getAuth`	function	Verifica un JWT o token de sesión; devuelve AuthResult
`requireAuth`	function	Como getAuth pero lanza una respuesta de redirección cuando no hay autenticación
`handleCallback`	function	Callback de OAuth: valida el state, intercambia el código y establece la cookie de sesión
`xidClient`	function	Devuelve un cliente de Management API del lado del servidor vinculado a la clave secreta
`getTokenFromSession, setTokensInSession, clearTokensFromSession`	funciones	Utilidades de tokens de bajo nivel para gestión de sesiones personalizada

Reexportaciones

Re-exporta todos los componentes de cliente y hooks de @xid-kit/react para que root.tsx solo necesite una importación tanto para el provider como para los componentes de cliente.

PKCE y seguridad

Los clientes públicos usan Authorization Code con PKCE S256. No se almacena ningún secreto de cliente.
handleCallback valida el parámetro state contra la sesión para prevenir CSRF.
Los access tokens se almacenan en cookies de sesión HttpOnly; nunca se escriben en localStorage.