【Next.js】基礎から始めるNext.js API Routes【２４SignIn Method】

【２４SignIn Method】

YouTube: https://youtu.be/fh3GKGV685Y

https://youtu.be/fh3GKGV685Y

今回はログインの関数を実装します。
その前に「pages」直下の「Login.tsx」のファイル名を「login.tsx」に変更します。

components/LoginForm.tsx

import { Button, Label, TextInput } from 'flowbite-react'
import { ChangeEvent, SyntheticEvent, useState } from 'react'
import { signIn } from 'next-auth/react'

const LoginForm = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { value, name } = e.target
    setFormData({ ...formData, [name]: value })
  }

  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()

    const result = await signIn('credentials', {
      redirect: false,
      email: formData.email,
      password: formData.password,
    })

    console.log('result', result)
  }

  return (
    <div className="w-60">
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <div>
          <div className="mb-2 block">
            <Label htmlFor="email1" value="Your email" />
          </div>
          <TextInput
            id="email1"
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required={true}
          />
        </div>
        <div>
          <div className="mb-2 block">
            <Label htmlFor="password1" value="Your password" />
          </div>
          <TextInput
            id="password1"
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            required={true}
          />
        </div>

        <Button type="submit">Login</Button>
      </form>
    </div>
  )
}

export default LoginForm