Здравствуйте. Я на 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-запроса (если есть возможность заодно и этот момент скрыть, было бы замечательно).
Как мне проверить при авторизации, есть ли ошибка, и передать ее в React Hook Form, чтобы вывести сообщение об ошибке "Неверные email или пароль"? И в идеале еще скрыть POST-запрос к API из консоли.
Простой
Средний
