An Ory Kratos custom login page in Next.js

Ory lets you replace its hosted sign-in screen with your own and talk to the login flow API from the browser. Here the pull-cord lamp login posts the email and password to an Ory browser flow, shows Ory's own error message when they're wrong, and sends the user on once the session cookie is set.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
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/login/page.tsx

"use client";
import { useEffect, useState } from "react";
import type { LoginFlow } from "@ory/client";
import PullCordLogin from "@/components/PullCordLogin";
import { loadLoginFlow, submitPassword } from "@/lib/ory-flow";
import { PlainLoginForm } from "./plain-form";

const ORY = process.env.NEXT_PUBLIC_ORY_SDK_URL;

export default function LoginPage() {
  const [flow, setFlow] = useState<LoginFlow>();
  const [message, setMessage] = useState("");

  useEffect(() => {
    loadLoginFlow().then(setFlow, () => setMessage("Sign-in is unavailable right now."));
  }, []);

  async function signIn(email: string, password: string) {
    if (!flow) throw new Error("no flow yet");
    setMessage("");
    const res = await submitPassword(flow, email, password);
    if (!res.ok) {
      setFlow(res.flow);
      setMessage(res.message);
      throw new Error(res.message); // the card shakes, the button resets
    }
    // Ory has set the session cookie. A full page load lets server components see it.
    setTimeout(() => window.location.assign(flow.return_to || "/dashboard"), 900);
  }

  return (
    <main className="grid min-h-dvh place-items-center bg-[#07080c]">
      {/* The lamp room is drawn at 1000 x 660, so it only shows where it fits. */}
      <div className="hidden lg:block">
        <PullCordLogin
          defaultOn
          subtitle={message || "Sign in with your email and password"}
          forgotHref={`${ORY}/self-service/recovery/browser`}
          onFooterAction={() => window.location.assign(`${ORY}/self-service/registration/browser`)}
          onSubmit={signIn}
        />
      </div>
      <div className="w-full max-w-sm p-6 lg:hidden">
        <PlainLoginForm message={message} onSubmit={signIn} />
      </div>
    </main>
  );
}

lib/ory.ts

import { Configuration, FrontendApi } from "@ory/client";

// Locally: the Ory Tunnel URL (http://localhost:4000). In production: your custom domain on Ory,
// e.g. https://auth.example.com, so Ory's cookies live on your own domain.
export const ory = new FrontendApi(
  new Configuration({
    basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,
    baseOptions: { withCredentials: true },
  }),
);

lib/ory-flow.ts

import type { LoginFlow, UpdateLoginFlowBody } from "@ory/client";
import { ory } from "@/lib/ory";

type HttpError = { response?: { status: number; data: unknown } };
const isHttpError = (e: unknown): e is HttpError => typeof e === "object" && e !== null && "response" in e;

/** The flow's hidden csrf_token node. Browser flows reject a submit without it. */
export function csrfToken(flow: LoginFlow) {
  for (const node of flow.ui.nodes) {
    if (node.attributes.node_type === "input" && node.attributes.name === "csrf_token") {
      return String(node.attributes.value ?? "");
    }
  }
  return "";
}

/** The first message Ory put on the flow or on one of its fields, such as the wrong-credentials error. */
export function firstMessage(flow: LoginFlow) {
  const all = [...(flow.ui.messages ?? []), ...flow.ui.nodes.flatMap((n) => n.messages)];
  return all.find((m) => m.type === "error")?.text ?? all[0]?.text ?? "";
}

/** Reuse ?flow=<id> when Ory sent the browser here, otherwise start a new browser login flow. */
export async function loadLoginFlow(): Promise<LoginFlow> {
  const params = new URLSearchParams(window.location.search);
  const id = params.get("flow");
  if (id) {
    try {
      return (await ory.getLoginFlow({ id })).data;
    } catch {
      // expired or unknown: fall through and start a fresh one
    }
  }
  return (await ory.createBrowserLoginFlow({ returnTo: params.get("return_to") ?? undefined })).data;
}

export type LoginResult = { ok: true } | { ok: false; flow: LoginFlow; message: string };

