A daisyUI login page for Next.js

app/login/daisy-login-form.tsx

"use client";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { signIn } from "./actions";

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

  return (
    <form
      noValidate
      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);
        });
      }}
    >
      <fieldset className="fieldset w-xs rounded-box border border-base-300 bg-base-100 p-4">
        <legend className="fieldset-legend">Login</legend>

        <label className="label" htmlFor="login-email">Email</label>
        <input
          id="login-email"
          name="email"
          type="email"
          autoComplete="email"
          placeholder="[email protected]"
          aria-invalid={!!errors.email}
          className={`input w-full ${errors.email ? "input-error" : ""}`}
          onChange={() => setErrors((e) => ({ ...e, email: "" }))}
        />
        {errors.email ? <p className="label text-error">{errors.email}</p> : null}

        <label className="label" htmlFor="login-password">Password</label>
        <input
          id="login-password"
          name="password"
          type="password"
          autoComplete="current-password"
          placeholder="Your password"
          aria-invalid={!!errors.password}
          className={`input w-full ${errors.password ? "input-error" : ""}`}
          onChange={() => setErrors((e) => ({ ...e, password: "" }))}
        />
        {errors.password ? <p className="label text-error">{errors.password}</p> : null}

        <a href="/forgot-password" className="link link-hover mt-1 w-fit">Forgot password?</a>
        <button type="submit" className="btn btn-neutral mt-4" disabled={pending}>
          {pending ? <span className="loading loading-spinner loading-sm" /> : null}
          Login
        </button>
      </fieldset>
    </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";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

/* Pull-Cord's inputs carry font-sans. Tailwind v4 doesn't read the piece's
   tailwind.config.js, so pin the room's font here, scoped to the room. */
.qpc-room .font-sans {
  font-family: "Space Grotesk", system-ui, sans-serif;
}