Login та Registration

app/
  api/
    login/
      route.ts
    register/
      route.ts
  login/
    page.tsx
  register/
    page.tsx
components/
  AuthForm.tsx
lib/
  auth-store.ts
  validation.ts

// lib/validation.ts
import { z } from "zod";

export const registerSchema = z
  .object({
    email: z
      .string()
      .trim()
      .toLowerCase()
      .email("Введіть коректний email")
      .max(254, "Email занадто довгий"),
    password: z
      .string()
      .min(8, "Пароль має містити щонайменше 8 символів")
      .max(72, "Пароль занадто довгий"),
    confirmPassword: z.string(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    path: ["confirmPassword"],
    message: "Паролі не збігаються",
  });

export const loginSchema = z.object({
  email: z
    .string()
    .trim()
    .toLowerCase()
    .email("Введіть коректний email")
    .max(254, "Email занадто довгий"),
  password: z.string().min(1, "Введіть пароль"),
});

// lib/auth-store.ts
import bcrypt from "bcryptjs";
import { randomUUID } from "node:crypto";

type User = {
  id: string;
  email: string;
  passwordHash: string;
};

const users = new Map<string, User>();
const sessions = new Map<string, string>();

export function findUserByEmail(email: string) {
  return users.get(email);
}

export async function createUser(email: string, password: string) {
  const passwordHash = await bcrypt.hash(password, 12);

  const user: User = {
    id: randomUUID(),
    email,
    passwordHash,
  };

  users.set(email, user);

  return user;
}

export async function checkPassword(
  password: string,
  passwordHash: string,
) {
  return bcrypt.compare(password, passwordHash);
}

export function createSession(userId: string) {
  const sessionId = randomUUID();

  sessions.set(sessionId, userId);

  return sessionId;
}

export function getUserIdBySession(sessionId: string) {
  return sessions.get(sessionId);
}

// app/api/register/route.ts
import { NextResponse } from "next/server";
import {
  createSession,
  createUser,
  findUserByEmail,
} from "@/lib/auth-store";
import { registerSchema } from "@/lib/validation";

export async function POST(request: Request) {
  let body: unknown;

  try {
    body = await request.json();
  } catch {
    return NextResponse.json(
      { message: "Некоректний формат запиту" },
      { status: 400 },
    );
  }

  const result = registerSchema.safeParse(body);

  if (!result.success) {
    const errors: Record<string, string> = {};

    for (const issue of result.error.issues) {
      const field = issue.path[0];

      if (typeof field === "string" && !errors[field]) {
        errors[field] = issue.message;
      }
    }

    return NextResponse.json({ errors }, { status: 400 });
  }

  const { email, password } = result.data;
  const existingUser = findUserByEmail(email);

  if (existingUser) {
    // Не повідомляємо зайвих деталей у складніших системах.
    return NextResponse.json(
      { errors: { email: "Не вдалося створити обліковий запис" } },
      { status: 400 },
    );
  }

  const user = await createUser(email, password);
  const sessionId = createSession(user.id);

  const response = NextResponse.json(
    { message: "Обліковий запис створено" },
    { status: 201 },
  );

  response.cookies.set("session", sessionId, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24 * 7,
  });

  return response;
}

// app/api/login/route.ts
import bcrypt from "bcryptjs";
import { NextResponse } from "next/server";
import {
  createSession,
  findUserByEmail,
} from "@/lib/auth-store";
import { loginSchema } from "@/lib/validation";

// Дійсний хеш використовується, щоб перевірка відсутнього користувача
// не завершувалася миттєво.
const DUMMY_HASH = bcrypt.hashSync("not-a-real-password", 12);