export async function submitPassword(flow: LoginFlow, identifier: string, password: string): Promise<LoginResult> {
  const body: UpdateLoginFlowBody = {
    method: "password",
    identifier,
    password,
    csrf_token: csrfToken(flow),
  };
  try {
    await ory.updateLoginFlow({ flow: flow.id, updateLoginFlowBody: body });
    return { ok: true };
  } catch (err) {
    if (isHttpError(err) && err.response?.status === 400) {
      // Ory answers a wrong password with the same flow, now carrying the error message.
      const next = err.response.data as LoginFlow;
      return { ok: false, flow: next, message: firstMessage(next) || "Wrong email or password" };
    }
    if (isHttpError(err) && err.response?.status === 410) {
      // The flow expired while the page sat open: start a new one and ask again.
      const next = (await ory.createBrowserLoginFlow()).data;
      return { ok: false, flow: next, message: "That took a while. Please sign in again." };
    }
    throw err;
  }
}

app/login/plain-form.tsx

"use client";
import { useState } from "react";

export function PlainLoginForm({ message, onSubmit }: { message: string; onSubmit: (email: string, password: string) => Promise<void> }) {
  const [busy, setBusy] = useState(false);
  return (
    <form
      className="flex flex-col gap-3 text-white"
      onSubmit={async (e) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
        setBusy(true);
        try {
          await onSubmit(String(data.get("email")), String(data.get("password")));
        } catch {
          setBusy(false); // the message above the form already says why
        }
      }}
    >
      <h1 className="text-2xl font-semibold">Welcome back</h1>
      {message ? <p role="alert" className="text-sm text-red-400">{message}</p> : null}
      <input name="email" type="email" autoComplete="email" required placeholder="[email protected]" className="rounded-lg bg-white/10 px-3 py-2" />
      <input name="password" type="password" autoComplete="current-password" required placeholder="Password" className="rounded-lg bg-white/10 px-3 py-2" />
      <button disabled={busy} className="rounded-lg bg-lime-300 py-2 font-medium text-black">{busy ? "Signing in" : "Sign in"}</button>
    </form>
  );
}

Good to know

Ory documents a custom UI as a supported path: you create a self-service flow, render its fields, and send the values back with the flow's CSRF token. Its React example uses @ory/client's FrontendApi with withCredentials: true, createBrowserLoginFlow, and updateLoginFlow, and on a 400 it swaps in the returned flow to show the error. The files above do the same and hand the result to Pull-Cord Login.
Cookies decide whether this works. Ory's docs say to use Ory Tunnel during development and, in production, to add your own domain to the Ory project, so your app and Ory share a domain. Locally that's ory tunnel --project <your-project> http://localhost:3000, which listens on http://localhost:4000. Set NEXT_PUBLIC_ORY_SDK_URL to that URL locally and to your custom domain in production. Also enter your /login page as the login UI URL in the Ory Console (console.ory.sh/projects/current/ui), so a flow that starts on Ory's side comes back to it with ?flow=<id>.
Pull-Cord draws its own email and password inputs, so the flow's nodes aren't rendered one by one. The code reads the one hidden node it needs (csrf_token) and builds the password body itself. If your identity schema adds fields to the login form, they won't appear.
Pull-Cord checks the email field with a simple email pattern before it calls onSubmit. If your Ory identity schema signs people in with a username, the card will reject it; use the plain form for those users or change EMAIL_RE in the piece.
What this page doesn't cover: registration, account recovery, email verification, settings, two-factor (aal2) and social sign-in each have their own Ory flow. Here the "Create one" link and "Forgot password?" send the browser to Ory's registration and recovery flows, so those screens stay on Ory unless you build them too. Passkeys and one-time-code login aren't wired. The "Remember me" box is drawn but doesn't change the Ory session; session length is a project setting.
When Ory Elements fits better: if you need every flow (sign-up, recovery, MFA, social buttons) on your own domain soon, @ory/elements-react renders all of them from the flow nodes and is themeable. Pull-Cord gives you one animated sign-in screen; Elements gives you the full set.
Package facts, checked October 26, 2026: @ory/client 1.22.66 (July 28, 2026) had 78,444 npm downloads in the week to October 22. @ory/elements-react 1.2.1 accepts React 18 or 19.
Type-checked on October 26, 2026 against @ory/client 1.22.66, react 19.1.10 and framer-motion 11.18.2 with TypeScript 5.9.3, using the shipped Pull-Cord Login source. We didn't run it against a live Ory project.

