---
title: "@vonvon-kit/remix"
description: "Remix ローダーとアクションサーバーヘルパー、Cookie セッションストレージ、React SDK の再エクスポートを含む OAuth コールバックハンドラー。"
locale: "ja"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/ja/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/remix

## 状態

Registry 状態: UNPUBLISHED。この SDK はリポジトリのソース checkout からのみインストールし、外部 package registry は使用しないでください。

パッケージステータス：**現行パッケージ**。Remix ローダー/アクション認証ヘルパー、Cookie セッション統合、OAuth コールバックハンドラーが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

## セッションストレージセットアップ

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

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

## ローダーでの認証読み取り

`getAuth` は Bearer トークン、明示的なアプリケーション JWT Cookie、任意の同一オリジン Core exchange、または設定済み Remix セッション JWT を検証し、`AuthResult` を返します。`requireAuth` は未認証時に `redirectPath` への 302 リダイレクトをスローします。

```ts
import { getAuth, requireAuth } from '@vonvon-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.VONVON_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 コールバックハンドラー

`handleCallback` は CSRF を防ぐために `state` パラメーターを検証し、認可コードを交換して `Set-Cookie` を含む `Response` を返します。

```ts
// app/routes/auth.callback.ts
import { handleCallback } from '@vonvon-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.VONVON_CLIENT_ID!,
redirectUri: process.env.VONVON_REDIRECT_URI!,
sessionStorage,
defaultReturnTo: '/dashboard',
  })

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

## クライアントプロバイダー（root.tsx）

```tsx
import { VonvonProvider } from '@vonvon-kit/remix' // re-export from @vonvon-kit/react
import { Outlet } from '@remix-run/react'

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

## Management API クライアント

```ts
import { vonvonClient } from '@vonvon-kit/remix'

const client = vonvonClient({ secretKey: process.env.VONVON_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

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `createVonvonSessionStorage` | function | Vonvon トークン用の Remix Cookie セッションストレージ |
| `getAuth` | function | JWT またはセッショントークンを検証し、AuthResult を返します |
| `requireAuth` | function | getAuth に似ていますが、未認証時にリダイレクトレスポンスをスローします |
| `handleCallback` | function | OAuth コールバック：state を検証し、コードを交換し、セッション Cookie を設定します |
| `vonvonClient` | function | シークレットキーに紐付けられたサーバーサイド Management API クライアントを返します |
| `getTokenFromSession, setTokensInSession, clearTokensFromSession` | 関数 | カスタムセッション処理用の低レベルトークンヘルパー |

## 再エクスポート

すべての [@vonvon-kit/react](/ja/sdks/react) クライアントコンポーネントとフックを再エクスポートします。`root.tsx` はプロバイダーとクライアントコンポーネントの両方に 1 つのインポートのみで済みます。

## PKCE とセキュリティ

- パブリッククライアントは PKCE S256 付き認可コードを使用します。クライアントシークレットは保存されません。
- `handleCallback` は CSRF を防ぐためにセッションに対して `state` パラメーターを検証します。
- アクセストークンは `HttpOnly` セッション Cookie に保存されます。`localStorage` には書き込まれません。

Source: https://vonvon.id/ja/sdks/remix/index.mdx