コンテンツにスキップ
Authrim

ページテンプレート

概要

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

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

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

LoginTemplate

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

src/routes/login/+page.svelte
<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型デフォルト説明
availableProvidersSocialProvider[][]表示するソーシャルプロバイダー
enablePasskeybooleantruePasskeyログインオプションを表示
enableEmailCodebooleantrueメールコードオプションを表示
loadingbooleanfalse全体のローディング状態
loadingProviderSocialProvider | undefined—現在ロード中のプロバイダー
errorstring''表示するエラーメッセージ
titlestring'Welcome back'ページタイトル
subtitlestring'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-login={(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型デフォルト説明
availableProvidersSocialProvider[][]ソーシャルプロバイダー
enablePasskeybooleantruePasskeyオプションを表示
enableEmailCodebooleantrueメールオプションを表示
loadingbooleanfalseローディング状態
errorstring''エラーメッセージ
titlestring'Create account'ページタイトル

イベント

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

AccountSettingsTemplate

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

<AccountSettingsTemplate
  passkeys={passkeyList}
  sessions={sessionList}
  currentSessionId={currentSessId}
  on:add-passkey={handleAddPasskey}
  on:delete-passkey={(e) => deletePasskey(e.detail.credentialId)}
  on:revoke-session={(e) => revokeSession(e.detail.sessionId)}
  on:sign-out={handleSignOut}
/>

Props

Prop型説明
passkeysPasskeyItemDisplay[]登録済みPasskey
sessionsSessionItemDisplay[]アクティブセッション
currentSessionIdstring | undefined現在のセッションID
passkeyLoadingbooleanPasskeyセクションのローディング
sessionLoadingbooleanセッションセクションのローディング

イベント

add-passkey, delete-passkey, revoke-session, sign-out

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
    clientInfo={consentData.client}
    scopes={consentData.scopes}
    userInfo={consentData.user}
    on:approve={() => auth.consent.submit(challengeId, { approved: true })}
    on:deny={() => auth.consent.submit(challengeId, { approved: false })}
  />
{/if}

Props

Prop型説明
clientInfoConsentClientInfo要求元クライアント情報
scopesConsentScopeInfo[]要求スコープ
userInfoConsentUserInfo | undefined現在のユーザー情報
loadingbooleanローディング状態

イベント

approve, deny

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);
    // 結果を処理...
  }
</script>


<DeviceFlowTemplate
  on:submit={handleSubmit}
/>

Props

Prop型説明
loadingbooleanローディング状態
errorstringエラーメッセージ

イベント

submit（{ userCode: string } 付き）

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:reject={(e) => auth.ciba.reject(e.detail.authReqId)}
/>

Props

Prop型説明
requestsCIBAPendingRequest[]保留中のCIBAリクエスト
loadingbooleanローディング状態

イベント

approve（{ authReqId } 付き）、reject（{ authReqId } 付き）

ReauthTemplate

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

Props

Prop型説明
enablePasskeybooleanPasskeyオプションを表示
enableEmailCodebooleanメールコードオプションを表示
loadingbooleanローディング状態
errorstringエラーメッセージ
titlestringページタイトル

イベント

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

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

次のステップ