認証

概要

AuthrimClient は4つの認証名前空間を提供します：passkey、emailCode、social、session。すべてのメソッドは AuthResponse<T> — { data, error } の判別共用体を返します。

プロトコルの詳細（WebAuthn内部動作、PKCEフロー等）についてはWeb SDKドキュメントを参照してください。

Passkey認証

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

  const auth = getAuthContext();

  let loading = $state(false);
  let error = $state('');

  async function login() {
    loading = true;
    error = '';
    const { data, error: err } = await auth.passkey.login();

    if (err) {
      error = err.message;
      loading = false;
      return;
    }

    goto('/');
  }
</script>

<button onclick={login} disabled={loading}>
  {loading ? 'サインイン中...' : 'Passkeyでサインイン'}
</button>
{#if error}<p class="error">{error}</p>{/if}

サインアップ

const { data, error } = await auth.passkey.signUp({
  displayName: 'Alice',
  username: '[email protected]',  // オプション
});

追加Passkey登録

認証済みユーザーがPasskeyを追加する場合：

const { data, error } = await auth.passkey.register({
  displayName: 'MacBook Pro',
});
// data.credentialId — 新しいクレデンシャルID

Conditional UI（Passkey自動入力）

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { getAuthContext } from '@authrim/sveltekit';
  import { goto } from '$app/navigation';

  const auth = getAuthContext();

  onMount(async () => {
    if (await auth.passkey.isConditionalUIAvailable()) {
      const { data } = await auth.passkey.login({ conditional: true });
      if (data) goto('/');
    }
  });

  onDestroy(() => auth.passkey.cancelConditionalUI());
</script>

<input type="text" autocomplete="username webauthn" placeholder="メールアドレス" />

Passkey APIリファレンス

メソッド	シグネチャ	説明
`login(options?)`	`(PasskeyLoginOptions?) → AuthResponse<AuthSessionData>`	Passkeyでログイン
`signUp(options)`	`(PasskeySignUpOptions) → AuthResponse<AuthSessionData>`	登録＋ログイン
`register(options?)`	`(PasskeyRegisterOptions?) → AuthResponse<PasskeyCredential>`	既存アカウントにPasskey追加
`isSupported()`	`() → boolean`	WebAuthnサポート確認
`isConditionalUIAvailable()`	`() → Promise<boolean>`	Conditional UIサポート確認
`cancelConditionalUI()`	`() → void`	保留中のConditionalリクエストをキャンセル

メールコード認証

2ステップフロー：メールアドレスにコードを送信し、検証します。

コード送信

const { data, error } = await auth.emailCode.send('[email protected]');

if (data) {
  console.log('コード送信済み、有効期限:', data.expiresIn, '秒');
}

コード検証

const { data, error } = await auth.emailCode.verify(
  '[email protected]',
  '123456',
);

if (data) {
  // 認証完了 — data.session, data.user が利用可能
}

メールコードフロー全体

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

  const auth = getAuthContext();

  let step: 'email' | 'code' = $state('email');
  let email = $state('');
  let code = $state('');
  let loading = $state(false);
  let error = $state('');

  async function sendCode() {
    loading = true;
    error = '';
    const { error: err } = await auth.emailCode.send(email);
    loading = false;

    if (err) {
      error = err.message;
      return;
    }
    step = 'code';
  }

  async function verifyCode() {
    loading = true;
    error = '';
    const { data, error: err } = await auth.emailCode.verify(email, code);
    loading = false;

    if (err) {
      error = err.message;
      return;
    }
    goto('/');
  }
</script>

{#if step === 'email'}
  <form onsubmit={sendCode}>
    <input type="email" bind:value={email} placeholder="メールアドレス" required />
    <button type="submit" disabled={loading}>コードを送信</button>
  </form>
{:else}
  <p>{email} にコードを送信しました</p>
  <form onsubmit={verifyCode}>
    <input type="text" bind:value={code} placeholder="6桁のコードを入力"
           inputmode="numeric" maxlength="6" required />
    <button type="submit" disabled={loading}>検証</button>
  </form>
  <button onclick={() => step = 'email'}>戻る</button>
{/if}

{#if error}<p class="error">{error}</p>{/if}

メールコードAPIリファレンス

メソッド	シグネチャ	説明
`send(email, options?)`	`(string, EmailCodeSendOptions?) → AuthResponse<EmailCodeSendResult>`	確認コードを送信
`verify(email, code, options?)`	`(string, string, EmailCodeVerifyOptions?) → AuthResponse<AuthSessionData>`	コードを検証して認証
`hasPendingVerification(email)`	`(string) → boolean`	コードが送信済みか確認
`getRemainingTime(email)`	`(string) → number`	コードの残り有効秒数
`clearPendingVerification(email)`	`(string) → void`	保留状態をクリア

ソーシャルログイン

ポップアップログイン

const { data, error } = await auth.social.loginWithPopup('google');

リダイレクトログイン

// ステップ1: リダイレクト（ページから離れます）
await auth.social.loginWithRedirect('github');

// ステップ2: コールバック処理（/callbackページ）
if (auth.social.hasCallbackParams()) {
  const { data, error } = await auth.social.handleCallback();
  if (data) window.location.href = '/';
}

コールバックページ

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

  const auth = getAuthContext();

  let error = $state('');
  let processing = $state(true);

  onMount(async () => {
    if (!auth.social.hasCallbackParams()) {
      goto('/');
      return;
    }

    const { data, error: err } = await auth.social.handleCallback();
    processing = false;

    if (err) {
      error = err.message;
      return;
    }

    goto(data.redirectTo ?? '/');
  });
</script>

{#if processing}
  <p>ログイン処理中...</p>
{:else if error}
  <p class="error">{error}</p>
  <a href="/login">再試行</a>
{/if}

ソーシャルAPIリファレンス

メソッド	シグネチャ	説明
`loginWithPopup(provider, options?)`	`(SocialProvider, SocialLoginOptions?) → AuthResponse<AuthSessionData>`	ポップアップログイン
`loginWithRedirect(provider, options?)`	`(SocialProvider, SocialLoginOptions?) → Promise<void>`	リダイレクトログイン
`handleCallback()`	`() → AuthResponse<AuthSessionData>`	コールバック処理
`hasCallbackParams()`	`() → boolean`	コールバックパラメータの確認
`getSupportedProviders()`	`() → SocialProvider[]`	設定済みプロバイダー一覧

セッション管理

// 現在のセッションを取得
const { data } = await auth.session.get();

// セッションを検証
const isValid = await auth.session.validate();

// セッションを更新
const newSession = await auth.session.refresh();

// 認証状態を確認
const authed = await auth.session.isAuthenticated();

// 現在のユーザーを取得
const user = await auth.session.getUser();

// クライアントサイドのセッションキャッシュをクリア
auth.session.clearCache();

サインアウト

await auth.signOut();

// リダイレクト指定
await auth.signOut({ redirectUri: '/goodbye' });

// トークン失効
await auth.signOut({ revokeTokens: true });

ショートカットメソッド

よく使う操作を簡潔に：

// auth.passkey.login() と同等
const { data, error } = await auth.signIn.passkey();

// auth.social.loginWithPopup(provider) と同等
const { data, error } = await auth.signIn.social('google');

// auth.passkey.signUp(options) と同等
const { data, error } = await auth.signUp.passkey({ displayName: 'Alice' });

AuthResponseパターン

すべての認証メソッドは AuthResponse<T> を返します：

type AuthResponse<T> =
  | { data: T; error: null }
  | { data: null; error: AuthError };

interface AuthError {
  code: string;
  error: string;
  message: string;
  retryable: boolean;
  severity: 'info' | 'warn' | 'error' | 'critical';
}

常に error を先にチェック：

const { data, error } = await auth.passkey.login();
if (error) {
  // エラー処理
  return;
}
// dataを安全に使用

エラーコードの詳細はWeb SDKエラーハンドリングを参照してください。

次のステップ

ストア & イベント — リアクティブな状態管理とイベント
コンポーネント — プリビルド認証コンポーネント
UIライブラリ — コンポーネントカタログ