+ )
+}
diff --git a/src/app/login/components/custom-message.tsx b/src/app/login/components/custom-message.tsx
new file mode 100644
index 000000000..ee79eab59
--- /dev/null
+++ b/src/app/login/components/custom-message.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import type { OryMessageContentProps } from '@ory/elements-react'
+import type { PropsWithChildren } from 'react'
+import { cn } from '@/lib/utils'
+
+export function OryMessageRoot({ children }: PropsWithChildren) {
+ return
{children}
+}
+
+export function OryMessageContent({ message }: OryMessageContentProps) {
+ return (
+
+ {message.text}
+
+ )
+}
diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
new file mode 100644
index 000000000..86c8752c1
--- /dev/null
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import type { OryNodeSsoButtonProps } from '@ory/elements-react'
+import type { ComponentType, SVGProps } from 'react'
+import { Google } from '@/components/ui/svgs/google'
+import { Button } from '@/ui/primitives/button'
+
+const PROVIDERS: Record<
+ string,
+ { label: string; Logo: ComponentType> }
+> = {
+ google: { label: 'Continue with Google', Logo: Google },
+}
+
+// Ory's `provider` prop is the label *context* (a display name like "Google"),
+// not a stable id — the id is on `node.attributes.value`. Match leniently across
+// id, prop, and label text so casing / naming can't cause a miss.
+function resolveProvider({
+ node,
+ provider,
+}: Pick) {
+ const haystack = [
+ typeof node.attributes.value === 'string' ? node.attributes.value : '',
+ provider,
+ node.meta?.label?.text ?? '',
+ ]
+ .join(' ')
+ .toLowerCase()
+
+ if (haystack.includes('google')) return PROVIDERS.google
+ return undefined
+}
+
+export function OrySsoButton({
+ node,
+ provider,
+ buttonProps,
+ isSubmitting,
+}: OryNodeSsoButtonProps) {
+ const known = resolveProvider({ node, provider })
+ const label = known?.label ?? node.meta?.label?.text
+ const Logo = known?.Logo
+
+ return (
+
+ )
+}
diff --git a/src/app/login/components/index.ts b/src/app/login/components/index.ts
new file mode 100644
index 000000000..143422c56
--- /dev/null
+++ b/src/app/login/components/index.ts
@@ -0,0 +1,32 @@
+import type { OryFlowComponentOverrides } from '@ory/elements-react'
+import { OryButton } from './custom-button'
+import { OryCard, OryCardFooter } from './custom-card'
+import { OryCardHeader } from './custom-card-header'
+import { OryDivider } from './custom-divider'
+import { OryFormGroup } from './custom-form-group'
+import { OryInput } from './custom-input'
+import { OryLabel } from './custom-label'
+import { OryMessageContent, OryMessageRoot } from './custom-message'
+import { OrySsoButton } from './custom-sso-button'
+
+export const oryComponents: OryFlowComponentOverrides = {
+ Node: {
+ Button: OryButton,
+ SsoButton: OrySsoButton,
+ Input: OryInput,
+ Label: OryLabel,
+ },
+ Card: {
+ Root: OryCard,
+ Header: OryCardHeader,
+ Footer: OryCardFooter,
+ Divider: OryDivider,
+ },
+ Form: {
+ Group: OryFormGroup,
+ },
+ Message: {
+ Root: OryMessageRoot,
+ Content: OryMessageContent,
+ },
+}
diff --git a/src/app/login/layout.tsx b/src/app/login/layout.tsx
new file mode 100644
index 000000000..5152fa924
--- /dev/null
+++ b/src/app/login/layout.tsx
@@ -0,0 +1,50 @@
+import { ALLOW_SEO_INDEXING } from '@/configs/flags'
+import { METADATA } from '@/configs/metadata'
+import { cn } from '@/lib/utils'
+import { GridPattern } from '@/ui/grid-pattern'
+
+// Dedicated layout for the custom Ory login page. Mirrors the (auth) group's
+// background/centering, but omits its inner card wrapper: @ory/elements-react's
+// renders its own self-contained card, so wrapping it again would
+// double the border and overflow the narrow container.
+//
+// This route lives outside the (auth) group on purpose. A literal `auth/`
+// folder cannot coexist with the (auth) group's internal `auth/` segment (used
+// by /auth/cli) — Next.js rejects it as two parallel pages on the same path —
+// so the custom login UI is served at the top-level /login instead.
+export const metadata = {
+ title: METADATA.title,
+ description: METADATA.description,
+ openGraph: METADATA.openGraph,
+ twitter: METADATA.twitter,
+ robots: ALLOW_SEO_INDEXING ? 'index, follow' : 'noindex, nofollow',
+}
+
+export default function OryLoginLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+
{children}
+
+
+ )
+}
diff --git a/src/app/login/login-card.tsx b/src/app/login/login-card.tsx
new file mode 100644
index 000000000..8f654bd84
--- /dev/null
+++ b/src/app/login/login-card.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Login } from '@ory/elements-react/theme'
+import type { ComponentProps } from 'react'
+import { oryComponents } from './components'
+
+// Overrides are functions, so they're applied client-side here, not in the
+// server page. Prop types come from itself: two @ory/client-fetch
+// copies are installed, so naming the LoginFlow type directly would mismatch.
+type LoginProps = ComponentProps
+
+export function LoginCard({
+ flow,
+ config,
+}: Pick) {
+ return
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 000000000..afd54708c
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,50 @@
+import { getLoginFlow, type OryPageParams } from '@ory/nextjs/app'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { isOryCustomUiEnabled } from '@/configs/flags'
+import oryConfig from '@/configs/ory'
+import { AUTH_URLS } from '@/configs/urls'
+import { LoginCard } from './login-card'
+
+// Custom login page rendered with @ory/elements-react. This is the URL both
+// Hydra (`urls.login`) and Kratos (`flows.login.ui_url`) bounce the browser to
+// in the harness — see devenv/configs/{hydra,kratos} in the harness repo.
+//
+// `getLoginFlow` handles both legs of the OAuth2 login sequence:
+// - arriving with `?login_challenge=...` (from Hydra): it forwards the
+// challenge to Kratos to create a browser login flow, which redirects back
+// here with `?flow=...`.
+// - arriving with `?flow=...` (from Kratos): it fetches the flow and rewrites
+// the Kratos action URLs onto this origin so the form posts through the
+// proxy wired in src/proxy.ts.
+export default async function OryLoginPage(props: OryPageParams) {
+ // The custom Elements UI is staging/preview-only; production uses Ory's
+ // existing flow via /sign-in.
+ if (!isOryCustomUiEnabled()) {
+ redirect(AUTH_URLS.SIGN_IN)
+ }
+
+ const flow = await getLoginFlow(oryConfig, props.searchParams)
+
+ // getLoginFlow redirects (to create or restart a flow) in the cases above; a
+ // null return only happens on an unrecoverable error, where it has already
+ // pointed the browser at the error UI.
+ if (!flow) {
+ return null
+ }
+
+ // The Elements client builds its SDK base path from `config.sdk.url`, so it
+ // must be this request's own origin: the browser then submits to
+ // /self-service/* on our domain, which the proxy in src/proxy.ts forwards to
+ // Kratos. Pointing it at Kratos directly triggers a cross-origin credentialed
+ // request that Kratos' wildcard CORS rejects. Mirrors @ory/nextjs's own
+ // getPublicUrl() (host header + x-forwarded-proto).
+ const requestHeaders = await headers()
+ const host = requestHeaders.get('host')
+ const proto = requestHeaders.get('x-forwarded-proto') ?? 'http'
+ const config = host
+ ? { ...oryConfig, sdk: { ...oryConfig.sdk, url: `${proto}://${host}` } }
+ : oryConfig
+
+ return
+}
diff --git a/src/app/registration/layout.tsx b/src/app/registration/layout.tsx
new file mode 100644
index 000000000..d17ec420f
--- /dev/null
+++ b/src/app/registration/layout.tsx
@@ -0,0 +1,42 @@
+import { ALLOW_SEO_INDEXING } from '@/configs/flags'
+import { METADATA } from '@/configs/metadata'
+import { cn } from '@/lib/utils'
+import { GridPattern } from '@/ui/grid-pattern'
+
+// Top-level /registration because the legacy (auth) group already owns /sign-up.
+export const metadata = {
+ title: METADATA.title,
+ description: METADATA.description,
+ openGraph: METADATA.openGraph,
+ twitter: METADATA.twitter,
+ robots: ALLOW_SEO_INDEXING ? 'index, follow' : 'noindex, nofollow',
+}
+
+export default function OryRegistrationLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+
{children}
+
+
+ )
+}
diff --git a/src/app/registration/page.tsx b/src/app/registration/page.tsx
new file mode 100644
index 000000000..c336c7472
--- /dev/null
+++ b/src/app/registration/page.tsx
@@ -0,0 +1,31 @@
+import { getRegistrationFlow, type OryPageParams } from '@ory/nextjs/app'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { isOryCustomUiEnabled } from '@/configs/flags'
+import oryConfig from '@/configs/ory'
+import { AUTH_URLS } from '@/configs/urls'
+import { RegistrationCard } from './registration-card'
+
+// Mirrors /login (see src/app/login/page.tsx for the flow-fetch and sdk.url reasoning).
+export default async function OryRegistrationPage(props: OryPageParams) {
+ // The custom Elements UI is staging/preview-only; production uses Ory's
+ // existing flow via /sign-up.
+ if (!isOryCustomUiEnabled()) {
+ redirect(AUTH_URLS.SIGN_UP)
+ }
+
+ const flow = await getRegistrationFlow(oryConfig, props.searchParams)
+
+ if (!flow) {
+ return null
+ }
+
+ const requestHeaders = await headers()
+ const host = requestHeaders.get('host')
+ const proto = requestHeaders.get('x-forwarded-proto') ?? 'http'
+ const config = host
+ ? { ...oryConfig, sdk: { ...oryConfig.sdk, url: `${proto}://${host}` } }
+ : oryConfig
+
+ return
+}
diff --git a/src/app/registration/registration-card.tsx b/src/app/registration/registration-card.tsx
new file mode 100644
index 000000000..a2ef9fc96
--- /dev/null
+++ b/src/app/registration/registration-card.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { Registration } from '@ory/elements-react/theme'
+import type { ComponentProps } from 'react'
+import { oryComponents } from '@/app/login/components'
+
+type RegistrationProps = ComponentProps
+
+export function RegistrationCard({
+ flow,
+ config,
+}: Pick) {
+ return
+}
diff --git a/src/components/ui/svgs/githubDark.tsx b/src/components/ui/svgs/githubDark.tsx
new file mode 100644
index 000000000..220ef1935
--- /dev/null
+++ b/src/components/ui/svgs/githubDark.tsx
@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react'
+
+const GithubDark = (props: SVGProps) => (
+
+)
+
+export { GithubDark }
diff --git a/src/components/ui/svgs/githubLight.tsx b/src/components/ui/svgs/githubLight.tsx
new file mode 100644
index 000000000..0ecf0be2a
--- /dev/null
+++ b/src/components/ui/svgs/githubLight.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+const GithubLight = (props: SVGProps) => (
+
+)
+
+export { GithubLight }
diff --git a/src/components/ui/svgs/google.tsx b/src/components/ui/svgs/google.tsx
new file mode 100644
index 000000000..f142b91bd
--- /dev/null
+++ b/src/components/ui/svgs/google.tsx
@@ -0,0 +1,243 @@
+import type { SVGProps } from 'react'
+
+const Google = (props: SVGProps) => (
+
+)
+
+export { Google }
diff --git a/src/configs/flags.ts b/src/configs/flags.ts
index e9cbf269a..a15386270 100644
--- a/src/configs/flags.ts
+++ b/src/configs/flags.ts
@@ -30,6 +30,17 @@ export function isOryAuthEnabled() {
return process.env.AUTH_PROVIDER === 'ory'
}
+// The custom @ory/elements-react login/registration UI is opt-in via an explicit
+// flag, set in non-production environments (staging/preview) and by the local
+// dev harness. Production leaves it unset and keeps Ory auth on its existing
+// /sign-in flow. A NEXT_PUBLIC_ flag is used (rather than VERCEL_ENV) because it
+// is read in Edge middleware: VERCEL_ENV/AUTH_PROVIDER get inlined at build time,
+// so in a standalone/self-hosted build (anything but `next dev`) they resolve to
+// undefined and the gate would silently disable the proxy.
+export function isOryCustomUiEnabled() {
+ return isOryAuthEnabled() && process.env.NEXT_PUBLIC_ORY_CUSTOM_UI === '1'
+}
+
// Freezes interactive auth entry points while we migrate identity stores.
// When on: blocks sign-ups and sign-ins so OAuth callback URLs can move
// between providers without sending users into broken provider flows.
diff --git a/src/configs/ory.ts b/src/configs/ory.ts
new file mode 100644
index 000000000..ab9380221
--- /dev/null
+++ b/src/configs/ory.ts
@@ -0,0 +1,41 @@
+import type { OryClientConfiguration } from '@ory/elements-react'
+import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
+
+// Configuration for the custom Ory self-service UI rendered with
+// @ory/elements-react. The dashboard serves the login (/login) and registration
+// (/registration) flows; the remaining self-service flows (recovery, verification,
+// settings) stay on the Ory/Kratos hosted UI, so those *_ui_url values are only
+// used for the in-card links and are left disabled/hidden here.
+//
+// NOTE on `sdk.url`: the Elements client builds its SDK base path from this
+// value (`sdk.url + "/self-service/..."`). It MUST be the app's own origin so
+// those browser calls stay same-origin and flow through the proxy in
+// src/proxy.ts — pointing it straight at Kratos makes the browser call Kratos
+// cross-origin, which Kratos' wildcard CORS rejects for credentialed requests.
+// The real per-request origin is injected in src/app/login/page.tsx; the
+// env-derived value here is only a server-side fallback. @ory/nextjs reads
+// NEXT_PUBLIC_ORY_SDK_URL directly (not this config) for its server-side flow
+// fetch and as the proxy's upstream Kratos target.
+const oryConfig: OryClientConfiguration = {
+ sdk: {
+ url: process.env.NEXT_PUBLIC_ORY_SDK_URL,
+ },
+ project: {
+ name: 'E2B',
+ hide_ory_branding: true,
+ default_redirect_url: PROTECTED_URLS.DASHBOARD,
+ error_ui_url: AUTH_URLS.SIGN_IN,
+ login_ui_url: '/login',
+ registration_enabled: true,
+ registration_ui_url: '/registration',
+ // Remaining flows are not yet rendered with Elements — hide their in-card
+ // links. Flip these on as those flows are migrated.
+ recovery_enabled: false,
+ recovery_ui_url: AUTH_URLS.FORGOT_PASSWORD,
+ verification_enabled: false,
+ verification_ui_url: AUTH_URLS.SIGN_IN,
+ settings_ui_url: PROTECTED_URLS.ACCOUNT_SETTINGS,
+ },
+}
+
+export default oryConfig
diff --git a/src/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index 39b611c52..48712046b 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -2,10 +2,30 @@
import { useSearchParams } from 'next/navigation'
import { useAction } from 'next-safe-action/hooks'
+import { GithubDark } from '@/components/ui/svgs/githubDark'
+import { GithubLight } from '@/components/ui/svgs/githubLight'
+import { Google } from '@/components/ui/svgs/google'
import { AUTH_MIGRATION_IN_PROGRESS } from '@/configs/flags'
import { signInWithOAuthAction } from '@/core/server/actions/auth-actions'
import { Button } from '@/ui/primitives/button'
+function GitHubLogo() {
+ return (
+ <>
+
+
+
+ )
+}
+
export function OAuthProviders() {
const searchParams = useSearchParams()
const returnTo = searchParams.get('returnTo')
@@ -28,29 +48,7 @@ export function OAuthProviders() {
: undefined
}
>
-
+
Continue with Google
@@ -67,17 +65,7 @@ export function OAuthProviders() {
: undefined
}
>
-
+
Continue with GitHub
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 971cc9b85..3405fec9e 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -82,6 +82,16 @@ export const clientSchema = z.object({
NEXT_PUBLIC_INFRA_API_URL: z.url().optional(),
NEXT_PUBLIC_E2B_SANDBOX_URL: z.url().optional(),
NEXT_PUBLIC_DASHBOARD_API_URL: z.url().optional(),
+
+ // Browser-facing Kratos public URL for the custom @ory/elements-react login
+ // page. Read by @ory/nextjs and src/configs/ory.ts. Required when
+ // AUTH_PROVIDER=ory; unused otherwise.
+ NEXT_PUBLIC_ORY_SDK_URL: z.url().optional(),
+
+ // Opt-in flag ("1") for the custom @ory/elements-react login/registration UI.
+ // Set in non-production envs and by the local harness; unset in production
+ // (which keeps the existing /sign-in flow). See isOryCustomUiEnabled().
+ NEXT_PUBLIC_ORY_CUSTOM_UI: z.string().optional(),
})
const merged = serverSchema.extend(clientSchema.shape)
diff --git a/src/proxy.ts b/src/proxy.ts
index c8551473a..42d68287c 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,10 +1,12 @@
+import { createOryMiddleware } from '@ory/nextjs/middleware'
import {
type NextFetchEvent,
type NextRequest,
NextResponse,
} from 'next/server'
import { auth as authjsMiddleware } from '@/auth'
-import { isOryAuthEnabled } from './configs/flags'
+import { isOryAuthEnabled, isOryCustomUiEnabled } from './configs/flags'
+import oryConfig from './configs/ory'
import { getOryAuthRouteRedirect } from './core/server/auth/ory/auth-route-redirect'
import { isOrySessionAuthenticated } from './core/server/auth/ory/authjs-session-boundary'
import {
@@ -90,9 +92,45 @@ function proxyWithOryAuth(
return proxyWithAuth(request, event)
}
+// Path prefixes the @ory/nextjs proxy forwards to the Ory SDK (Kratos public,
+// from NEXT_PUBLIC_ORY_SDK_URL). The custom login UI's flow creation and form
+// submit go through these same-origin paths so Kratos cookies stay first-party;
+// see src/configs/ory.ts and src/app/login/page.tsx. Mirrors the
+// match list inside createOryMiddleware.
+const ORY_SDK_PROXY_PREFIXES = [
+ '/self-service',
+ '/sessions/whoami',
+ '/ui',
+ '/.well-known/ory',
+ '/.ory',
+]
+
+// Created once; the returned closure reads NEXT_PUBLIC_ORY_SDK_URL lazily at
+// request time, so this is inert in Supabase mode where the var is unset.
+//
+// Pass the same `project` config as @ory/elements-react: the middleware's
+// rewriteUrls() uses its built-in Ory-path↔ui_url table to rewrite Kratos
+// redirect Location headers / response bodies (e.g. /login, /registration) onto
+// our own UI URLs. Without it those rewrites are no-ops.
+const oryProxy = createOryMiddleware({ project: oryConfig.project })
+
+function isOrySdkProxyPath(pathname: string): boolean {
+ return ORY_SDK_PROXY_PREFIXES.some((prefix) => pathname.startsWith(prefix))
+}
+
export async function proxy(request: NextRequest, event: NextFetchEvent) {
const plan = classifyProxyRequest(request.nextUrl.pathname)
+ // Ory SDK traffic (/self-service, /sessions/whoami, …) must be forwarded to
+ // Kratos before anything else. These paths classify as public
+ // (needsOryAuthJsSession: false), so the bypass below would otherwise send
+ // them to proxyCore/Next instead of Kratos — breaking the custom UI's flow
+ // creation and form submits. Only the custom Elements UI needs this
+ // same-origin proxy (gated, so production is unaffected).
+ if (isOryCustomUiEnabled() && isOrySdkProxyPath(request.nextUrl.pathname)) {
+ return oryProxy(request)
+ }
+
if (!isOryAuthEnabled() || !plan.needsOryAuthJsSession) {
return proxyCore(request, plan)
}
diff --git a/tests/integration/proxy.test.ts b/tests/integration/proxy.test.ts
index b2aa612d8..f8eaac7a5 100644
--- a/tests/integration/proxy.test.ts
+++ b/tests/integration/proxy.test.ts
@@ -87,6 +87,15 @@ vi.mock('next/server', async () => {
}
})
+// mock the @ory/nextjs SDK proxy so we can assert when /self-service traffic is
+// forwarded to Kratos
+const { oryProxyFn } = vi.hoisted(() => ({
+ oryProxyFn: vi.fn(() => new Response('kratos', { status: 200 })),
+}))
+vi.mock('@ory/nextjs/middleware', () => ({
+ createOryMiddleware: vi.fn(() => oryProxyFn),
+}))
+
function createMockRequest({
url = 'https://app.e2b.dev',
path = '/',
@@ -313,4 +322,34 @@ describe('Proxy Integration Tests', () => {
)
})
})
+
+ describe('Ory SDK proxy ordering', () => {
+ const originalAuthProvider = process.env.AUTH_PROVIDER
+ const originalCustomUi = process.env.NEXT_PUBLIC_ORY_CUSTOM_UI
+
+ afterEach(() => {
+ process.env.AUTH_PROVIDER = originalAuthProvider
+ process.env.NEXT_PUBLIC_ORY_CUSTOM_UI = originalCustomUi
+ })
+
+ it('forwards /self-service/* to Kratos when the custom UI is enabled', async () => {
+ process.env.AUTH_PROVIDER = 'ory'
+ process.env.NEXT_PUBLIC_ORY_CUSTOM_UI = '1'
+
+ // /self-service classifies as public (needsOryAuthJsSession: false), so it
+ // only reaches Kratos if the SDK branch runs before that bypass.
+ await proxy(createMockRequest({ path: '/self-service/login/browser' }))
+
+ expect(oryProxyFn).toHaveBeenCalledTimes(1)
+ })
+
+ it('does not forward /self-service/* when the custom UI is disabled', async () => {
+ process.env.AUTH_PROVIDER = 'ory'
+ delete process.env.NEXT_PUBLIC_ORY_CUSTOM_UI
+
+ await proxy(createMockRequest({ path: '/self-service/login/browser' }))
+
+ expect(oryProxyFn).not.toHaveBeenCalled()
+ })
+ })
})
diff --git a/vitest.config.ts b/vitest.config.ts
index dd019ff26..b64effb9e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -17,10 +17,10 @@ export default defineConfig({
setupFiles: ['./tests/setup.ts'],
server: {
deps: {
- // next-auth ships ESM that imports 'next/server' without the .js extension
- // which vitest's default resolver cannot follow. inlining lets vite's
- // bundler resolve next.js exports correctly.
- inline: [/next-auth/, /@auth\/core/],
+ // next-auth and @ory/nextjs ship ESM that imports 'next/server' without
+ // the .js extension which vitest's default resolver cannot follow.
+ // inlining lets vite's bundler resolve next.js exports correctly.
+ inline: [/next-auth/, /@auth\/core/, /@ory\/nextjs/],
},
},
},