プログラミング/svelte のバックアップ(No.19)

signup フォーム用のスキーマを追加 †

src/lib/formSchemas/signup.ts

LANG:ts
import { z } from 'zod';

// メールアドレスを表す現実的な正規表現 by @sakuro 
// https://qiita.com/sakuro/items/1eaa307609ceaaf51123
const emailRegexp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

export const schema = z
  .object({
    name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
    email: z.string().regex(emailRegexp, { message: 'メールアドレスが不正です' }),
    password: z
      .string()
      .regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: '確認用パスワードが一致しません',
    path: ['confirm']
  });

バリデーションを行う †

src/routes/(loggedOut)/signup/+page.server.ts

LANG:ts
import type { Actions, PageServerLoad } from './$types';
import { schema } from '$lib/formSchemas/signup';
import { superValidate } from 'sveltekit-superforms/server';
import { fail } from '@sveltejs/kit';

export const load = (async () => {
	const form = await superValidate(schema);
	return { form };
}) satisfies PageServerLoad;

export const actions: Actions = {
	default: async (event) => {
		// フォームデータのバリデーション
		const form = await superValidate(event, schema);
		if (!form.valid) {
			return fail(400, { form });
		}

		// TODO: サインアップ処理をここに

		return { form };
	}
};

エラーメッセージを表示するためのフィールドを用意する †

src/routes/(loggedOut)/signup/+page.svelte

LANG:html
<script lang="ts">
  import type { PageData } from './$types';
  import { superForm } from 'sveltekit-superforms/client';

  export let data: PageData;
  const { form, message, errors, submitting, capture, restore, enhance } = superForm(data.form, {
    taintedMessage: false
  });
  export const snapshot = { capture, restore };
</script>

