ブログ

// src/app/login/page.tsx（Before）
'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { useAuthStore } from '@/store/auth'

export default function LoginPage() {
  const router = useRouter()
  const login = useAuthStore((state) => state.login)
  const [email, setEmail] = useState('')       // ① メール
  const [password, setPassword] = useState('') // ② パスワード
  const [error, setError] = useState('')       // ③ エラー
  const [loading, setLoading] = useState(false) // ④ ローディング

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault() // フォーム送信時にページ全体がリロードされるのを防ぐ
    setError('')
    setLoading(true) // ローディング表示

    const result = await login(email, password) // ログイン処理を実行

    if (result.success) {
      router.push('/')
    } else {
      setError(result.error || 'ログインに失敗しました')
    }

    setLoading(false) // フォーム送信完了後、ローディングを非表示
  }

  // ログインフォーム
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {error && <p>{error}</p>}
      <button disabled={loading}>
        {loading ? 'ログイン中...' : 'ログイン'}
      </button>
    </form>
  )
}

// src/actions/auth.ts
'use server' // ディレクティブ

import bcrypt from 'bcryptjs'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { prisma } from '@/lib/prisma'

export type LoginState = {
  error: string | null
}

// サーバーで実行される関数
export async function loginAction(
  prevState: LoginState,
  formData: FormData
): Promise<LoginState> {
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  // バリデーションチェック
  if (!email || !password) {
    return { error: 'メールアドレスとパスワードを入力してください' }
  }

  // ユーザー検索
  const user = await prisma.user.findUnique({
    where: { email },
  })

  if (!user) {
    return { error: 'メールアドレスまたはパスワードが正しくありません' }
  }

  // パスワードチェック
  const passwordValid = await bcrypt.compare(password, user.password)
  if (!passwordValid) {
    return { error: 'メールアドレスまたはパスワードが正しくありません' }
  }

  const { password: _, ...userWithoutPassword } = user

  // サーバー側で直接クッキーを設定
  const cookieStore = await cookies()
  cookieStore.set('user', JSON.stringify(userWithoutPassword), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 60 * 60 * 24 * 7,
  })

  redirect('/')  // サーバー側でリダイレクト
}

// src/app/login/page.tsx（After）
'use client'

import { useActionState } from 'react'
import { loginAction, type LoginState } from '@/actions/auth'

const initialState: LoginState = { error: null }

export default function LoginPage() {
  const [state, formAction, isPending] = useActionState(loginAction, initialState)

  // ログインフォーム
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      {state.error && <p>{state.error}</p>}
      <button disabled={isPending}>
        {isPending ? 'ログイン中...' : 'ログイン'}
      </button>
    </form>
  )
}