Как использовать Zod с @supabase/srr в NextJs

Вопрос или проблема

import { login, signup } from './actions'

export default function LoginPage() {
  return (
    <form>
      <label htmlFor="email">Электронная почта:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Пароль:</label>
      <input id="password" name="password" type="password" required />
      <button formAction={login}>Войти</button>
      <button formAction={signup}>Зарегистрироваться</button>
    </form>
  )
}

Ответ или решение

Использование Zod с @supabase/srr в Next.js

При разработке приложения с использованием Next.js и Supabase для аутентификации, вы можете столкнуться с вызовом использования валидации данных на стороне сервера и клиента. В этой статье я расскажу, как интегрировать библиотеку валидации Zod вместе с Supabase, чтобы обеспечить надежную аутентификацию пользователей через формы логина и регистрации. Мы сосредоточимся на том, как правильно организовать архитектуру вашего приложения, чтобы все компоненты работали вместе.

Контекст задачи

Вы собираетесь построить форму логина и регистрации в серверном компоненте, используя Supabase и его возможности для аутентификации пользователей. В дополнение к этому вам нужно будет реализовать валидацию данных с помощью Zod. Основной вопрос заключается в том, как правильно организовать вызовы ваших серверных действий и валидацию данных.

Шаг 1: Установка необходимых библиотек

Убедитесь, что вы установили следующие зависимости:

npm install @supabase/supabase-js zod react-hook-form

Шаг 2: Создание схемы с помощью Zod

Создайте схему валидации для своих форм с использованием Zod. Это поможет вам убедиться, что на стороне сервера и клиента данные, вводимые пользователем, соответствуют заданным вами требованиям.

// src/validation/userSchema.js

import { z } from 'zod';

export const userSchema = z.object({
  email: z.string().email('Некорректный адрес электронной почты'),
  password: z.string()
    .min(6, 'Пароль должен содержать как минимум 6 символов'),
});

Шаг 3: Создание серверных действий

Создайте серверные действия для логина и регистрации, которые будут вызываться из вашей формы. Эти функции будут использовать метод signIn и signUp из Supabase.

// src/app/actions.js

import { supabase } from './supabaseClient'; // Импортируйте ваш экземпляр Supabase
import { userSchema } from './validation/userSchema';

export const login = async (data) => {
  // Валидация данных
  const result = userSchema.safeParse(data);
  if (!result.success) {
    throw new Error('Валидация не пройдена');
  }

  const { email, password } = data;
  const { error } = await supabase.auth.signIn({ email, password });
  if (error) throw new Error(error.message);
  return { message: 'Успешный вход' };
};

export const signup = async (data) => {
  // Валидация данных
  const result = userSchema.safeParse(data);
  if (!result.success) {
    throw new Error('Валидация не пройдена');
  }

  const { email, password } = data;
  const { error } = await supabase.auth.signUp({ email, password });
  if (error) throw new Error(error.message);
  return { message: 'Успешная регистрация' };
};

Шаг 4: Создание клиентского компонента

Создайте компонент формы, в котором вы будете вызывать серверные действия при сабмите. Использоваться может стандартная HTML-форма с кнопками для вызова ваших действий.

// src/app/LoginPage.js

import { login, signup } from './actions';

export default function LoginPage() {
  return (
    <form>
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button type="submit" onClick={async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        try {
          await login(data);
          alert('Успешный вход');
        } catch (error) {
          alert(error.message);
        }
      }}>Log in</button>
      <button type="submit" onClick={async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        try {
          await signup(data);
          alert('Успешная регистрация');
        } catch (error) {
          alert(error.message);
        }
      }}>Sign up</button>
    </form>
  );
}

Шаг 5: Оптимизация и безопасность

Несмотря на то, что вы можете вызывать серверные действия из клиентского компонента, учитывайте безопасность и производительность:

1. API Endpoint: Если у вас сложные действия, лучше подумать о создании API endpoint’ов, где будут проходить обработка и валидация данных.
2. Состояние и UI компоненты: При использовании useForm из React Hook Form вы сможете управлять состоянием формы более эффективно, и это будет хорошей практикой.
3. Обработка ошибок: Убедитесь, что вы обрабатываете ошибки должным образом и информируете пользователя о проблемах с его вводом.

Заключение

Интеграция Zod с Supabase в Next.js является мощным инструментом для создания безопасных и надежных форм аутентификации. Учтите, что при разработке необходимо обращать внимание на безопасность данных и пользовательский опыт. Следуя описанным выше шагам, вы сможете успешно использовать валидацию форм на серверной и клиентской стороне.