<div>
  <h1>サインアップ</h1>
  {#if $message}<span class="invalid">{$message}</span>{/if}
  <form method="POST" use:enhance>
    <label for="name">ユーザー名</label>
    <input type="text" name="name" bind:value={$form.name} disabled={$submitting} />
    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}

    <label for="password">パスワード</label>
    <input type="password" name="password" bind:value={$form.password} disabled={$submitting} />
    {#if $errors.password}<span class="invalid">{$errors.password}</span>{/if}

    <label for="confirmPassword">パスワード（確認）</label>
    <input type="password" name="confirm" bind:value={$form.confirm} disabled={$submitting} />
    {#if $errors.confirm}<span class="invalid">{$errors.confirm}</span>{/if}

    <div><button disabled={$submitting}>サインアップ</button></div>
    <a href="/login">ログイン</a>
  </form>
</div>

<style>
  .invalid {
    color: red;
  }
</style>

これで正しくエラーが検出されるようになった。

Lucia に対応したテーブルを定義 †

prisma/schema.prisma

LANG: prisma
model AuthUser {
  id           String        @id @unique
  auth_session AuthSession[]
  auth_key     AuthKey[]

  name     String       @unique
  email     String       @unique

  @@map("auth_user")
}

model AuthSession {
  id             String   @id @unique
  user_id        String
  active_expires BigInt
  idle_expires   BigInt
  auth_user      AuthUser @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("auth_session")
}

model AuthKey {
  id              String   @id @unique
  hashed_password String?
  user_id         String
  primary_key     Boolean
  expires         BigInt?
  auth_user       AuthUser @relation(references: [id], fields: [user_id], onDelete: Cascade)

  @@index([user_id])
  @@map("auth_key")
}

migrate する †

LANG: console
$ npx prisma migrate dev --name "add tables for lucia"
 Environment variables loaded from .env
 Prisma schema loaded from prisma\schema.prisma
 Datasource "db": SQLite database "dev.db" at "file:./dev.db"
 
 Applying migration `20231121075732_add_tables_for_lucia`
 
 The following migration(s) have been created and applied from new schema changes:
 
 migrations/
   └─ 20231121075732_add_tables_for_lucia/
     └─ migration.sql
 
 Your database is now in sync with your schema.
 
 ✔ Generated Prisma Client (v5.6.0) to .\node_modules\.pnpm\@prisma+client@5.6.0_prisma@5.6.0\node_modules\@prisma\client in 344ms

ライブラリに追加 †

サーバー上でしか使わないので lib/server の下に置く

src/lib/server/db.ts

LANG: ts
import { PrismaClient } from '@prisma/client';

export const db = new PrismaClient();

commit †

LANG: console
$ git add .

$ git status
 On branch master
 Changes to be committed:
   (use "git restore --staged <file>..." to unstage)
         modified:   .gitignore
         modified:   package.json
         modified:   pnpm-lock.yaml
         new file:   prisma/dev.db-journal
         new file:   prisma/migrations/20231121075732_add_tables_for_lucia/migration.sql
         new file:   prisma/migrations/migration_lock.toml
         new file:   prisma/schema.prisma

$ git commit -m "Prisma を使い Lucia 用のテーブルを準備"

Lucia v2 に対応してテーブル定義を変更 †

AuthKey から primary_key と expires を削除

prisma/schema.prisma

  model AuthKey {
     id              String   @id @unique
     hashed_password String?
     user_id         String
-    primary_key     Boolean
-    expires         BigInt?
     auth_user       AuthUser @relation(references: [id], fields: [user_id], onDelete: Cascade)
 
    @@index([user_id])
    @@map("auth_key")
 }

データベースに反映

LANG: console
$ npx prisma migrate dev --name "alter tables for lucia v2"

Lucia の初期化 †

テーブルの対応や User テーブルに追加した追加の属性をライブラリに教える。

src/lib/server/lucia.ts

LANG: ts
import { lucia } from "lucia";
import { sveltekit } from "lucia/middleware";
import { dev } from "$app/environment";
import { prisma } from "@lucia-auth/adapter-prisma";
import { db } from "$lib/server/db";

export const auth = lucia({
  env: dev ? "DEV" : "PROD",
  middleware: sveltekit(),
  adapter: prisma(db, {
    user: "authUser",
    key: "authKey",
    session: "authSession"
  }),
  getUserAttributes: (data) => {
    return {
      // IMPORTANT!!!!
      // `userId` included by default!!
      name: data.name,
      email: data.email
    };
  },
});

export type Auth = typeof auth;

locals.auth を追加 †

User および Session に追加したフィールドの型定義を与えるとともに、

locals.auth に認証情報を持てるようにする

src/app.d.ts

LANG: ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces

declare global {
  declare namespace Lucia {
    type Auth = import('$lib/server/lucia').Auth;
    type DatabaseUserAttributes = {name: string, email: string};
    type DatabaseSessionAttributes = object;
  }

  namespace App {
    // interface Error {}
    interface Locals {
      auth: import('lucia').AuthRequest;
    }
    // interface PageData {}
    // interface Platform {}
   }
}

export {};

hook で認証情報を読み込む †

https://lucia-auth.com/basics/handle-requests/#sveltekit の通り、 hooks で event から認証情報を得て locals.auth へ入れる。

src/hooks.server.ts

LANG: ts
import { auth } from '$lib/server/lucia';
import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';

const authHandler: Handle = async ({ event, resolve }) => {
  event.locals.auth = auth.handleRequest(event);

  return await resolve(event);
};

export const handle = sequence(authHandler);

データベースを確認 †

テスト用にサインアップをしてみた後、

LANG: console
$ pnpm prisma studio

とすると Prisma Studio が立ち上がるので、AuthUser テーブルや AuthKey テーブルに正しく情報が登録していることを確認する。

ログイン状態を確認 †

上記のコードではサインアップと同時にログインしているので、 hooks により locals.auth にログイン情報が入っているはず。

そこで、トップページでログイン情報を参照してみることにする。

src/routes/+page.server.ts

LANG: ts
import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async ({locals}) => {
  const session = await locals.auth.validate();
  return {user: session?.user}
}

session.user に格納されるログインユーザーの情報をページに渡す。

ページ側でそれを受け取って、

src/routes/+page.svelte

LANG: html
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<h1>Welcome {data.user ? data.user.name : 'to Svelte'}</h1>

とすれば、ログインしている場合に "Welcome (ユーザー名)" と表示されるはずで・・・

試したところうまく行ってるようだった。

redirect しているところに片っ端からメッセージを付ける (server 側) †

@sveltejs/kit の redirect の代わりに
sveltekit-flash-message/server の redirect を使いメッセージを追加する。

src/routes/(loggedOut)/signup/+page.svelte

LANG: ts
- import { fail, redirect } from '@sveltejs/kit';
+ import { fail } from '@sveltejs/kit';
+ import { redirect } from 'sveltekit-flash-message/server';
...
-     throw redirect(302, '/');
+     throw redirect(302, '/', { type: 'success', message: 'サインアップしました'}, event);

みたいな感じ。

src/routes/(loggedOut)/login/+page.svelte

LANG: ts
    throw redirect(302, '/', { type: 'success', message: 'ログインしました'}, event);

も問題ない。

ところが +server.ts の RequestHandler からだと event が手に入らないため困ってしまう。

この場合どうしたらいいんだろう？？？

"sveltekit-flash-message" "RequestHandler" で検索しても何も出ないのだけれど...

無理やりダミーの RequestEvent を作ればなんとかはなる。でもこうするしかないのかどうか？？？

LANG: ts
export const GET: RequestHandler = async ({ locals, cookies }) => {
  // 読み出し済みセッション情報の無効化
  locals.auth.invalidate();
  // クッキーからセッションID削除
  locals.auth.setSession(null);
  
  const dummyEvent = {cookies} as RequestEvent;
  throw redirect(302, '/', { type: 'success', message: 'ログアウトしました'}, dummyEvent);
};

src/hooks.server.ts については event は手に入るけど redirect の仕方が違うので、 redirect と独立して flash メッセージを設定するため setFlash を使う？

と思って

src/hooks.server.ts

+ import { setFlash } from 'sveltekit-flash-message/server';

...

    if (event.route.id?.startsWith('/(loggedOut)') && session?.user) {
+     setFlash({ type: 'error', message: 'すでにログインしています' }, event);
      return Response.redirect(`${event.url.origin}/`, 302);
    }

のようにしてみたけどうまく行かなかった。

event.cookies.set を呼んでももそれは event の中を書き換えるだけで、 Response.redirect が event を参照しないから何の意味もない。

ここでも throw redirect に event を与える形でリダイレクトするのが正解らしい。

LANG: ts
    if (event.route.id?.startsWith('/(loggedOut)') && session?.user) {
-     return Response.redirect(`${event.url.origin}/`, 302);
+        throw redirect(302, '/', { type: 'error', message: 'すでにログインしています' }, event);
    }

src/hooks.server.ts

LANG: ts
+ import { redirect } from 'sveltekit-flash-message/server';

...

  const authHandler: Handle = async ({ event, resolve }) => {
    event.locals.auth = auth.handleRequest(event);
    const session = await event.locals.auth.validate();
  
    if (event.route.id?.startsWith('/(admin)') || event.route.id?.startsWith('/admin')) {
       if (!await db.hasRole(session?.user?.userId, 'admin')) {
-        return Response.redirect(`${event.url.origin}/`, 302);
+        throw redirect(302, '/', { type: 'error', message: '管理者のみアクセス可能です' }, event);
       }
    }
  
    if (event.route.id?.startsWith('/(loggedIn)') && !session?.user) {
-     return Response.redirect(`${event.url.origin}/login`, 302);
+        throw redirect(302, '/', { type: 'error', message: 'ログインユーザーのみアクセス可能です' }, event);
    }
  
    if (event.route.id?.startsWith('/(loggedOut)') && session?.user) {
-     return Response.redirect(`${event.url.origin}/`, 302);
+        throw redirect(302, '/', { type: 'error', message: 'すでにログインしています' }, event);
    }
  
    return await resolve(event);
  };

としたらうまく行った。

見せ方 †

特にクライアントサイドから表示した場合には 画面上部に出るだけだと気づけない場合もあるので、
「表示領域の上部に出て、クリックされたら、あるいはしばらくしたら、引っ込む」
みたいな動作が望ましい気がする。

https://github.com/ciscoheat/sveltekit-flash-message#toast-messages-event-style

によれば svelte-french-toast を使うと良いらしい。

LANG: console
$ pnpm i svelte-french-toast
Packages: +2
++
Progress: resolved 304, reused 280, downloaded 2, added 2, done

dependencies:
+ svelte-french-toast 1.2.0

Done in 4.9s

src/routes/+layout.svelte

LANG: html
<script lang="ts">
  import { getFlash } from 'sveltekit-flash-message';
  import { page } from '$app/stores';
  import toast, { Toaster } from 'svelte-french-toast';

  const flash = getFlash(page);

  flash.subscribe(($flash) => {
    if (!$flash) return;

    toast($flash.message, {
      icon: $flash.type == 'success' ? '✅' : '❌'
    });

    // Clearing the flash message could sometimes
    // be required here to avoid double-toasting.
    flash.set(undefined);
  });
</script>

<Toaster />
<slot />

これでうまく行った。

クライアントサイドで使う例も後で勉強すべき †

https://www.npmjs.com/package/sveltekit-flash-message#client-side

どういう風に実装されているかまで理解しないと どうしてこういう処理が必要になるのか納得しづらいかも。

パスワードリセットもできるようにしたい †

サインアップと同様に以下の流れで行う。

1. /reset-password にメールアドレスだけを入力
2. メールが届く
3. メールに記載のリンク先で新しいパスワードを入力
   • /reset-password/xxxxxxxx

&uml( skinparam handwritten true actor User participant System database Database User -> System : /reset-password へアクセス System --> User : メールアドレス入力フォームを表示 User -> System : メールアドレスを入力 System -> Database : トークンとメールアドレスを保存 System --> User : トークン入りの URL をメールで通知 User -> System : トークン入りの URL へアクセス System -> Database : トークンを確認 Database --> System : メールアドレスを返す System --> User : パスワード入力フォームを表示 User -> System : パスワード入力フォームを送信 System -> Database : トークンを確認 Database --> System : メールアドレスを返す System -> Database : パスワード変更 System -> Database : トークンを削除 System --> User : パスワード変更完了を表示 );

emailVerification テーブル †

prisma/schema.prisma

+ model emailVerification {
+   id String @id @default(uuid())
+   email String @unique
+   createdAt DateTime @default(now()) @map("created_at")
+ }

id を秘密のトークンとして使う

LANG:console
$ npx prisma migrate dev --name "add emailVerification table"

メールアドレス入力フォーム †

メールアドレス確認用の正規表現を使いまわせるようライブラリに切り出す

src/lib/emailRegexp.ts

LANG: ts
// https://qiita.com/sakuro/items/1eaa307609ceaaf51123
export const emailRegexp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

メールアドレスのチェックを行うスキーマを用意

src/lib/formSchemas/emailVerification.ts

LANG: ts
import { z } from 'zod';
import { emailRegexp } from '$lib/emailRegexp'

export const schema = z
  .object({
    email: z.string().regex(emailRegexp, { message: 'メールアドレスが不正です' }),
  })

サインアップとパスワードリセットの両方を扱えるようにするため matcher を使ったルーティングを行う。

https://kit.svelte.jp/docs/advanced-routing#matching

src/lib/emailVerificationPurposes.ts

LANG: ts
export const purposes = {
  signup: 'サインアップ', 
  'reset-password': 'パスワードリセット' 
};

src/params/emailVerificationPurpose.ts

LANG: ts
import type { ParamMatcher } from '@sveltejs/kit';
import { purposes } from '$lib/emailVerificationPurposes';

export const match: ParamMatcher = (param) => {
  return Object.hasOwn(purposes, param);
};

src/routes/(loggedOut)/[purpose=emailVerificationPurpose]/+page.svelte

LANG: html
<script lang="ts">
  import type { PageData } from './$types';
  import { superForm } from 'sveltekit-superforms/client';
  import { purposes } from '$lib/emailVerificationPurposes';

  export let data: PageData;
  const { form, message, errors, submitting, capture, restore, enhance } = superForm(data.form, {
    taintedMessage: false
  });
  export const snapshot = { capture, restore };

  const purpose = purposes[data.purpose];
</script>

<div>
  <h1>メールアドレスを入力して下さい</h1>
  <p>入力されたアドレスへ {purpose} を続けるためのリンクを含むメールを送信します<br />
    そちらのリンクから {purpose} 手続きを進めて下さい</p>
  {#if $message}<span class="invalid">{$message}</span>{/if}
  <form method="POST" use:enhance>
    <label for="email">メールアドレス</label>
    <input type="text" name="email" bind:value={$form.email} disabled={$submitting} />
    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}

    <div><button disabled={$submitting}>メールを送信</button></div>
  </form>
</div>

<style>
  .invalid {
    color: red;
  }
</style>

src/routes/(loggedOut)/[purpose=emailVerificationPurpose]/+page.server.ts

LANG: ts
import type { Actions, PageServerLoad, PageServerLoadEvent, RequestEvent } from './$types';
import { schema } from '$lib/formSchemas/emailVerification';
import { superValidate } from 'sveltekit-superforms/server';
import { fail } from '@sveltejs/kit';
import { redirect } from 'sveltekit-flash-message/server';
import { purposes } from '$lib/emailVerificationPurposes';
import { transporter } from '$lib/server/transporter';

import { db } from '$lib/server/db'

async function getPurpose(event: PageServerLoadEvent | RequestEvent) {
  const purpose = event.params.purpose as keyof typeof purposes;
  return purpose;
}

export const load = (async (event) => {
  const form = await superValidate(schema);
  const purpose = await getPurpose(event);
  return { form, purpose };
}) satisfies PageServerLoad;

export const actions: Actions = {
  default: async (event) => {
    
    // フォームデータのバリデーション
    const form = await superValidate(event, schema);
    const purpose = await getPurpose(event);
    if (!form.valid) {
      return fail(400, { form, purpose });
    }

    // TODO: emailVerification レコードを作成

    // TODO: メールを送信

    throw redirect(302, '/', { type: 'success', message: 'メールを送信しました'}, event);
  }
};

emailVerification レコードを作成 †

一定時間以内に作成されたものがすでに存在すればエラーにする

src/routes/(loggedOut)/[purpose=emailVerificationPurpose]/+page.server.ts

LANG: ts
    // emailVerification レコードが既に存在するか？
    const existing = await db.emailVerification.findUnique({where: {email: form.data.email}})
    if(existing) {
      // ２時間以内に送っていればエラーにする
      if(existing.createdAt.getTime() > Date.now() - (1000 * 60 * 60 * 2)) {
        throw redirect(302, '/', { type: 'error', message: '先ほどメールを送信しましたのでしばらく経ってから試してください'}, event);
      }

      // 既存のものを削除
      await db.emailVerification.delete({where: {email: form.data.email}});
    }

    // レコードを作成する
    const record = await db.emailVerification.create({data: {email: form.data.email}});
    const token = record.id;

メールを送信 †

アドレスは /signup/[token] になる

https://shinobiworks.com/blog/385/ のように nodemailer を使う

LANG: console
$ npm i nodemailer && npm i --save-dev @types/nodemailer

src/lib/server/transporter.ts

LANG: ts
import { createTransport } from "nodemailer";

export const transporter = createTransport({
  host: "localhost",
  port: 25,
});

src/routes/(loggedOut)/[purpose=emailVerificationPurpose]/+page.server.ts

LANG: ts
import { transporter } from '$lib/server/transporter';
...

    // メールを送信

    const url = `${event.url.origin}/${purpose}/${token}`

    try {
      await transporter.sendMail({
        from: `"authtest system" <authtest@my.server.net>`,
        to: form.data.email,
        subject: `[authtest] ${purposes[purpose]} 用のリンクをお送りします`,
        text: `次の URL より ${purposes[purpose]} の手続きをお勧めください\n${url}`
      });
    } catch (error) {
      throw redirect(302, event.url, { type: 'error', message: 'メールを送信できませんでした'}, event);
    }

サインアップフォーム †

フォームからメールアドレス欄を除く

src/lib/formSchemas/signup.ts

LANG: ts
  import { z } from 'zod';

- // https://qiita.com/sakuro/items/1eaa307609ceaaf51123
- const emailRegexp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
  export const schema = z
    .object({
      name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
-     email: z.string().regex(emailRegexp, { message: 'メールアドレスが不正です' }),
      password: z
        .string()
        .regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
          message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
        }),
      confirm: z.string(),
    })
    .refine((data) => data.password === data.confirm, {
      message: '確認用パスワードが一致しません',
      path: ['confirm']
    });

