How to trigger FormMessage to display an error when failed to login in NextAuth

[kemaltf]

I tried to make a form with shadcn-ui form. When i send "false" credential to next auth it throw an error. And i want to display the error below the input field. How to trigger that?

'use client';

// With Zod, you can define schemas for your data
// and then use the functions provided by Zod to validate whether
// the data conforms to the specified schema.
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useForm } from 'react-hook-form';
// use state management (using zustand)
import { useState } from 'react';
import { signIn } from 'next-auth/react';
import { useRouter, useSearchParams } from 'next/navigation';

import { signInSchema } from '@/lib/definitions';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import toast from 'react-hot-toast';

export const LoginForm = () => {
  const {
    handleSubmit,
    control,
    setError,
    formState: { errors },
  } = useForm();
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get('callbackUrl') || '/profile';
  const [loading, setLoading] = useState(false);

  // define hook
  const form = useForm<z.infer<typeof signInSchema>>({
    resolver: zodResolver(signInSchema),
    defaultValues: {
      username: '',
      password: '',
    },
  });

  const onSubmit = async (values: z.infer<typeof signInSchema>) => {
    console.log(values);
    try {
      setLoading(true);
      const res = await signIn('credentials', {
        redirect: false,
        username: values.username,
        password: values.password,
        callbackUrl,
      });
      setLoading(false);

      console.log(res);

      if (!res?.error) {
        router.push(callbackUrl);
      }

      // Manually set error based on the response
      // Ensure that the message is always a string
      const errorMessage = res?.error || 'Authentication error';
      console.log(errorMessage);
      setError('password', { type: 'manual', message: errorMessage });
    } catch (error) {
      toast.error('Something went wrong.');
    }
  };

  return (
    <div className="space-y-4 p-8">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="username" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input type="password" placeholder="Password" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button disabled={loading} type="submit">
            Login
          </Button>
        </form>
      </Form>
    </div>
  );
};

[onurhan1337]

In your code, you're using setError from react-hook-form to manually set an error message when the sign-in fails. However, you're not using this error state to display the error message in your form.

To display the error message, you need to pass the error state to the FormMessage component. Here's how you can do it:

<FormField
  control={form.control}
  name="password"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Password</FormLabel>
      <FormControl>
        <Input type="password" placeholder="Password" {...field} />
      </FormControl>
      {errors.password && <FormMessage>{errors.password.message}</FormMessage>}
    </FormItem>
  )}
/>

In this code, errors.password will be truthy if there's an error with the password field. If there's an error, the FormMessage component will be rendered with the error message.

Please note that this assumes that your FormMessage component accepts children as a way to display the message. If it uses a prop instead, you'll need to adjust the code accordingly. For example, if it uses a message prop, you would do:

{errors.password && <FormMessage message={errors.password.message} />}

This way, when the sign-in fails and you call setError('password', { type: 'manual', message: errorMessage }), the error message will be displayed under the password field.

[kemaltf]

Thanks a bunch 🥇 👍

[zerinoid]

there's a leaner way to do this: instead of using setError from a new useForm() call, you should use it from the already existing call assigned in form:

form.setError(...)

it will interact with the already running react-state-hook instance and will automatically update <FormMessage> as is, with no need to pass props manually to it.