Auth.js credentials login page

The shy-eyes mascot login calling Auth.js signIn with redirect: false, so you choose what happens on a wrong password.

Get the code · $3React · Tailwind · TypeScript

Use it in Next.js

app/login/page.tsx

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import ShyEyesLogin from "@/components/ShyEyesLogin";

export default function LoginPage() {
  const router = useRouter();
  const [error, setError] = useState("");

  return (
    <main className="grid min-h-dvh place-items-center">
      <ShyEyesLogin
        onSubmit={async (email, password) => {
          setError("");
          const res = await signIn("credentials", { email, password, redirect: false });
          if (!res || res.error) {
            setError("Wrong email or password.");
            throw new Error("sign-in failed"); // the form goes back to idle
          }
          router.push("/dashboard");
        }}
      />
      {error ? <p role="alert" className="mt-4 text-sm text-red-400">{error}</p> : null}
    </main>
  );
}

Good to know

We type-checked this against next-auth 5.0.0-beta.32 (the version npm installs as @beta today). It assumes you already set up a Credentials provider in auth.ts.
The mascot form has no error text of its own. When onSubmit throws, it just goes back to idle, so the snippet shows its own message under the form.
redirect: false keeps the user on the page so the mascot can celebrate first. Then you push to /dashboard yourself.
Google or GitHub buttons aren't in the piece.

Install

Copy from the zipPut react/src/components into src/, then npm i next-auth@beta framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit: (email, password); throw to cancel the success state
title / subtitle: heading text
accent: button and antenna colour
bodyColors: mascot gradient

How qodesign compares

qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

Does it work with NextAuth v4?

The form doesn't care which version you use. In v4 the same signIn call comes from next-auth/react with the same options.

Can I use it with Clerk instead?

Yes, but Clerk's sign-in is a different call. Put that call inside onSubmit and throw on failure.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.