disabled にしたフィールドは表示専用になりフォーム送信時にデータが送られない。

src/routes/(loggedOut)/signup/[token]/+page.svelte

LANG: html
      <label for="email">メールアドレス</label>
+     <input type="text" name="email" bind:value={data.email} disabled />
-     <input type="text" name="email" bind:value={$form.email} disabled={$submitting} />
-     {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}

以前の src/routes/(loggedOut)/signup/+page.* を src/routes/(loggedOut)/signup/[token]/+page.* に移す。

form と共に email アドレスを返す。

src/routes/(loggedOut)/signup/[token]/+page.server.ts

LANG: ts
- import type { Actions, PageServerLoad } from './$types';
+ import type { Actions, PageServerLoad, PageServerLoadEvent, RequestEvent } from './$types';
  ...

+ async function getEmail(event: PageServerLoadEvent | RequestEvent) {
+   const record = await db.emailVerification.findUnique({where: {id: event.params.token}})
+   if(!record || Date.now() - (1000 * 60 * 60 * 2) > record.createdAt.getTime()) {
+     // 見つからないあるいは古すぎる
+     throw redirect(302, '/', {type: 'error', message: '無効なトークンです'}, event);
+   }
+   return record.email;
+ }

- export const load = (async () => {
+ export const load = (async (event) => {
    const form = await superValidate(schema);
-   return { form };
+   const email = await getEmail(event)
+   return { form, email };
  }) satisfies PageServerLoad;
  
  export const actions: Actions = {
    default: async (event) => {
    
      // フォームデータのバリデーション
      const form = await superValidate(event, schema);
+     const email = await getEmail(event)
      if (!form.valid) {
        return fail(400, { form, email });
      }
    
      // サインアップ処理
      try {
        const user = await auth.createUser({
          key: {
            providerId: 'email',
-           providerUserId: form.data.email,
+           providerUserId: email,
            password: form.data.password
          },
          attributes: {
            name: form.data.name,
-           email: form.data.email,
+           email: email,
          }
        });
      ...

-         return fail(400, { form: { ...form, message: '名前またはメールアドレスが既存のアカウントと重複しています' } });
+         return fail(400, { form: { ...form, message: '名前またはメールアドレスが既存のアカウントと重複しています' }, email });

      ...

-       return fail(400, { form: { ...form, message: 'サインアップエラー' } });
+       return fail(400, { form: { ...form, message: 'サインアップエラー' }, email });
      ...

+    // レコードを消去
+     await db.emailVerification.delete({where: {id: event.params.token}})

      throw redirect(302, '/', { type: 'success', message: 'サインアップしました'}, event);
    }
  };

これで大丈夫そう。

パスワードリセット †

メール送信フォームでそのメールアドレスを持つアカウントの存在を確認する

src/routes/(loggedOut)/[purpose=emailVerificationPurpose]/+page.server.ts

LANG: ts
     // フォームデータのバリデーション
     const form = await superValidate(event, schema);
 
+    // パスワードリセットは既存のアカウントがなければエラー
+    if(purpose == 'reset-password') {
+      if(!await db.authUser.findUnique({where: {email: form.data.email}})){
+        form.errors.email = [...(form.errors.email || []), '登録されていません'];
+        form.valid = false;
+      }
+    }

     if (!form.valid) {
       return fail(400, { form, purpose });
     }

フォーム検証スキーム

authtest/src/lib/formSchemas/resetPassword.ts

LANG: ts
import { z } from 'zod';

export const schema = z
  .object({
    password: z
      .string()
      .regex(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: '確認用パスワードが一致しません',
    path: ['confirm']
  });

ユーザー名とメールアドレスは変更不可

フォームに表示はするが disable なので値は POST されない。

src/routes/(loggedOut)/reset-password/[token]/+page.svelte

LANG: html
<script lang="ts">
  import type { PageData } from './$types';
  import { superForm } from 'sveltekit-superforms/client';

  export let data: PageData;
  const { form, message, errors, submitting, capture, restore, enhance } = superForm(data.form, {
    taintedMessage: false
  });
  export const snapshot = { capture, restore };
</script>

<div>
  <h1>パスワードの変更</h1>
  {#if $message}<span class="invalid">{$message}</span>{/if}
  <form method="POST" use:enhance>
    <label for="name">ユーザー名</label>
    <input type="text" name="name" bind:value={data.user.name} disabled />

    <label for="email">メールアドレス</label>
    <input type="text" name="email" bind:value={data.user.email} disabled />

    <label for="password">パスワード</label>
    <input type="password" name="password" bind:value={$form.password} disabled={$submitting} />
    {#if $errors.password}<span class="invalid">{$errors.password}</span>{/if}

    <label for="confirm">パスワード（確認）</label>
    <input
      type="password"
      name="confirm"
      bind:value={$form.confirm}
      disabled={$submitting}
    />
    {#if $errors.confirm}<span class="invalid">{$errors.confirm}</span>{/if}

    <div><button disabled={$submitting}>パスワードを変更</button></div>
  </form>
</div>

<style>
  .invalid {
    color: red;
  }
</style>

src/routes/(loggedOut)/reset-password/[token]/+page.server.ts

LANG: ts
import type { Actions, PageServerLoad, PageServerLoadEvent, RequestEvent } from './$types';
import { schema } from '$lib/formSchemas/signup';
import { superValidate } from 'sveltekit-superforms/server';
import { fail } from '@sveltejs/kit';
import { redirect } from 'sveltekit-flash-message/server';
import { auth } from '$lib/server/lucia';
import { db } from '$lib/server/db'

async function getUser(event: PageServerLoadEvent | RequestEvent) {
  const record = await db.emailVerification.findUnique({where: {id: event.params.token}});
  if(!record || Date.now() - (1000 * 60 * 60 * 2) > record.createdAt.getTime()) {
    throw redirect(302, '/', {type: 'error', message: '無効なトークンです'}, event);
  }

  const user = await db.authUser.findUnique({where: {email: record.email}});
  if (!user) {
    throw redirect(302, '/', {type: 'error', message: '無効なトークンです'}, event);
  }
  return user;
}

export const load = (async (event) => {
  const form = await superValidate(schema);
  const user = await getUser(event);
  return { form, user };
}) satisfies PageServerLoad;

export const actions: Actions = {
  default: async (event) => {
    // フォームデータのバリデーション
    const form = await superValidate(event, schema);
    const user = await getUser(event);
    if (!form.valid) {
      return fail(400, { form, user });
    }
    
    // パスワードを変更
    await auth.updateKeyPassword(
      'email', user.email, form.data.password
    )

    // 直接ログインする
    const session = await auth.createSession({userId: user.id, attributes: {}});
    event.locals.auth.setSession(session);

    // レコードを消去
    await db.emailVerification.delete({where: {id: event.params.token}});

    throw redirect(302, '/', { type: 'success', message: 'パスワードを変更してログインしました'}, event);
  }
};

Prisma への seeding †

そのために上記のリストを Prisma のデータベースに入れたい。

https://m-shige1979.hatenablog.com/entry/2021/11/20/213051

あたりを参考にしつつ、

prisma/seed.ts

LANG: ts
import { db } from '../src/lib/server/db';
import * as fs from 'fs';

async function main() {
  await db.worstPassword.deleteMany();
  const text = fs.readFileSync('./prisma/seed/10-million-password-list-top-1000000.txt', 'utf-8');
  text.split(/\n\r?|\r/).forEach(async (value, rank)=> {
    await db.worstPassword.create({data:{value, rank}})
  })
}

main()    
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await db.$disconnect()
  })

これを実行するために以下を行う

• prisma/seed に 10-million-password-list-top-100000.txt をダウンロード
• ts-node を入れて .ts ファイルを直接実行可能にする
  • 参照 https://qiita.com/mangano-ito/items/75e65071c9c482ddc335
• そして ./node_modules/.bin/ts-node prisma/seed.ts

LANG: console
$ mkdir prisma/seed
$ curl https://raw.githubusercontent.com/danielmiessler/SecLists/master/Passwords/Common-Credentials/10-million-password-list-top-100000.txt > prisma/seed/10-million-password-list-top-100000.txt
$ npm install --save typescript ts-node
$ ./node_modules/.bin/ts-node prisma/seed.ts
 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\osamu\Desktop\svelte\authtest\prisma\seed.ts
     at new NodeError (node:internal/errors:399:5)
     at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
     at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
     at defaultLoad (node:internal/modules/esm/load:81:20)
     at nextLoad (node:internal/modules/esm/loader:163:28)
     at ESMLoader.load (node:internal/modules/esm/loader:605:26)
     at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
     at new ModuleJob (node:internal/modules/esm/module_job:64:26)
     at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
   code: 'ERR_UNKNOWN_FILE_EXTENSION'
 }

エラーが出た。

https://qiita.com/nyanchu/items/82903e0463fa9d558639 を参考にして tsconfig.json を書き換える。

tsconfig.json

LANG: json
  {
    "extends": "./.svelte-kit/tsconfig.json",
+   "ts-node": {
+     "esm": true,
+     "experimentalSpecifierResolution": "node"
+   },
    ...

これで実行はされるようになった・・・が、

LANG: console
$ ./node_modules/.bin/ts-node prisma/seed.ts
 
 <--- Last few GCs --->
 
 [54920:00000183318518E0]    42008 ms: Mark-sweep (reduce) 2047.2 (2083.1) -> 2046.6 (2083.6) MB, 765.8 / 0.0 ms  (+ 46.6 ms in 14 steps since start of marking, biggest step 4.6 ms, walltime since start of marking 828 ms) (average mu = 0.382, current mu = [54920:00000183318518E0]    44566 ms: Mark-sweep (reduce) 2047.7 (2083.6) -> 2047.3 (2084.4) MB, 2164.6 / 0.0 ms  (+ 58.2 ms in 12 steps since start of marking, biggest step 7.2 ms, walltime since start of marking 2238 ms) (average mu = 0.228, current mu
 
 <--- JS stacktrace --->
 
 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 ...

メモリ不足で落ちた。

prisma/seed.ts

LANG: ts
-   text.split(/\n\r?|\r/).forEach(async (value, rank)=> {
-     await db.worstPassword.create({data:{value, rank}})
-   })
+   const items = text.split(/\n\r?|\r/);
+   for(let rank = 0; rank < items.length; rank++) {
+     const value = items[rank];
+     await db.worstPassword.create({data:{value, rank}})
+   }

あー、考えてみれば元のコードでは forEach に与えてる async 関数を誰も await していなかったのでひたすら Promise の山が生成されてしまっていた。

素人丸出しのダメコードだった。

１つ１つの create を await するようにしたところ、時間はかかったものの、 ちゃんとデータが追加された。

npm で動かせるようにする †

package.json

LANG: json
     "dependencies": {
      "@lucia-auth/adapter-prisma": "^3.0.2",
      "@prisma/client": "^5.6.0",
      "lucia": "^2.7.4",
      "nodemailer": "^6.9.7",
      "svelte-french-toast": "^1.2.0",
      "ts-node": "^10.9.1"
    },
+   "prisma": {
+     "seed": "ts-node prisma/seed.ts"
+   }
  }

これで、

LANG: console
$ npm prisma db seed
 Environment variables loaded from .env
 Running seed command `ts-node prisma/seed.ts` ...

の形で seeding が行える。

ただ、 https://github.com/prisma/prisma/discussions/18057 などによると seeding というのはあくまで開発途上でデータベースにテストデータを入れたりするのに 使われるものなので、今回の用途のように本番環境でも使うようなのはいわゆる seeding の用途とは異なるようだ。

上記の処理は非常に長い時間もかかるので seed コマンドとは異なる形で実行できるように しておくべきっぽい。

どうするべきか要検討。

パスワードを検証するのに使う †

src/lib/formSchemas/changeProfile.ts

LANG: ts
  import { z } from 'zod';
+ import { db } from '$lib/server/db';
  
  export const schema = z
    .object({
      name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
      password: z.string().regex(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
      confirm: z.string()
    })
    .refine((data) => data.password === data.confirm, {
      message: '確認用パスワードが一致しません',
      path: ['confirm']
+   })
+   .superRefine(async (data, ctx) => {
+     const record = await db.worstPassword.findUnique({where: {value: data.password}, select: {rank: true}});
+     if(record) {
+       ctx.addIssue({
+         code: z.ZodIssueCode.custom,
+         message: `容易に推測可能なパスワードです (rank = ${record.rank})`,
+         fatal: true,
+         path: ['password'],
+       });
+       return z.NEVER;
+     }
    });

うまく判定されるようになった。

src/lib/formSchemas/resetPassword.ts や src/lib/formSchemas/signup.ts も同様に変更するため、 判定部分を切り出した。

authtest\src\lib\formSchemas\superRefine\password.ts

LANG: ts
import { z } from 'zod';
import { db } from '$lib/server/db';

export async function refinerForPassword(data: {password: string}, ctx: z.RefinementCtx) {
  const record = await db.worstPassword.findUnique({where: {value: data.password}, select: {rank: true}});
  if(record) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: `容易に推測可能なパスワードです (rank = ${record.rank})`,
      fatal: true,
      path: ['password'],
    });
    return z.NEVER;
  }
}

これを使うと個々の schema では１行追加するだけで済む。

 .superRefine(refinerForPassword);

src/lib/formSchemas/changeProfile.ts

LANG: ts
  import { z } from 'zod';
* import { refinerForPassword } from './superRefine/password'

  export const schema = z
    .object({
      name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
      password: z.string().regex(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
      confirm: z.string()
    })
    .refine((data) => data.password === data.confirm, {
      message: '確認用パスワードが一致しません',
      path: ['confirm']
    })
*   .superRefine(refinerForPassword);

src/lib/formSchemas/resetPassword.ts

src/lib/formSchemas/signup.ts

も同様にする。

パスワード検証 API を用意する †

サブミットしてみなくても脆弱性が分かるよう、 クライアントサイドから確認するための API を用意する。

src/routes/password-ranking/+server.ts

LANG: ts
import { json } from '@sveltejs/kit';
import { db } from '$lib/server/db'

export async function POST({ request }) {
  const { password } = await request.json();
  const record = await db.worstPassword.findUnique({where: {value: password}, select: {rank: true}});
  if(record) {
    return json(record.rank + 1);
  }
  return json(0);
}

パスワード入力フォームから使う †

LANG: html
    <input type="password" name="password" bind:value={$form.password} disabled={$submitting} on:input={checkPassword} />

のように onInput イベントを拾って、

LANG: ts
  let timer: NodeJS.Timeout;
  function checkPassword(e: Event) {
    const password = (e.target as HTMLInputElement).value;
    if (password && password.length < 8) {
      errors.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
      return;
    }

    // 一旦エラーをキャンセル
    errors.update((e)=>{e.password = undefined; return e});

    // 設定待ちがあればキャンセル
    clearTimeout(timer);

    // 500 ms 後に設定
    timer = setTimeout(()=> checkPasswordSub(password), 500);
  }

  function checkPasswordSub(password: string) {
    if(!password.match(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/)) {
      errors.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
    } else {
      const method = "POST";
      const body = JSON.stringify({ password });
      const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      };
      fetch("/password-ranking", {method, headers, body})
        .then((res)=> res.json())
        .then((rank) => {
          if(rank) {
            errors.update((e)=>{e.password = [`容易に推測可能なパスワードです (rank = ${rank})`]; return e});
          } else {
            errors.update((e)=>{e.password = undefined; return e});
          }
        })
    }
  }

のようにエラーチェックする。

他でも使えるようこれをコンポーネント化したい。

コンポーネント化する †

ラベル + Input + エラー表示をひとまとめにする。

type を動的に変更すると文句を言われるので、

LANG: html
<input {...{ name, type }}

の形にしている。

src/lib/components/LabeledInput.svelte

LANG: html
<script lang="ts">
  import type { Writable } from 'svelte/store';

  export let name: string;
  export let label: string;
  export let type = "text";
  export let value: string;
  export let disabled = false;
  export let errors: Writable<{}> | undefined = undefined;

  let key = name as keyof typeof errors;
</script>

<label for={name}>{label}</label>
<input {...{ name, type }} bind:value disabled={disabled} on:input />
{#if errors && $errors[key]}<span class="invalid">{$errors[key]}</span>{/if}

<style>
  .invalid {
    color: red;
  }
</style>

パスワードに特化してエラーチェックを行うのがこちら。

src/lib/components/PasswordInput.svelte

LANG: html
<script lang="ts">
  import type { Writable } from 'svelte/store';
  import LabeledInput from '$lib/components/LabeledInput.svelte';

  export let name: string;
  export let label: string;
  export let value: string;
  export let disabled = false;
  export let errors: Writable<{password?:string[]}> | undefined = undefined;

  function checkPasswordSub(password: string) {
    if(!password.match(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/)) {
      errors?.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
    } else {
      const method = "POST";
      const body = JSON.stringify({ password });
      const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      };
      fetch("/password-ranking", {method, headers, body})
        .then((res)=> res.json())
        .then((rank) => {
          if(rank) {
            errors?.update((e)=>{e.password = [`容易に推測可能なパスワードです (rank = ${rank})`]; return e});
          } else {
            errors?.update((e)=>{e.password = undefined; return e});
          }
        })
    }
  }

  let timer: NodeJS.Timeout;
  function checkPassword(e: Event) {
    console.log('ok');
    const password = (e.target as HTMLInputElement).value;
    if (password && password.length < 8) {
      errors?.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
      return;
    }

    // 一旦エラーをキャンセル
    errors?.update((e)=>{e.password = undefined; return e});

    // 設定待ちがあればキャンセル
    clearTimeout(timer);

    // 500 ms 後に設定
    timer = setTimeout(()=> checkPasswordSub(password), 500);
  }
</script>

<LabeledInput {...{name, label, disabled, errors}} type="password" bind:value on:input={checkPassword} />

これらを使うとフォーム定義がすっきりする。

src/routes/(loggedIn)/change-profile/+page.svelte

LANG: html
<script lang="ts">
  import type { PageData } from './$types';
  import { superForm } from 'sveltekit-superforms/client';
  import LabeledInput from '$lib/components/LabeledInput.svelte';
  import PasswordInput from '$lib/components/PasswordInput.svelte';

  export let data: PageData;
  const { form, message, errors, submitting, capture, restore, enhance } = superForm(data.form, {
    taintedMessage: false
  });
  export const snapshot = { capture, restore };
</script>

<div>
  <h1>ユーザー情報の変更</h1>
  {#if $message}<span class="invalid">{$message}</span>{/if}
  <form method="POST" use:enhance>

    <LabeledInput name="name" label="ユーザー名" bind:value={$form.name} disabled={$submitting} {errors} />

    <LabeledInput name="email" label="メールアドレス" value={data.user.email} disabled={true} />

    <PasswordInput name="password" label="パスワード（変更しないなら何も入力しない）" value={$form.password} disabled={$submitting} errors={errors} />

    <LabeledInput name="confirm" label="パスワード（確認）" type="password" value={$form.confirm} disabled={$submitting} {errors} />

    <div><button disabled={$submitting}>ユーザー情報を変更</button></div>
  </form>
</div>

他の form もこれに準じて直す。

サーバーの起動 †

デバッグサーバーでテストするならこう

LANG: console
$ DATABASE_URL="file:test.db" bash -c 'prisma migrate reset -f && pnpm dev --port 4173'

ビルド済みでテストするならこう

LANG: console
$ DATABASE_URL="file:test.db" bash -c 'prisma migrate reset -f && pnpm build && pnpm preview --port 4173'

これを package.json に入れる方法が良く分からない？

https://qiita.com/riversun/items/d45b26f4a7aad6e51b69 によると、

LANG: console
$ npm install --save-dev cross-env

しておいて、

package.json

+    "test-dev": "cross-env DATABASE_URL='file:test.db' prisma migrate reset -f && cross-env DATABASE_URL='file:test.db' vite dev --port 4173",
+    "test-preview": "cross-env DATABASE_URL='file:test.db' prisma migrate reset -f && cross-env DATABASE_URL='file:test.db' vite build && cross-env DATABASE_URL='file:test.db' vite preview --port 4173"

こうかな？

テストの実行 †

上記のコマンドでサーバーを起動しておいて、

playwright.config.ts

LANG: ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  webServer: {
    command: "",
    port: 4173,
    reuseExistingServer: !process.env.CI,
  },
  testDir: 'tests',
  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
};

export default config;

および

package.json

-    "test:integration": "playwright test",
+    "test:integration": "cross-env DATABASE_URL='file:test.db' playwright test",

の設定で

LANG: console
$ pnpm test:integration

とすればいい。

テスト時のメールは実際に送信する代わりにファイルに保存する †

src/lib/server/transporter.ts

LANG: ts
import { createTransport, type SentMessageInfo, type SendMailOptions } from "nodemailer";
import { env } from "$env/dynamic/private";
import * as fs from "fs";

export const transporter = createTransport({
  host: "localhost",
  port: 25,
});

if(env.DATABASE_URL=='file:dev.db' || env.DATABASE_URL=='file:test.db') {
  transporter.sendMail = async (mailOptions: SendMailOptions) => {
    console.log(process.cwd());
    console.log(mailOptions);
    fs.writeFileSync('test-results/mailOptions.txt', JSON.stringify(mailOptions));
    return null as SentMessageInfo;
  };
}

テストを書く †

https://playwright.dev/docs/api/class-test

例えばこんな風に書ける。

LANG: ts
test('/signup へフォームを送信', async ({ page }) => {
 await page.goto('/signup', {waitUntil: 'load'});

 await page.locator('input[name="email"]').fill('test@example.com');
 Promise.all([
   page.locator('input[name="email"]').press('Enter'),
   page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
 ]);
 await expect(page.getByRole('heading', { name: 'Welcome to Svelte' })).toBeVisible();
});

でもこれを、

LANG: ts
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('form button').click();

とすると email フィールドへの入力が送信データに反映されないケースがあったり（svelte による reactivity が発揮される前にフォームが送信されてしまうため？）、

なぜか fill を２回繰り返さないと書き込み自体を行えないケースがあったり、

LANG: ts
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com'); // 念のためもう一度 orz

なかなかに落とし穴も多そうな雰囲気だ？

• locator と WaitForSelector, $, $$ の違い https://qiita.com/ko-he-8/items/85116e1d99ed4b176657
• npm playwright codegen で操作手順の記録ができる https://playwright.dev/docs/codegen-intro
• 以前 --ui オプションで GUI が立ち上がるのを確認した記録があるのだけれど、このプロジェクトにインストールされているバージョンだとそんなオプションないと言われる？
• https://www.summerbud.org/dev-notes/playwright-tips-that-will-make-your-life-easier
  • .fill などは readonly や disable の間はそうじゃなくなるまで待つらしい
  • race condition を避けるために Promise.all を使う
• DEBUG=pw:api pnpm test:integration で verbose な出力が得られる
• テストは test( を test.skip( にするとスキップできる

tests/auth.test.ts

LANG: ts
import { expect, test, type Page, type TestInfo } from '@playwright/test';
import type { SendMailOptions } from "nodemailer";
import * as fs from "fs";
import { db } from '../src/lib/server/db.js';

test.setTimeout(5000);

let testId = 0;
let screenshotId = 0;
let screenshotTitle = "";
async function screenshot(page: Page, info: TestInfo) {
  if(screenshotTitle != info.title) {
    testId++;
    screenshotTitle = info.title;
    screenshotId = 0;
  }
  await page.screenshot({path: `test-results/ss${testId.toString().padStart(4, '0')}-${info.title.replaceAll("/","_")}${++screenshotId}.png`})
}

test('データベースをクリアする', async () => {
  await db.emailVerification.deleteMany()
  await db.authUser.deleteMany();

  expect(await db.emailVerification.count()).toBe(0);
  expect(await db.authUser.count()).toBe(0);
});

test('インデックスページを表示できる', async ({ page }, info) => {
  await page.goto('/', {waitUntil: 'load'});
  await expect(page.getByRole('heading', { name: 'Welcome to Svelte' })).toBeVisible();
  await screenshot(page, info);
});

test('/signup のメールアドレスの検証', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});
  
  await page.locator('input[name="email"]').fill('');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await page.locator('input[name="email"]').fill('abcd@');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await page.locator('input[name="email"]').fill('@abcc');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await screenshot(page, info);
});

test('メールアドレスを入力する /signup', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');

  await expect(page.locator('form button')).not.toBeVisible();
  await page.waitForLoadState('load');
  await expect(page.url()).toBe('http://localhost:4173/');

  await expect(page.locator('.toaster .message')).toHaveText('メールを送信しました')
  await page.waitForTimeout(200);

  await screenshot(page, info);
});

test('連続して送ろうとするとエラーになる', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');

  await expect(page.locator('input[name="email"]+.invalid')).toContainText('先ほどメールを送信しましたのでしばらく経ってから試してください');
  await screenshot(page, info);
});

test('サインアップを続ける', async ({ page }, info) => {
  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="name"]+.invalid')).toContainText('文字');

  await expect(page.locator('input[name="name"]')).not.toHaveProperty('disabled');
  await page.locator('input[name="name"]').fill('First Family');
  await page.locator('input[name="name"]').fill('First Family'); // 1回だと失敗することがある？？？
  await page.locator('input[name="name"]').press('Enter');
  await screenshot(page, info);
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await screenshot(page, info);
  await expect(page.locator('input[name="name"]+.invalid')).not.toBeVisible();
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.fill('input[name="password"]', 'aaaaaaaa');
  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.fill('input[name="password"]', 'Aa1aaaaa');
  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).not.toBeVisible();
  await expect(page.locator('input[name="confirm"]+.invalid')).toContainText('一致しません');

  await page.fill('input[name="confirm"]', 'Aa1aaaaa');
  await screenshot(page, info);

  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('サインアップしました')
  await page.waitForTimeout(200);
  await screenshot(page, info);

  // ログアウトする
  await logout(page, info);

  await page.waitForTimeout(200);
  await screenshot(page, info);
});

