@xid-kit/remix

Auxiliares de servidor para loader e action do Remix, armazenamentode sessão em cookie e manipulador de callback OAuth com re-exports doReact SDK.

Estado

O status do pacote é Pacote atual. Auxiliares de autenticaçãopara loader/action do Remix, integração de sessão em cookie emanipulador de callback OAuth estão implementados. Uma ida e voltareal com o IdP em infraestrutura de produção ainda está pendente deverificação manual.

Configuração do armazenamento de sessão

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

Lendo autenticação em loaders

getAuth extrai um bearer token ou cookie de sessão, verificasem rede e retorna um AuthResult. requireAuth lançaautomaticamente um redirecionamento 302 para redirectPathquando não autenticado.

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

Manipulador de callback OAuth

handleCallback valida o parâmetro state para prevenirCSRF, troca o código de autorização e retorna uma Response comSet-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 do 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 da 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	Finalidade
`createXidSessionStorage`	function	Armazenamento de sessão em cookie do Remix para tokens XID
`getAuth`	function	Verifica JWT ou token de sessão; retorna AuthResult
`requireAuth`	function	Como getAuth, mas lança uma resposta de redirecionamento quando nãoautenticado
`handleCallback`	function	Callback OAuth: valida state, troca código, define cookie de sessão
`xidClient`	function	Retorna um cliente da Management API do lado do servidor vinculado àchave secreta
`getTokenFromSession, setTokensInSession, clearTokensFromSession`	funções	Auxiliares de token de baixo nível para tratamento customizado desessão

Re-exports

Faz re-export de todos os componentes cliente e hooks de@xid-kit/react para que root.tsx precise de apenas umimport para provider e componentes cliente.

PKCE e segurança

Clientes públicos usam Authorization Code com PKCE S256. Nenhumsegredo de cliente é armazenado.
handleCallback valida o parâmetro state na sessão paraprevenir CSRF.
Tokens de acesso são armazenados em cookies de sessãoHttpOnly; nunca são gravados no localStorage.