@r4gn4r0k

Как в Next.js при валидации форм через React Hook Form обрабатывать еще и запрос к внешнему API?

Здравствуйте. Я на Next.js использую React Hook Form для валидации. И для валидации на стороне клиента все работает хорошо. Но для формы авторизации появилась необходимость в валидации на стороне сервера для проверки правильные ли e-mail/пароль ввел пользователь. Если неправильные, то надо вывести сообщение об ошибке через React Hook Form.

На данный момент при успешной валидации формы (файл LoginForm.tsx) код обращается к функции login (которая лежит в файле (api/auth.ts).

Код файла LoginForm.tsx:
'use client'

import type {NextPage} from 'next'
import { useForm, SubmitHandler } from "react-hook-form";
import { LoginFormDTO } from '@/api/dto/auth.dto';
import { setCookie } from 'nookies';
import * as Api from "@/api";
import styles from './Auth.module.scss';

interface IFormInput {
  email: string
  password: string
}

export const LoginForm: NextPage = () => {
  const {
    register,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm<IFormInput>();

  const onSubmit: SubmitHandler<IFormInput> = async (data: LoginFormDTO) => {
    try {
      console.log('Валидация прошла успешно!');
      const { token } = await Api.login(data); // Вот здесь идет отправка формы через функцию из файла api/auth.ts. В случае успеха получаем _token, который потом запишется в куки.

      setCookie(null, '_token', token, {
        path: '/',
      });
      console.log('Авторизация прошла успешно!');
      reset();      
      location.href = '/dashboard';
    } catch (err) {
      console.warn('При авторизации возникла ошибка: ', err)
    }
  };

  return (
    <div className={styles.formBlock}>
      <h1 className={styles.title}>Вход в личный кабинет</h1>
      <div className={styles.form_container}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <label htmlFor="email">E-mail</label>
          <input 
            type="email"
            placeholder="E-mail"
            {...register('email', {
              required: true,
              pattern: {
                value: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
                message: "Введите корректный email"
              }
            })}
            aria-invalid={errors.email ? "true" : "false"}
          />
          {errors.email?.type === "required" && (
            <p className={styles.text_error}>Email - обязательное поле.</p>
          )}
          {errors.email && <p className={styles.text_error}>{errors.email.message}</p>}
          <input
            type="password"
            {...register('password', {
              required: true,
            })}
            aria-invalid={errors.password ? "true" : "false"}
          />
          {errors.password?.type === "required" && (
            <p className={styles.text_error}>Пароль - обязательное поле.</p>
          )}
          <input type="submit" />
        </form>

        <div className={styles.switch_sign}>
          <p>У меня нет аккаунта</p>
          <a href="/register">Зарегистрироваться</a>
        </div>
        <div className={styles.policy}>Нажимая кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности сайта</div>
      </div>
    </div>
  )
}


Код файла api/auth.ts:

import axios from "@/components/core/axios";
import { LoginFormDTO, LoginResponseDTO, RegisterFormDTO, RegisterResponseDTO, User } from "./dto/auth.dto";

export const login = async (
    values: LoginFormDTO
    ): Promise<LoginResponseDTO> => {
    return (await axios.post('auth/login', values)).data;
};


Функция делает запрос на API, разработанное на Nest.js. На данный момент, если авторизация неуспешна (возвращает ошибку 401). И в консоли выводит результат POST-запроса (если есть возможность заодно и этот момент скрыть, было бы замечательно).
657c5eb12e58d859236904.png

Как мне проверить при авторизации, есть ли ошибка, и передать ее в React Hook Form, чтобы вывести сообщение об ошибке "Неверные email или пароль"? И в идеале еще скрыть POST-запрос к API из консоли.
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
@mvn-h24
react-hook-from, хук useForm, возращает метод, его можно использовать для установки кастомной ошибки.

Статус ошибки ни как не скрыть, это контролируется на уровне браузера, пример.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы