SvelteKitでログイン機能を作成する

src/
├── lib/
│   ├── components/
│   │   └── ui/
│   │       ├── button/
│   │       ├── card/
│   │       ├── form/
│   │       ├── input/
│   │       ├── label/
│   │       └── sonner/
│   ├── schemas/
│   │   ├── ja-zod.ts
│   │   └── login.ts
│   └── types/
│       └── user.ts
├── routes/
│   ├── (loggedIn)/
│   │   ├── logout/
│   │   │   └── +page.server.ts
│   │   ├── +layout.server.ts
│   │   ├── +layout.svelte
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   ├── (notLogged)/
│   │   └── login/
│   │       ├── +layout.svelte
│   │       ├── +page.server.ts
│   │       ├── +page.svelte
│   │       └── LoginForm.svelte
│   ├── +layout.server.ts
│   └── +layout.svelte
├── app.d.ts
└── hooks.server.ts

# インストール
$ bun add i18next zod-i18n-map

import i18next from 'i18next'
import { z } from 'zod'
import { makeZodI18nMap } from 'zod-i18n-map'
import translation from 'zod-i18n-map/locales/ja/zod.json' assert { type: 'json' }

i18next.init({
  lng: 'ja',
  resources: {
  ja: { translation }
  }
})

z.setErrorMap(makeZodI18nMap({ t: i18next.t, ns: 'translation' }))

export { z }

import { z } from './ja-zod'

export const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

export type LoginSchema = typeof loginSchema

import { loginSchema } from '$lib/schemas/login'
import { superValidate } from 'sveltekit-superforms'
import { zod } from 'sveltekit-superforms/adapters'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
  const form = await superValidate(zod(loginSchema))

  return { form }
}

$ bunx shadcn-svelte@latest add button card form input sonner

<script lang="ts">
  import LoginForm from './LoginForm.svelte'

  let { data } = $props()
</script>

<LoginForm data={data.form} />

<script lang="ts">
let { children } = $props()
</script>

<div class="grid place-content-center h-[100vh]">
  {@render children()}
</div>

import { loginSchema } from '$lib/schemas/login'
import { fail } from '@sveltejs/kit'
import { redirect } from 'sveltekit-flash-message/server'
import { superValidate } from 'sveltekit-superforms'
import { zod } from 'sveltekit-superforms/adapters'
import type { Actions } from './$types'

export const actions: Actions = {
  default: async (event) => {
    const form = await superValidate(event, zod(loginSchema))
    if (!form.valid) {
      return fail(400, { form })
    }

    // ログイン処理を後で実装

    //  取り急ぎ常に成功させる
    return redirect(
      '/',
      { message: 'ログインしました', type: 'success' },
      event,
    )
  },
}

<h1 class="text-3xl font-bold underline">
  Home
</h1>

<script lang="ts">
let { children } = $props()
</script>

<div class="p-4">
  {@render children()}
</div>

export const actions: Actions = {
  default: async (event) => {
    const form = await superValidate(event, zod(loginSchema))
    if (!form.valid) {
      return fail(400, { form })
    }

    // ログイン処理
    // 本来はAPIを実行してログインする

    // 特定の値のみ受け付けてエラーを再現する
    if (
      form.data.email !== 'test@test.com' ||
      form.data.password !== 'password'
    ) {
      setFlash({ message: 'ログインに失敗しました', type: 'error' }, event)
      return fail(400, { form })
    }

    // 今回はcookieにダミー値を直接セットする
    event.cookies.set('logged_in', 'true', {
      httpOnly: true,
      maxAge: 60 * 60 * 24 * 365,
      secure: true,
      path: '/',
    })

    return redirect(
      '/',
      { message: 'ログインしました', type: 'success' },
      event,
    )
  },
}

<Form.Description>test@test.com と入力してください</Form.Description>
<Form.Description>password と入力してください</Form.Description>

<!-- ホバーしたときにログアウトしないようにプリロードは切っておく -->
<a
  href='/logout'
  data-sveltekit-preload-data='off'
>
  ログアウト
</a>

import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ cookies }) => {
  // 本来はAPIを実行してログアウトする
  // 今回はcookieの値を削除して、ログアウトとみなす
  cookies.delete('logged_in', { path: '/' })
  redirect(302, '/login')
}

- ログイン状態によってリダイレクト処理を実行したい
  - ログイン不要な画面
    - ログイン済みの場合はホームへリダイレクト
  - ログインが必要な画面
    - 未ログインの場合はログイン画面へリダイレクト
- ルートのグループ化を行い、グループによって各種チェックを実行する

src/
├── routes/
│   ├── (loggedIn)/
│   ├── (notLogged)/
└── hooks.server.ts

import type { Handle } from '@sveltejs/kit'

export const handle: Handle = async ({ resolve, event }) => {
  const cookieLoggedIn = event.cookies.get('logged_in')
  const loggedIn = cookieLoggedIn === 'true'

  // ログインが必要な画面で未ログイン
  if (!loggedIn && event.route.id?.startsWith('/(loggedIn)')) {
    return Response.redirect(`${event.url.origin}/login`, 302)
  }
  // ログイン不要な画面でログイン済み
  if (loggedIn && event.route.id?.startsWith('/(notLogged)')) {
    return Response.redirect(`${event.url.origin}/`, 302)
  }

  // 実際は必要に応じてログインユーザー情報の取得やアクセストークンの検証を実施する

  return await resolve(event)
}