feat(auth): custom Ory Elements login UI by huv1k · Pull Request #380 · e2b-dev/dashboard

huv1k · 2026-06-10T12:35:54Z

Replace the stock Kratos self-service UI for the login flow with a custom @ory/elements-react page at /login, styled with the dashboard's own design system (no Ory default theme CSS).

Gating (opt-in flag)

The custom Elements UI is gated behind isOryCustomUiEnabled() in src/configs/flags.ts:

isOryCustomUiEnabled() = isOryAuthEnabled() && process.env.NEXT_PUBLIC_ORY_CUSTOM_UI === '1'

Ory auth itself is unchanged in production — only the new custom UI is gated off there. The gate lives in two places:

src/proxy.ts — the Ory-SDK same-origin short-circuit only runs when the flag is on (production proxy behaves exactly as before).
/login and /registration pages — when the flag is off, they redirect() to the existing /sign-in / /sign-up flow instead of rendering the custom card.

The custom UI activates wherever AUTH_PROVIDER=ory and NEXT_PUBLIC_ORY_CUSTOM_UI=1 (set in staging/preview and by the local dev harness); production leaves the flag unset and keeps Ory's existing login.

Why an explicit NEXT_PUBLIC_ flag instead of VERCEL_ENV: isOryCustomUiEnabled() runs in Edge middleware, where non-public env vars like VERCEL_ENV/AUTH_PROVIDER are inlined at build time and resolve to undefined in standalone/self-hosted builds (anything but next dev) — which would silently disable the same-origin proxy. A NEXT_PUBLIC_ flag is read at request time in middleware, server, and client alike.

Login

Before	After

Register

Before	After

add @ory/elements-react + @ory/nextjs deps
src/configs/ory.ts: OryClientConfiguration (login-only scope)
src/app/login: server page (getLoginFlow + per-request sdk.url = own origin), client wrapper, layout, and component overrides for card/header/ input/button/label/sso/form-group/message
src/proxy.ts: wire @ory/nextjs createOryMiddleware so /self-service etc. proxy to Kratos same-origin (first-party cookies, no CORS)
gate custom UI on NEXT_PUBLIC_ORY_CUSTOM_UI (was VERCEL_ENV)
env: NEXT_PUBLIC_ORY_SDK_URL (browser-facing Kratos public URL); NEXT_PUBLIC_ORY_CUSTOM_UI=1 to enable the custom UI

Replace the stock Kratos self-service UI for the login flow with a custom @ory/elements-react page at /login, styled with the dashboard's own design system (no Ory default theme CSS). - add @ory/elements-react + @ory/nextjs deps - src/configs/ory.ts: OryClientConfiguration (login-only scope) - src/app/login: server page (getLoginFlow + per-request sdk.url = own origin), client <Login> wrapper, layout, and component overrides for card/header/ input/button/label/sso/form-group/message - src/proxy.ts: wire @ory/nextjs createOryMiddleware so /self-service etc. proxy to Kratos same-origin (first-party cookies, no CORS) - env: NEXT_PUBLIC_ORY_SDK_URL (browser-facing Kratos public URL)

vercel · 2026-06-10T12:36:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web	Error		Jun 11, 2026 2:28pm
web-juliett	Error		Jun 11, 2026 2:28pm

@svgl

- Add svgl Google/GitHub logos via shadcn registry (@svgl) - Show provider logo + 'Continue with …' on Ory SSO buttons - GitHub logo toggles light/dark variants via Tailwind dark: variant - Replace bare login divider with an 'or' separator

- Resolve provider via node.attributes.value (stable id) so the logo + 'Continue with …' label render (the provider prop is a display label) - Remove logos/index.ts barrel in favor of direct imports

- Add /register route (page, layout, card) mirroring /login, using @ory/elements-react <Registration> + getRegistrationFlow - Make shared card header/footer/submit-button flow-aware (Sign in vs Sign up; registration footer shows sign-in link + legal copy) - Enable registration in ory config, point registration_ui_url at /register

- Add 'Don't have an account? Sign up' footer to the login card (-> /register) - Move GitHubLogo into oauth-provider-buttons and drop the shared logos/github-logo.tsx; remove GitHub from the Ory SSO provider map

Rename /register route to /registration and update registration_ui_url and the login footer 'Sign up' link to match.

…n-flows # Conflicts: # src/proxy.ts

@svgl

…to Ory proxy - Drop logos/google-logo.tsx wrapper; oauth-provider-buttons and the Ory SSO button now use the @svgl Google icon directly with sizing - Pass oryConfig.project to createOryMiddleware so Kratos redirect/body URLs are rewritten onto our /login and /registration UIs

- Add isOryCustomUiEnabled() (Ory enabled && VERCEL_ENV !== production) - Gate the proxy Ory-SDK short-circuit and the /login + /registration pages on it; production keeps Ory auth on but uses its existing flow - Drop redundant component-label comments, keeping only core why-notes