async function logout(page: Page, info: TestInfo) {
  Promise.all([
    page.goto('/logout', {waitUntil: 'load'}),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログアウトしました')
  await page.waitForTimeout(200);
  await screenshot(page, info);
}

async function login(page: Page, email='test@example.com', password='Aa1aaaaa') {
  await page.goto('/login', {waitUntil: 'load'});
  await page.locator('input[name="email"]').fill(email);
  await page.locator('input[name="password"]').fill(password);
  await page.locator('input[name="password"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインしました');
}

test('ログインしていないのにログアウトする', async ({ page }, info) => {
  await page.goto('/logout', {waitUntil: 'load'});

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインユーザーのみアクセス可能です')
  await page.waitForTimeout(200);
  await screenshot(page, info);
});

test('ログインする', async ({ page }, info) => {
  // ログインする

  await page.goto('/login', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('入力して下さい');

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('入力して下さい');

  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await screenshot(page, info);
  await page.locator('input[name="password"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインしました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
});

test('名前やパスワードを変更する', async ({ page }, info)=> {
  // ログイン
  await login(page);

  // 名前・パスワードを変更する（実際にはしない）
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="name"]').press('Enter');
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更されませんでした');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // 名前を変更する
  await page.goto('/change-profile', {waitUntil: 'load'});

  await page.locator('input[name="name"]').fill('First Middle Family');
  await page.locator('input[name="name"]').fill('First Middle Family');
  await page.locator('input[name="name"]').press('Enter');
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('名前が変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // パスワードを変更する
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="password"]').fill('Aa1aaaa');
  await page.locator('input[name="password"]').fill('Aa1aaaa');
  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');
  
  await page.locator('input[name="password"]').fill('Aa1aaaab');
  await page.locator('input[name="password"]').fill('Aa1aaaab');
  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="confirm"]+.invalid')).toContainText('一致しません');
  
  await page.locator('input[name="confirm"]').fill('Aa1aaaab');
  await page.locator('input[name="confirm"]').fill('Aa1aaaab');
  await page.locator('input[name="confirm"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードが変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // 名前とパスワードを変更する
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);
  await expect(page.locator('input[name="name"]')).toHaveValue('First Middle Family');

  await page.locator('input[name="name"]').fill('First Family');
  await page.locator('input[name="name"]').fill('First Family');
 
  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await screenshot(page, info);

  await page.locator('input[name="confirm"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードと名前が変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  await logout(page, info);
});

test('メールアドレスを変更する', async ({ page }, info)=> {
  // ログイン
  await login(page);

  await page.goto('/change-email', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('不正です');

  await page.locator('input[name="email"]').fill('changed@example.com');
  await page.locator('input[name="email"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await expect(page.locator('input[name="name"]')).toHaveValue('First Family');
  await expect(page.locator('input[name="email-old"]')).toHaveValue('test@example.com');
  await expect(page.locator('input[name="email-new"]')).toHaveValue('changed@example.com');

  Promise.all([
    page.locator('form button').click(),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);

  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  // ログアウト
  await logout(page, info);

});

test('新しいメールアドレスでログインしてから元に戻す', async ({ page }, info)=> {
  
  await login(page, 'changed@example.com');

  await page.goto('/change-email', {waitUntil: 'load'});
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com');
  await Promise.all([
    page.locator('input[name="email"]').press('Enter'),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');

  const mailOptions2 = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions2.text).toContain('http');
  await page.goto((mailOptions2.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await page.locator('form button').click();

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更しました');

  await logout(page, info);
});

test('パスワードのリセットを行う', async ({ page }, info) => {
  await page.goto('/reset-password', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('不正です');

  await page.locator('input[name="email"]').fill('notfound@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('登録されていません');
  
  await page.locator('input[name="email"]').fill('test@example.com');
  Promise.all([
    page.locator('input[name="email"]').press('Enter'),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await expect(page.locator('input[name="name"]')).toHaveValue('First Family');
  await expect(page.locator('input[name="email"]')).toHaveValue('test@example.com');

  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await screenshot(page, info);
  await page.locator('input[name="confirm"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードを変更してログインしました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

});

LANG: console
$ pnpm test:integration

> authtest@0.0.1 test:integration C:\Users\osamu\Desktop\svelte\authtest
> cross-env DATABASE_URL='file:test.db'; playwright test

Running 12 tests using 1 worker

  ✓  1 auth.test.ts:13:1 › データベースをクリアする (44ms)
  ✓  2 auth.test.ts:21:1 › インデックスページを表示できる (351ms)
  ✓  3 auth.test.ts:27:1 › /signup のメールアドレスの検証 (580ms)
  ✓  4 auth.test.ts:48:1 › メールアドレスを入力する /signup (749ms)
  ✓  5 auth.test.ts:64:1 › 連続して送ろうとするとエラーになる (509ms)
  ✓  6 auth.test.ts:75:1 › サインアップを続ける (2s)
  ✓  7 auth.test.ts:146:1 › ログインしていないのにログアウトする (569ms)
  ✓  8 auth.test.ts:155:1 › ログインする (1s)
  ✓  9 auth.test.ts:181:1 › 名前やパスワードを変更する (4s)
  ✓  10 auth.test.ts:256:1 › メールアドレスを変更する (2s)
  ✓  11 auth.test.ts:297:1 › 新しいメールアドレスでログインしてから元に戻す (1s)
  ✓  12 auth.test.ts:321:1 › パスワードのリセットを行う (2s)

  Slow test file: auth.test.ts (16s)
  Consider splitting slow test files to speed up parallel execution

  12 passed (17s)

コンポーネントの準備 †

src/lib/components/DialogPage.svelte

LANG: html
<script lang="ts">
  export let title: string;
</script>

<div class="relative flex flex-col items-center justify-center h-screen overflow-hidden">
  <div class="w-full lg:max-w-lg p-6 m-auto rounded-md shadow-2xl">
    <h1 class="text-3xl font-semibold text-center text-primary">{title}</h1>
    
    <slot />
    
  </div>
</div>

src/lib/components/Form.svelte

LANG: html
<script lang="ts">
  import { afterUpdate } from 'svelte';
  export let message= '';
  export let enhance: ((el: HTMLFormElement) => object) = ()=>{return {}};

  let form: HTMLFormElement;

  afterUpdate(()=> {
    if(message) {
      for(const elem of form.querySelectorAll('input')){
        elem.classList.add('input-error')
      }
    }
  })
</script>

{#if message}<span class="text-sm text-red-600">{message}</span>{/if}
<form bind:this={form} class="space-y-4" method="POST" use:enhance>
  <slot />
</form>

src/lib/components/LabeledInput.svelte

LANG: html
<label for={name} class="label"><span class="text-base label-text">{label}</span></label>
<input {...{ name, type }} bind:value disabled={disabled} on:input 
class="w-full input input-bordered input-primary" class:input-error={errors && $errors && $errors[key]} />
{#if errors && $errors && $errors[key]}<span class="text-xs text-red-600">{$errors[key]}</span>{/if}

src/lib/components/SubmitButton.svelte

LANG: html
<script lang="ts">
  export let disabled = false;
</script>

<div><button disabled={disabled} class="btn btn-block btn-primary text-white"><slot /></button></div>

書き換える †

こんな風に書ける

src/routes/[purpose=emailVerificationPurpose]/+page.svelte

LANG: html
<DialogPage title={purpose}>
  <Form meesage={$message} {enhance}>
    <LabeledInput name="email" label="メールアドレス" bind:value={$form.email} disabled={$submitting} errors={errors} />
    <p>{purpose} を続けるためのリンクを含むメールを送信します<br />
      そちらのリンクから {purpose} 手続きを進めて下さい</p>
    <SubmitButton disabled={$submitting}>メールを送信</SubmitButton>
    <div>
      <a class="text-sm text-blue-600 hover:underline hover:text-blue-400" href="/">トップへ戻る</a>
    </div>
</Form>
</DialogPage>