Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago•
16 replies
utdev

Zod form email required

I have a simple form, for my email auth using next-auth, right now if I enter my email and submit the form I get this error in my browser's console log:

{email: {…}}
email
: 
{message: 'Required', type: 'invalid_type', ref: undefined}
[[Prototype]]
: 
Object


This is how my Login Form component looks like:
import { emailSignUpSchema, SignUp } from '@/lib/zod/auth-schema'
import { zodResolver } from '@hookform/resolvers/zod'
import { signIn } from 'next-auth/react'
import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
import { z } from 'zod'
import Button from '../ui/button'
import Input from '../ui/input'
import Label from '../ui/label'

export default function LoginForm() {
  const methods = useForm()
  const { handleSubmit, register } = useForm<SignUp>({
    resolver: zodResolver(emailSignUpSchema),
  })

  const onSubmit = async (data: SignUp) => {
    console.log('loginWithEmail', data)
    await signIn('email', {
      email: data.email,
      callbackUrl: '/dashboard',
    })
  }

  const onErrors = (errors: any) => console.error(errors)

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit, onErrors)}>
        <div className="space-y-6">
          <Label htmlFor="email">Email address</Label>
          <div className="mt-1">
            <Input
              id="email"
              name="email"
              type="email"
              autoComplete="email"
              required
            />
          </div>
          <Button
            type="submit"
            className="flex w-full justify-center"
            color="primary"
          >
            Sign in
          </Button>
        </div>
      </form>
    </FormProvider>
  )
}
Was this page helpful?