proxy.ts now imports createOryMiddleware (@ory/nextjs/middleware), whose ESM bare-imports 'next/server'; inline it like next-auth so vitest resolves Next's exports. Fixes proxy.test.ts and auth-ory-entrypoints.test.ts.

Replace the VERCEL_ENV-based gate with an explicit NEXT_PUBLIC_ORY_CUSTOM_UI flag. isOryCustomUiEnabled() is read in Edge middleware, where VERCEL_ENV/AUTH_PROVIDER are inlined at build time and resolve to undefined in standalone/self-hosted builds (anything but `next dev`) — silently disabling the same-origin Ory proxy. A NEXT_PUBLIC_ flag is readable at request time everywhere and lets the local harness opt in explicitly while production leaves it unset (keeping /sign-in).

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 16c3e0b9bb

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-11T13:13:20Z

+  if (isOryCustomUiEnabled() && isOrySdkProxyPath(request.nextUrl.pathname)) {
+    return oryProxy(request)


Move the Ory proxy check before the public-route bypass

When the custom UI submits or creates flows under /self-service/..., classifyProxyRequest marks those paths as public with needsOryAuthJsSession: false (checked in src/core/server/http/proxy-plan.ts), so the earlier return proxyCore(request, plan) runs before this new Ory proxy branch is reached. In the staging/preview custom-UI context, requests like /self-service/login/browser therefore fall through to Next instead of being forwarded to Kratos, breaking login/registration flow creation and form submission; this branch needs to run before the !plan.needsOryAuthJsSession bypass.

Useful? React with 👍 / 👎.

…pass /self-service/* classifies as public (needsOryAuthJsSession: false), so the short-circuit ran too late and those requests fell through to Next, breaking custom-UI flow creation and form submits. Move the gated Ory-SDK proxy branch to the top of proxy(). Add a regression test covering both enabled/disabled.

cla-bot Bot added the cla-signed label Jun 10, 2026

style: apply biome formatting

cf6fbf3

vercel Bot deployed to Preview – web June 10, 2026 12:38 View deployment

vercel Bot deployed to Preview – web June 10, 2026 13:32 View deployment

fix(auth): match SSO provider by node value; drop logos barrel

e82a192

- Resolve provider via node.attributes.value (stable id) so the logo + 'Continue with …' label render (the provider prop is a display label) - Remove logos/index.ts barrel in favor of direct imports

vercel Bot deployed to Preview – web June 10, 2026 13:39 View deployment

vercel Bot deployed to Preview – web June 10, 2026 14:11 View deployment

huv1k added 2 commits June 10, 2026 16:26

feat(auth): login 'Sign up' footer link; inline GitHub logo

481d6a7

- Add 'Don't have an account? Sign up' footer to the login card (-> /register) - Move GitHubLogo into oauth-provider-buttons and drop the shared logos/github-logo.tsx; remove GitHub from the Ory SSO provider map

chore: trigger CI rebuild

28d5877

vercel Bot deployed to Preview – web June 10, 2026 14:49 View deployment

refactor(auth): serve registration page at /registration

4a6ae94

Rename /register route to /registration and update registration_ui_url and the login footer 'Sign up' link to match.

vercel Bot deployed to Preview – web June 10, 2026 15:25 View deployment

Merge remote-tracking branch 'origin/main' into huv1k/ory-custom-logi…

2150c34

…n-flows # Conflicts: # src/proxy.ts

vercel Bot deployed to Preview – web June 11, 2026 08:04 View deployment

vercel Bot deployed to Preview – web June 11, 2026 08:26 View deployment

vercel Bot deployed to Preview – web June 11, 2026 10:48 View deployment

vercel Bot deployed to Preview – web June 11, 2026 11:02 View deployment

vercel Bot deployed to Preview – web June 11, 2026 12:20 View deployment

huv1k marked this pull request as ready for review June 11, 2026 13:10

huv1k requested review from ben-fornefeld and drankou as code owners June 11, 2026 13:10

chatgpt-codex-connector Bot reviewed Jun 11, 2026

View reviewed changes

drankou approved these changes Jun 11, 2026

View reviewed changes

vercel Bot deployed to Preview – web June 11, 2026 13:48 View deployment

huv1k merged commit a930d4f into main Jun 11, 2026
13 checks passed

huv1k deleted the huv1k/ory-custom-login-flows branch June 11, 2026 13:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(auth): custom Ory Elements login UI#380

feat(auth): custom Ory Elements login UI#380
huv1k merged 14 commits into
mainfrom
huv1k/ory-custom-login-flows

huv1k commented Jun 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Jun 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		if (isOryCustomUiEnabled() && isOrySdkProxyPath(request.nextUrl.pathname)) {
		return oryProxy(request)

Uh oh!

Conversation

huv1k commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Gating (opt-in flag)

Login

Register

Uh oh!

vercel Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

huv1k commented Jun 10, 2026 •

edited

Loading

vercel Bot commented Jun 10, 2026 •

edited

Loading