React パスキー認証を実装する④ 登録・ログイン画面をつなぐ

server: {
  host: 'localhost',
  port: 5173,
  strictPort: true,
  https: {
    key: readFileSync('./certs/localhost-key.pem'),
    cert: readFileSync('./certs/localhost.pem'),
  },
  proxy: {
    '/api': {
      target: 'https://localhost:7043',
      changeOrigin: true,
    },
  },
},

function ensureWebAuthnJsonSupport(): void {
  if (
    !window.isSecureContext ||
    typeof PublicKeyCredential === 'undefined' ||
    typeof PublicKeyCredential.parseCreationOptionsFromJSON !== 'function' ||
    typeof PublicKeyCredential.parseRequestOptionsFromJSON !== 'function' ||
    typeof PublicKeyCredential.prototype.toJSON !== 'function'
  ) {
    throw new Error('この環境ではパスキーを利用できません。対応ブラウザーをご利用ください。');
  }
}

async function getCsrfToken(): Promise<string> {
  const response = await fetch('/api/passkeys/csrf', {
    credentials: 'same-origin',
    cache: 'no-store',
  });
  if (!response.ok) throw new Error('認証の準備に失敗しました。');
  const data: { token: string } = await response.json();
  return data.token;
}

async function post(path: string, token: string, body: unknown): Promise<Response> {
  const response = await fetch(path, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': token,
    },
    body: JSON.stringify(body),
  });
  if (response.status === 401) throw new Error('ログインし直してから登録してください。');
  if (!response.ok) throw new Error('処理を完了できませんでした。最初からお試しください。');
  return response;
}

export async function registerPasskey(): Promise<void> {
  ensureWebAuthnJsonSupport();
  const token = await getCsrfToken();
  const response = await post('/api/passkeys/register/options', token, {});
  const data: {
    flowId: string;
    publicKey: PublicKeyCredentialCreationOptionsJSON;
  } = await response.json();
  const publicKey = PublicKeyCredential.parseCreationOptionsFromJSON(data.publicKey);
  const credential = await navigator.credentials.create({ publicKey });
  if (!(credential instanceof PublicKeyCredential)) {
    throw new Error('パスキーを作成できませんでした。');
  }
  await post('/api/passkeys/register/finish', token, {
    flowId: data.flowId,
    credential: credential.toJSON(),
  });
}

export async function loginWithPasskey(): Promise<void> {
  ensureWebAuthnJsonSupport();
  const token = await getCsrfToken();
  const response = await post('/api/passkeys/login/options', token, {});
  const data: {
    flowId: string;
    publicKey: PublicKeyCredentialRequestOptionsJSON;
  } = await response.json();
  const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(data.publicKey);
  const credential = await navigator.credentials.get({ publicKey });
  if (!(credential instanceof PublicKeyCredential)) {
    throw new Error('パスキーで認証できませんでした。');
  }
  await post('/api/passkeys/login/finish', token, {
    flowId: data.flowId,
    credential: credential.toJSON(),
  });
}

export function passkeyErrorMessage(error: unknown): string {
  if (error instanceof DOMException && error.name === 'NotAllowedError') {
    return '操作が完了しませんでした。キャンセルや時間切れの場合は、もう一度お試しください。';
  }
  if (error instanceof DOMException && error.name === 'InvalidStateError') {
    return 'この認証器には登録済みのパスキーがある可能性があります。';
  }
  if (error instanceof DOMException && error.name === 'SecurityError') {
    return 'このサイトの設定ではパスキーを利用できません。';
  }
  if (error instanceof DOMException) return 'パスキーの操作に失敗しました。';
  return error instanceof Error ? error.message : '処理に失敗しました。';
}

import { useRef, useState } from 'react';
import { loginWithPasskey, passkeyErrorMessage, registerPasskey } from './passkey';

type Props = { mode: 'register' | 'login' };

export function PasskeyButton({ mode }: Props) {
  const running = useRef(false);
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState('');

  async function handleClick() {
    if (running.current) return;
    running.current = true;
    setBusy(true);
    setMessage('');
    try {
      if (mode === 'register') {
        await registerPasskey();
        setMessage('パスキーを登録しました。');
      } else {
        await loginWithPasskey();
        window.location.reload();
      }
    } catch (error) {
      setMessage(passkeyErrorMessage(error));
    } finally {
      running.current = false;
      setBusy(false);
    }
  }

  return (
    <div>
      <button type="button" disabled={busy} onClick={handleClick}>
        {busy ? '処理中…' : mode === 'register' ? 'パスキーを登録' : 'パスキーでログイン'}
      </button>
      <p role="status">{message}</p>
    </div>
  );
}