@xid-kit/remix

Remix-Loader- und Action-Server-Hilfsfunktionen, Cookie-Sitzungsspeicherund OAuth-Callback-Handler mit React-SDK-Re-Exporten.

Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: Aktuelles Paket.Remix-Loader/Action-Auth-Hilfsfunktionen, Cookie-Sitzungsintegration undOAuth-Callback-Handler sind implementiert. Ein echter IdP-Round-Trip aufProduktionsinfrastruktur steht noch manuell aus.

Sitzungsspeicher-Einrichtung

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

Auth in Loadern lesen

getAuth prüft einen Bearer-Token, ein explizites Anwendungs-JWT-Cookie, einen optionalen gleichursprünglichen Core-Austausch oder das konfigurierte Remix-Sitzungs-JWT und gibt ein AuthResult zurück. requireAuth löst bei fehlender Authentifizierung eine 302-Weiterleitung zu redirectPath aus.

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'

const jwtKey = JSON.parse(process.env.XID_JWKS_PUBLIC_KEY!)
const authOptions = {
  jwtKey,
  sessionStorage,
  sessionTokenExchange: { endpoint: '/v1/sessions/token' },
}

// Optional check
export async function loader({ request }: LoaderFunctionArgs) {
  const auth = await getAuth(request, authOptions)
  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, authOptions, { redirectPath: '/login' })
  return json({ userId: auth.userId })
}

OAuth-Callback-Handler

handleCallback prüft den state-Parameter zurCSRF-Prävention, tauscht den Autorisierungscode ein und gibt eineResponse mit Set-Cookie zurück.

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

Client-Provider (root.tsx)

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

export default function App() {
  return (
    <XidProvider
      mode="oidc"
      issuer="https://xid.dev"
      clientId="client_abc123"
      redirectUri="https://app.example.com/auth/callback"
    >
      <Outlet />
    </XidProvider>
  )
}

Management-API-Client

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

Exportierte API

Exportieren	Art	Zweck
`createXidSessionStorage`	function	Remix-Cookie-Sitzungsspeicher für XID-Tokens
`getAuth`	function	JWT oder Sitzungs-Token prüfen; gibt AuthResult zurück
`requireAuth`	function	Wie getAuth, aber löst beim Fehlen einer Authentifizierung eineWeiterleitungsantwort aus
`handleCallback`	function	OAuth-Callback: validiert State, tauscht Code ein, setzt Session-Cookie
`xidClient`	function	Gibt einen serverseitigen Management-API-Client zurück, der an den SecretKey gebunden ist
`getTokenFromSession, setTokensInSession, clearTokensFromSession`	Funktionen	Low-Level-Token-Hilfsfunktionen für benutzerdefinierte Sitzungsverwaltung

Neuexporte

Re-exportiert alle @xid-kit/react-Client-Komponenten und Hooks,sodass root.tsx nur einen Import für Provider- undClient-Komponenten benötigt.

PKCE und Sicherheit

Öffentliche Clients verwenden Authorization Code mit PKCE S256. Es wirdkein Client-Secret gespeichert.
handleCallback prüft den state-Parameter gegen die Sitzung,um CSRF zu verhindern.
Access-Tokens werden in HttpOnly-Session-Cookies gespeichert undnie in localStorage geschrieben.