The page loads: if Ory sent the browser here with ?flow=<id>, the code fetches that flow; otherwise it calls createBrowserLoginFlow. Ory sets a CSRF cookie and returns the flow with a csrf_token node.
The user signs in: onSubmit posts method "password", the identifier, the password and that csrf_token to updateLoginFlow. The browser sends the CSRF cookie along because withCredentials is on.
Wrong password: Ory answers 400 with the same flow and an error message on it. The code shows that message as the card's subtitle and throws, so the card shakes and the button resets.
Flow expired (410): the code starts a new flow and asks the user to sign in again.
Success: Ory sets the session cookie. A full page load sends the user to return_to, or /dashboard.
We wrote this from Ory's documentation and type-checked it; we didn't run it against a live Ory project, so the 400 and 410 answers are as Ory documents them.

Ory flow fields mapped to Pull-Cord Login

identifier node: Pull-Cord's email field.
password node: Pull-Cord's password field.
csrf_token node: read from the flow and sent with every submit; never shown.
flow.ui.messages and node messages: the card's subtitle (and the alert above the phone form).
Recovery and registration links: forgotHref and onFooterAction, pointed at Ory's browser endpoints.
Social sign-in buttons, passkeys, code login: no match on the card.

Pull-cord login form: the piece on its own

Pull-Cord Login on Tailwind v4

The Pull-Cord download is set up with Tailwind CSS 3.4 and a tailwind.config.js. In a Next.js app on Tailwind v4 its classes compile as they are, because they're stock utilities and arbitrary values.
One thing doesn't carry over: Tailwind v4 doesn't read tailwind.config.js unless you point it there with @config, so the piece's font setting is ignored and its inputs (which use font-sans) fall back to Tailwind's default sans stack. The rule below fixes that and only touches the lamp room.

app/globals.css (one rule for the lamp room)

/* 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;
}

Install

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

Props

onSubmit: (email, password) → updateLoginFlow; throw to shake the card
subtitle: Ory's error message, or your normal line
defaultOn: start with the lamp on, so the form shows without a pull
forgotHref: Ory's recovery flow
onFooterAction: Ory's registration flow
accent: bead, focus ring and 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.

From the blog: Accessible Login Form in React: Labels, Errors, Motion

Questions

Can I build a custom login page with Ory Kratos?

Yes. Ory supports bringing your own UI: you create a login flow, show its fields, and submit them with the flow's CSRF token. Ory still checks the password and sets the session.

Why do I get CORS or CSRF errors locally?

Your app and Ory are on different domains. Run Ory Tunnel during development and use a custom domain on your Ory project in production, so cookies are shared.

Do I need Ory Elements?

No. Elements is Ory's ready-made React UI for every flow. You only need @ory/client for a single custom sign-in screen like this one.

Does this handle sign-up and password reset?

No. Those are separate Ory flows. The links on the card send people to them, and they stay on Ory's screens until you build those pages.

Does it support MFA or social login?

Not on the card. Two-factor and social sign-in need their own flow handling or Ory Elements.

Does it work with self-hosted Kratos?

The SDK calls are the same. Point NEXT_PUBLIC_ORY_SDK_URL at your Kratos public URL on a domain that shares cookies with your app. We didn't test against a self-hosted instance.

Does Pull-Cord Login work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

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.

An Ory Kratos custom login page in Next.js

Use it in Next.js

Good to know

The browser login flow, step by step

Ory flow fields mapped to Pull-Cord Login

Pull-Cord Login on Tailwind v4

Install

Props

How qodesign compares

Questions

Use it in Next.js

Good to know

The browser login flow, step by step

Ory flow fields mapped to Pull-Cord Login

Pull-Cord Login on Tailwind v4

Install

Props

How qodesign compares

Questions