Next.js Discord

Discord Forum

Auth.js Zod form error

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
I am trying to validate the email and using auth.js v5 send the signin link.
But this doesn't work 
export default function MagicLinkSignin() {
  const [loading, setLoading] = useState(false);

  const onSubmit = async (data) => {
    setLoading(true);
    try {
      await signIn('resend', { email: data.email });
    } catch (error) {
      console.error('Signin error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="Vpiši email naslov" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="w-full" disabled={loading}>
          Pošlji
        </Button>
      </form>
    </Form>
Answered by Rhinelander
I just wrote it twice and it fixed it
View full answer

12 Replies

RhinelanderOP
I removed form in this code above just to make code shorter. In my existing code variable form exists
Velvet ant
what is not working exactly ? the zod validation ?
RhinelanderOP
i changed code so much that i got lost not. Give me 5 minutes and i report back if i did it or not else i send new code
RhinelanderOP
'use server';
import { signIn } from '@/auth';
import { z } from 'zod';

export const formSchema = z.object({
  email: ...
});

export default async function sendMagicLink(
  formData: z.infer<typeof formSchema>
) {
  const validation = formSchema.safeParse({
    email: formData.email,
  });

  if (validation.success) {
    await signIn('resend', formData);
  }
}
Here is the new code
'use client';
export default function ResendSignin() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: '',
    },
  });

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    await sendMagicLink(values);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
     ...
    </Form>
  );
}
I get this error: zod.mjs:1 Uncaught (in promise) TypeError: o[(intermediate value)(intermediate value)(intermediate value)] is not a function
Velvet ant
is it not because you're exporting the schema from a module with "use server" ? maybe try to define the schema inside a shared module like lib/schemas.ts for example
RhinelanderOP
I just wrote it twice and it fixed it
Answer
Velvet ant
I guess its better to have only one schema but glad you fixed it 🙂
RhinelanderOP
Yeah now i added it to one file as its much cleaner
thank you!