A custom Neon Auth sign-in page in Next.js

Your own sign-in screen on Neon Auth: the shy mascot login calls auth.signIn.email in a server action, shows Neon's error text when the password is wrong, and hops before it sends you on.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/auth/sign-in/page.tsx

"use client";
import { useRouter } from "next/navigation";
import ShyEyesLogin from "@/components/ShyEyesLogin";
import { signInWithEmail } from "./actions";

export default function SignInPage() {
  const router = useRouter();

  return (
    <main className="grid min-h-dvh place-items-center bg-[#0b0d12] p-4">
      <ShyEyesLogin
        title="Welcome back"
        forgotHref="/auth/forgot-password"
        resetAfter={null}
        onSubmit={async (email, password) => {
          const { error } = await signInWithEmail(email, password);
          if (error) throw new Error(error); // he shakes his head and the message shows
          setTimeout(() => {
            router.push("/dashboard");
            router.refresh();
          }, 900); // let the happy hop play first
        }}
        signInError={(e) => (e instanceof Error ? e.message : "That didn't work. Try again.")}
      />
    </main>
  );
}

app/auth/sign-in/actions.ts

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

export async function signInWithEmail(email: string, password: string) {
  // Neon's server SDK returns { data, error } instead of throwing
  const { error } = await auth.signIn.email({ email, password });
  return { error: error ? error.message || "Wrong email or password." : null };
}

lib/auth/server.ts

import { createNeonAuth } from "@neondatabase/auth/next/server";

export const auth = createNeonAuth({
  baseUrl: process.env.NEON_AUTH_BASE_URL!,
  cookies: { secret: process.env.NEON_AUTH_COOKIE_SECRET! }, // 32+ characters
});

app/api/auth/[...path]/route.ts

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

export const { GET, POST } = auth.handler();

Good to know

Type-checked against @neondatabase/auth 0.7.0-beta and next 16.4 with TypeScript 5.9. We haven't signed in to a live Neon project with it.
The SDK is still a beta: 0.7.0-beta was published on October 21, 2026, and that release lists next >=16 as a peer dependency. Pin the exact version in package.json and re-check auth.signIn.email when you upgrade.
Neon calls this Managed Better Auth, and the server object has the same method names as Better Auth. If you've seen our Better Auth login page, the flow is the same: email and password in, { data, error } back, no exception.
This follows Neon's own "API methods" quickstart for Next.js: enable Auth in the Neon Console, copy the Auth URL into NEON_AUTH_BASE_URL, and set NEON_AUTH_COOKIE_SECRET to a random string of at least 32 characters. Add the proxy.ts from that guide if you want routes protected.
If you want every screen ready and don't need a custom look, Neon's free @neondatabase/auth-ui package is the better pick. Its AuthView covers sign-in, sign-up, magic link, forgot password and two-factor routes in one dynamic page.
The mascot is one sign-in card. Sign-up, password reset and Google buttons aren't in it. forgotHref points at your reset page, and Neon's quickstart shows a sign-up action with auth.signUp.email.

Install

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

Props

onSubmit: (email, password) → promise; throw to shake
signInError: message, or a function of the thrown error
forgotHref: your reset-password page
resetAfter: null keeps the success state
accent: button colour

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

Is Neon Auth the same as Better Auth?

Neon runs Better Auth for you and calls it Managed Better Auth. The method names match, so auth.signIn.email works the way Better Auth's signIn.email does.

Why a server action and not authClient in the browser?

Both work. Neon's API-methods guide uses auth from @neondatabase/auth/next/server in server actions, so the session cookie is set on the server response. authClient.signIn.email is the browser route.

Does it work on Next.js 15?

The current beta lists next >=16 as a peer dependency. On 15, check Neon's docs for the version that matches, and name the file middleware.ts instead of proxy.ts, as their guide says.

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.