export async function POST(request: Request) {
  let body: unknown;

  try {
    body = await request.json();
  } catch {
    return NextResponse.json(
      { message: "Некоректний формат запиту" },
      { status: 400 },
    );
  }

  const result = loginSchema.safeParse(body);

  if (!result.success) {
    const errors: Record<string, string> = {};

    for (const issue of result.error.issues) {
      const field = issue.path[0];

      if (typeof field === "string" && !errors[field]) {
        errors[field] = issue.message;
      }
    }

    return NextResponse.json({ errors }, { status: 400 });
  }

  const { email, password } = result.data;
  const user = findUserByEmail(email);

  // Перевірка виконується навіть без знайденого користувача.
  const passwordIsValid = await bcrypt.compare(
    password,
    user?.passwordHash ?? DUMMY_HASH,
  );

  if (!user || !passwordIsValid) {
    return NextResponse.json(
      { message: "Неправильний email або пароль" },
      { status: 401 },
    );
  }

  const sessionId = createSession(user.id);

  const response = NextResponse.json({
    message: "Вхід виконано",
  });

  response.cookies.set("session", sessionId, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24 * 7,
  });

  return response;
}

// components/AuthForm.tsx
"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

type AuthFormProps = {
  mode: "login" | "register";
};

type FieldErrors = Record<string, string>;

export default function AuthForm({ mode }: AuthFormProps) {
  const router = useRouter();
  const isRegister = mode === "register";

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [errors, setErrors] = useState<FieldErrors>({});
  const [formError, setFormError] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    setErrors({});
    setFormError("");
    setIsSubmitting(true);

    const payload = isRegister
      ? { email, password, confirmPassword }
      : { email, password };

    try {
      const response = await fetch(
        isRegister ? "/api/register" : "/api/login",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        },
      );

      const data = await response.json();

      if (!response.ok) {
        setErrors(data.errors ?? {});
        setFormError(data.message ?? "");
        return;
      }

      router.push("/account");
      router.refresh();
    } catch {
      setFormError(
        "Не вдалося виконати запит. Спробуйте ще раз.",
      );
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          aria-invalid={Boolean(errors.email)}
          aria-describedby={errors.email ? "email-error" : undefined}
          required
        />
        {errors.email && (
          <p id="email-error" role="alert">
            {errors.email}
          </p>
        )}
      </div>

      <div>
        <label htmlFor="password">Пароль</label>
        <input
          id="password"
          name="password"
          type="password"
          autoComplete={isRegister ? "new-password" : "current-password"}
          value={password}
          onChange={(event) => setPassword(event.target.value)}
          aria-invalid={Boolean(errors.password)}
          aria-describedby={
            errors.password ? "password-error" : undefined
          }
          required
        />
        {errors.password && (
          <p id="password-error" role="alert">
            {errors.password}
          </p>
        )}
      </div>

      {isRegister && (
        <div>
          <label htmlFor="confirmPassword">
            Підтвердження пароля
          </label>
          <input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            autoComplete="new-password"
            value={confirmPassword}
            onChange={(event) =>
              setConfirmPassword(event.target.value)
            }
            aria-invalid={Boolean(errors.confirmPassword)}
            aria-describedby={
              errors.confirmPassword
                ? "confirm-password-error"
                : undefined
            }
            required
          />
          {errors.confirmPassword && (
            <p id="confirm-password-error" role="alert">
              {errors.confirmPassword}
            </p>
          )}
        </div>
      )}

      {formError && <p role="alert">{formError}</p>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting
          ? "Зачекайте..."
          : isRegister
            ? "Зареєструватися"
            : "Увійти"}
      </button>
    </form>
  );
}

// app/login/page.tsx
import AuthForm from "@/components/AuthForm";

export default function LoginPage() {
  return (
    <main>
      <h1>Вхід</h1>
      <AuthForm mode="login" />
    </main>
  );
}

// app/register/page.tsx
import AuthForm from "@/components/AuthForm";

export default function RegisterPage() {
  return (
    <main>
      <h1>Реєстрація</h1>
      <AuthForm mode="register" />
    </main>
  );
}

if (existingUser) {
  // створення користувача
}

Неправильний email або пароль