ページテンプレート

概要

@authrim/sveltekit/ui/templates は7つのページテンプレートを提供します — 完全にスタイル付けされたレスポンシブなリファレンス実装で、そのまま使用するか、コピーしてカスタマイズできます。

import {
  LoginTemplate,
  SignUpTemplate,
  AccountSettingsTemplate,
  ConsentTemplate,
  DeviceFlowTemplate,
  CIBATemplate,
  ReauthTemplate,
} from '@authrim/sveltekit/ui/templates';

すべてのテンプレートはUIライブラリのコンポーネントを使用し、--authrim-* CSSカスタムプロパティに準拠します。

LoginTemplate

Passkey、メールコード、ソーシャルログインオプションを含む完全なログインページ。

<script lang="ts">
  import { LoginTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';
  import { goto } from '$app/navigation';

  const auth = getAuthContext();

  let loading = $state(false);
  let loadingProvider = $state<string | undefined>(undefined);
  let error = $state('');

  async function handlePasskeyLogin() {
    loading = true;
    error = '';
    const { error: err } = await auth.passkey.login();
    loading = false;
    if (err) { error = err.message; return; }
    goto('/');
  }

  async function handleSocialLogin(e: CustomEvent<{ provider: string }>) {
    const provider = e.detail.provider;
    loadingProvider = provider;
    error = '';
    const { error: err } = await auth.social.loginWithPopup(provider);
    loadingProvider = undefined;
    if (err) { error = err.message; return; }
    goto('/');
  }
</script>

<LoginTemplate
  availableProviders={['google', 'github', 'apple']}
  enablePasskey={true}
  enableEmailCode={true}
  {loading}
  {loadingProvider}
  {error}
  title="おかえりなさい"
  subtitle="アカウントにサインイン"
  on:passkey-login={handlePasskeyLogin}
  on:social-login={handleSocialLogin}
  on:email-submit={(e) => sendCode(e.detail.email)}
  on:code-submit={(e) => verifyCode(e.detail.code)}
  on:code-resend={resendCode}
  on:dismiss-error={() => { error = ''; }}
/>

Props

Prop	型	デフォルト	説明
`availableProviders`	`SocialProvider[]`	`[]`	表示するソーシャルプロバイダー
`enablePasskey`	`boolean`	`true`	Passkeyログインオプションを表示
`enableEmailCode`	`boolean`	`true`	メールコードオプションを表示
`loading`	`boolean`	`false`	全体のローディング状態
`loadingProvider`	`SocialProvider \| undefined`	—	現在ロード中のプロバイダー
`error`	`string`	`''`	表示するエラーメッセージ
`title`	`string`	`'Welcome back'`	ページタイトル
`subtitle`	`string`	`'Sign in to your account'`	ページサブタイトル

イベント

イベント	ペイロード	説明
`passkey-login`	—	Passkeyログイン要求
`social-login`	`{ provider }`	ソーシャルログイン要求
`email-submit`	`{ email }`	メールコード送信要求
`code-submit`	`{ code }`	コード検証要求
`code-resend`	—	コード再送信要求
`dismiss-error`	—	エラー非表示

公開メソッド

メソッド	説明
`setEmailStep(step)`	親からメールフォームのステップ（`'email'` or `'code'`）を制御

レイアウト

フルハイトグラデーション背景上の中央配置カード（max-width: 420px）
区切り線でセクション分離：Passkey → メールコード → ソーシャル
フッターに「アカウントをお持ちでない方はサインアップ」リンク

SignUpTemplate

Passkeyとメールコードオプションのマルチメソッドサインアップページ。

<SignUpTemplate
  availableProviders={['google', 'github']}
  enablePasskey={true}
  enableEmailCode={true}
  {loading}
  {error}
  on:passkey-signup={(e) => signUpWithPasskey(e.detail)}
  on:social-signup={(e) => socialSignup(e.detail.provider)}
  on:email-submit={(e) => sendSignupCode(e.detail)}
  on:code-submit={(e) => verifySignupCode(e.detail.code)}
  on:dismiss-error={() => { error = ''; }}
/>

Props

Prop	型	デフォルト	説明
`availableProviders`	`SocialProvider[]`	`[]`	ソーシャルプロバイダー
`enablePasskey`	`boolean`	`true`	Passkeyオプションを表示
`enableEmailCode`	`boolean`	`true`	メールオプションを表示
`loading`	`boolean`	`false`	ローディング状態
`error`	`string`	`''`	エラーメッセージ
`title`	`string`	`'Create account'`	ページタイトル

イベント

passkey-signup, social-signup, email-submit, code-submit, code-resend, dismiss-error

AccountSettingsTemplate

Passkey一覧、セッション一覧、プロフィール情報のアカウント管理ページ。

<AccountSettingsTemplate
  passkeys={passkeyList}
  sessions={sessionList}
  currentSessionId={currentSessId}
  on:passkey-register={handleAddPasskey}
  on:passkey-delete={(e) => deletePasskey(e.detail.credentialId)}
  on:session-revoke={(e) => revokeSession(e.detail.sessionId)}
  on:account-link={(e) => linkAccount(e.detail.provider)}
  on:account-unlink={(e) => unlinkAccount(e.detail.accountId)}
/>

Props

Prop	型	説明
`passkeys`	`PasskeyItemDisplay[]`	登録済みPasskey
`sessions`	`SessionItemDisplay[]`	アクティブセッション
`linkedAccounts`	`LinkedAccountDisplay[]`	連携済みソーシャルアカウント
`currentSessionId`	`string \| undefined`	現在のセッションID
`loading`	`boolean`	全体のローディング
`passkeyLoading`	`boolean`	Passkeyセクションのローディング
`deletingPasskeyId`	`string \| undefined`	削除中のPasskey
`revokingSessionId`	`string \| undefined`	失効中のセッション
`unlinkingAccountId`	`string \| undefined`	解除中の連携アカウント
`linkableProviders`	`SocialProvider[]`	連携可能なプロバイダー
`linkingProvider`	`SocialProvider \| undefined`	連携中のプロバイダー

イベント

passkey-register, passkey-delete, session-revoke, account-link, account-unlink

ConsentTemplate

クライアント情報、要求スコープ、許可/拒否ボタンのOAuth同意画面。

<script lang="ts">
  import { ConsentTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';
  import { page } from '$app/stores';

  const auth = getAuthContext();
  const challengeId = $page.url.searchParams.get('challenge');

  let consentData = $state(null);

  $effect(() => {
    if (challengeId) {
      auth.consent.getData(challengeId).then(data => {
        consentData = data;
      });
    }
  });
</script>

{#if consentData}
  <ConsentTemplate
    client={consentData.client}
    scopes={consentData.scopes}
    user={consentData.user}
    organizations={consentData.organizations}
    selectedOrgId={consentData.target_org_id}
    roles={consentData.roles}
    actingAs={consentData.acting_as}
    showOrgSelector={consentData.features.org_selector_enabled}
    showActingAs={consentData.features.acting_as_enabled}
    showRoles={consentData.features.show_roles}
    on:allow={(e) => auth.consent.submit(challengeId, {
      approve: true,
      selectedOrgId: e.detail.selectedOrgId,
      actingAsUserId: e.detail.actingAsUserId,
    })}
    on:deny={() => auth.consent.submit(challengeId, { approve: false })}
  />
{/if}

Props

Prop	型	説明
`client`	`ConsentClientInfo \| null`	要求元クライアント情報
`scopes`	`ConsentScopeInfo[]`	要求スコープ
`user`	`ConsentUserInfo \| null`	現在のユーザー情報
`organizations`	`ConsentOrgInfo[]`	grant対象として選べる組織
`selectedOrgId`	`string \| null`	選択中の組織ID
`roles`	`string[]`	表示するロール
`actingAs`	`ConsentActingAsInfo \| null`	delegated access context
`loading`	`boolean`	ローディング状態

イベント

allow, deny, switch-account, org-change, dismiss-error

DeviceFlowTemplate

デバイス認可コード入力画面（RFC 8628）。

<script lang="ts">
  import { DeviceFlowTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';

  const auth = getAuthContext();

  async function handleSubmit(e: CustomEvent<{ userCode: string }>) {
    const result = await auth.deviceFlow.submit(e.detail.userCode, true);
    // result.message にサーバーの確認メッセージが入ります。
  }
</script>

<DeviceFlowTemplate
  on:approve={handleSubmit}
  on:deny={(e) => auth.deviceFlow.submit(e.detail.userCode, false)}
/>

Props

Prop	型	説明
`loading`	`boolean`	ローディング状態
`error`	`string`	エラーメッセージ
`success`	`string`	成功メッセージ
`initialCode`	`string`	初期入力するユーザーコード
`qrCodeUrl`	`string`	QRコード画像URL
`verificationUrl`	`string`	QRコードと一緒に表示する検証URL

イベント

approve, deny, code-change, dismiss-error, dismiss-success

CIBATemplate

CIBA（Client Initiated Backchannel Authentication）承認画面。

<script lang="ts">
  import { CIBATemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';

  const auth = getAuthContext();
  let requests = $state([]);

  $effect(() => {
    auth.ciba.getData('[email protected]').then(data => {
      requests = data;
    });
  });
</script>

<CIBATemplate
  {requests}
  on:approve={(e) => auth.ciba.approve(e.detail.authReqId, userId, sub)}
  on:deny={(e) => auth.ciba.reject(e.detail.authReqId)}
  on:refresh={loadRequests}
/>

Props

Prop	型	説明
`requests`	`CIBAPendingRequest[]`	保留中のCIBAリクエスト
`loading`	`boolean`	ローディング状態
`error`	`string`	エラーメッセージ
`success`	`string`	成功メッセージ

イベント

approve（{ authReqId } 付き）、deny（{ authReqId } 付き）、refresh、dismiss-error、dismiss-success

ReauthTemplate

機密操作のための再認証プロンプト。

Props

Prop	型	説明
`enablePasskey`	`boolean`	Passkeyオプションを表示
`enableEmailCode`	`boolean`	メールコードオプションを表示
`loading`	`boolean`	ローディング状態
`error`	`string`	エラーメッセージ
`title`	`string`	ページタイトル

イベント

passkey-login, email-submit, code-submit, dismiss-error

テンプレートテーマ

すべてのテンプレートは --authrim-* CSSカスタムプロパティを使用します。ブランドに合わせてオーバーライド：

:root {
  /* プライマリブランドカラー */
  --authrim-color-primary: #0066cc;
  --authrim-color-primary-hover: #0052a3;
  --authrim-color-primary-active: #003d7a;
  --authrim-color-primary-subtle: #e6f0ff;
  --authrim-color-primary-text: #ffffff;

  /* 背景 */
  --authrim-color-bg: #ffffff;
  --authrim-color-bg-subtle: #f8fafc;

  /* タイポグラフィ */
  --authrim-font-sans: 'Inter', system-ui, sans-serif;

  /* ボーダー半径 */
  --authrim-radius-lg: 12px;
}

テンプレートはフルビューポート高さで中央配置カードレイアウトと微妙なグラデーション背景を使用します。

次のステップ

UIライブラリ — 個別コンポーネントの詳細
高度なフロー — Consent、Device Flow、CIBA APIの詳細
設定 — 設定リファレンス