A HeroUI login page for Next.js

app/login/heroui-login-form.tsx

"use client";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Button, FieldError, Form, Input, Label, Link, TextField } from "@heroui/react";
import { signIn } from "./actions";

export function HeroUILoginForm() {
  const router = useRouter();
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [pending, startTransition] = useTransition();

  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      validationErrors={errors}
      onSubmit={(e) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
        startTransition(async () => {
          const res = await signIn(String(data.get("email")), String(data.get("password")));
          if (res.ok) router.push("/dashboard");
          else setErrors(res.errors);
        });
      }}
    >
      <h1 className="text-2xl font-semibold">Welcome back</h1>
      <TextField isRequired name="email" type="email" autoComplete="email">
        <Label>Email</Label>
        <Input placeholder="[email protected]" />
        <FieldError />
      </TextField>
      <TextField isRequired name="password" type="password" autoComplete="current-password">
        <Label>Password</Label>
        <Input placeholder="Your password" />
        <FieldError />
      </TextField>
      <Link href="/forgot-password">Forgot password?</Link>
      <Button type="submit" isPending={pending} fullWidth>
        Sign in
      </Button>
    </Form>
  );
}

app/login/actions.ts

"use server";
import { verifyCredentials } from "@/lib/auth";

export type SignInResult = { ok: true } | { ok: false; errors: Record<string, string> };

export async function signIn(email: string, password: string): Promise<SignInResult> {
  const errors: Record<string, string> = {};
  if (!/.+@.+\..+/.test(email)) errors.email = "Enter a valid email";
  if (!password) errors.password = "Password is required";
  if (Object.keys(errors).length > 0) return { ok: false, errors };

  // Your auth layer: checks the password and sets the session cookie.
  const ok = await verifyCredentials(email, password);
  if (!ok) return { ok: false, errors: { password: "Wrong email or password" } };
  return { ok: true };
}

app/globals.css

@import "tailwindcss";
@import "@heroui/styles";

/* Pull-Cord's inputs carry font-sans. Tailwind v4 reads fonts from @theme, not
   the piece's tailwind.config.js, so pin the room's font here instead. */
.qpc-room .font-sans {
  font-family: "Space Grotesk", system-ui, sans-serif;
}