Next.jsでログイン画面を作ってメールアドレス/パスワードでログインできるようにする

+ export const LoginSchema = z.object({
+   email: z.string().email({
+     message: 'メールアドレスを入力してください',
+   }),
+   password: z.string().min(1, {
+     message: 'パスワードを入力してください',
+   }),
+ })

import db from '@/lib/db'

export const getUserByEmail = async (email: string) => {
  try {
    const user = await db.user.findUnique({ where: { email } })

    return user
  } catch {
    return null
  }
}

+ import bcryptjs from 'bcryptjs'
import type { NextAuthConfig } from 'next-auth'
+ import Credentials from 'next-auth/providers/credentials'
import github from 'next-auth/providers/github'
+ import { getUserByEmail } from './data/user'
+ import { LoginSchema } from './schema'

- export default { providers: [github] } satisfies NextAuthConfig
+ export default {
+   providers: [
+     github,
+     Credentials({
+       async authorize(credentials) {
+         const validatedFields = LoginSchema.safeParse(credentials)
+
+         if (!validatedFields.success) {
+           return null
+         }

+         const { email, password } = validatedFields.data
+         const user = await getUserByEmail(email)
+         if (!user || !user.password) {
+           return null
+         }
+         const passwordMatch = await bcryptjs.compare(password, user.password)
+         if (passwordMatch) {
+           return user
+         }
+         return null
+       },
+     }),
+   ],
+ } satisfies NextAuthConfig

+     Credentials({
+       async authorize(credentials) {
+         const validatedFields = LoginSchema.safeParse(credentials)
+
+         if (!validatedFields.success) {
+           return null
+         }

+         const { email, password } = validatedFields.data
+         const user = await getUserByEmail(email)
+         if (!user || !user.password) {
+           return null
+         }

+         const passwordMatch = await bcryptjs.compare(password, user.password)
+         if (passwordMatch) {
+           return user
+         }

'use server'
import { AuthError } from 'next-auth'
import { z } from 'zod'
import { signIn } from '@/auth'
import { DEFAULT_LOGIN_REDIRECT } from '@/route'
import { LoginSchema } from '@/schema'

export const login = async (values: z.infer<typeof LoginSchema>) => {
  const validatedFields = LoginSchema.safeParse(values)

  if (!validatedFields.success) {
    return { error: '入力内容を修正してください' }
  }

  const { email, password } = validatedFields.data
  try {
    await signIn('credentials', {
      email,
      password,
      redirectTo: DEFAULT_LOGIN_REDIRECT,
    })
  } catch (error) {
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return {
            error: 'メールアドレスもしくはパスワードが間違っています。',
          }
        default:
          return { error: 'エラーが発生しました。' }
      }
    }

    throw error
  }
}

    await signIn('credentials', {
      email,
      password,
      redirectTo: DEFAULT_LOGIN_REDIRECT,
    })

'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { useState, useTransition } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { login } from '@/actions/login'
import { LoginSchema } from '@/schema'
import { FormError } from '../form-error'
import { Button } from '../ui/button'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '../ui/form'
import { Input } from '../ui/input'
import { CardWrapper } from './card-wrapper'

export const LoginForm = () => {
  const [error, setError] = useState<string | undefined>('')
  const [isPending, setTransition] = useTransition()
  const form = useForm<z.infer<typeof LoginSchema>>({
    resolver: zodResolver(LoginSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  })
  const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
    setError('')
    setTransition(async () => {
      try {
        const response = await login(values)
        if (response && response.error) {
          setError(response.error)
        }
      } catch (e) {
        setError('エラーが発生しました')
      }
    })
  }
  return (
    <CardWrapper
      headerLabel="メールアドレスとパスワードを入力してログイン"
      buttonLabel="アカウント作成がまだの方はコチラ"
      buttonHref="/auth/register"
      showSocial
    >
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <div className="space-y-4">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>メールアドレス</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      disabled={isPending}
                      placeholder="nextjs@example.com"
                      type="email"
                      autoComplete="off"
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>パスワード</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      placeholder="******"
                      type="password"
                      disabled={isPending}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
          <FormError message={error} />
          <Button type="submit" className="w-full" disabled={isPending}>
            ログイン
          </Button>
        </form>
      </Form>
    </CardWrapper>
  )
}

import { LoginForm } from '@/components/auth/login-form'

const LoginPage = () => {
  return <LoginForm />
}

export default LoginPage

+ import { auth, signOut } from '@/auth'
+ import { Button } from '@/components/ui/button'

- const SettingsPage = () => {
-   return <div>設定画面</div>

+ const SettingsPage = async () => {
+   const session = await auth()
+   if (!session) return null
+   const onSubmit = async () => {
+     'use server'
+     await signOut()
+   }
+   return (
+     <div>
+       設定画面
+       <pre>{JSON.stringify(session, null, 2)}</pre>
+       <form action={onSubmit}>
+         <Button type="submit" className="w-full" variant="secondary">
+           ログアウト
+         </Button>
+       </form>
+     </div>
+   )
}

export default SettingsPage

+   const session = await auth()
+   if (!session) return null

(※一部省略)

+       <pre>{JSON.stringify(session, null, 2)}</pre>

+   const onSubmit = async () => {
+     'use server'
+     await signOut()
+   }