From dd934ba029b558e654a52f42872830a94eb8eca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 14:23:59 +0200
Subject: [PATCH 01/13] feat(auth): custom Ory Elements login 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)
---
 .env.example                                  |   4 +
 bun.lock                                      | 112 +++++++++++++++++-
 package.json                                  |   2 +
 src/app/login/components/custom-button.tsx    |  20 ++++
 .../login/components/custom-card-header.tsx   |   8 ++
 src/app/login/components/custom-card.tsx      |  19 +++
 .../login/components/custom-form-group.tsx    |   9 ++
 src/app/login/components/custom-input.tsx     |  20 ++++
 src/app/login/components/custom-label.tsx     |  41 +++++++
 src/app/login/components/custom-message.tsx   |  26 ++++
 .../login/components/custom-sso-button.tsx    |  25 ++++
 src/app/login/components/index.ts             |  33 ++++++
 src/app/login/layout.tsx                      |  50 ++++++++
 src/app/login/login-card.tsx                  |  21 ++++
 src/app/login/page.tsx                        |  41 +++++++
 src/configs/ory.ts                            |  42 +++++++
 src/lib/env.ts                                |   5 +
 src/proxy.ts                                  |  28 +++++
 18 files changed, 505 insertions(+), 1 deletion(-)
 create mode 100644 src/app/login/components/custom-button.tsx
 create mode 100644 src/app/login/components/custom-card-header.tsx
 create mode 100644 src/app/login/components/custom-card.tsx
 create mode 100644 src/app/login/components/custom-form-group.tsx
 create mode 100644 src/app/login/components/custom-input.tsx
 create mode 100644 src/app/login/components/custom-label.tsx
 create mode 100644 src/app/login/components/custom-message.tsx
 create mode 100644 src/app/login/components/custom-sso-button.tsx
 create mode 100644 src/app/login/components/index.ts
 create mode 100644 src/app/login/layout.tsx
 create mode 100644 src/app/login/login-card.tsx
 create mode 100644 src/app/login/page.tsx
 create mode 100644 src/configs/ory.ts

diff --git a/.env.example b/.env.example
index b57faafb9..7cbe2de9d 100644
--- a/.env.example
+++ b/.env.example
@@ -27,6 +27,10 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 ### Ory Network configuration (required when AUTH_PROVIDER=ory)
 ### SDK URL of the Ory Network project (or custom domain like https://auth.e2b.dev)
 # ORY_SDK_URL=https://your-project.projects.oryapis.com
+### Browser-facing Kratos public URL for the custom @ory/elements-react login
+### page. Self-hosted: the Kratos public endpoint (harness default :4433).
+### Ory Network: same value as ORY_SDK_URL.
+# NEXT_PUBLIC_ORY_SDK_URL=http://localhost:4433
 ### OAuth2 client credentials issued by Ory for this dashboard deployment
 # ORY_OAUTH2_CLIENT_ID=
 # ORY_OAUTH2_CLIENT_SECRET=
diff --git a/bun.lock b/bun.lock
index 9d3b207e2..2feede71d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -20,6 +20,8 @@
         "@opentelemetry/sdk-node": "^0.218.0",
         "@opentelemetry/semantic-conventions": "^1.36.0",
         "@ory/client-fetch": "^1.22.37",
+        "@ory/elements-react": "^1.2.0",
+        "@ory/nextjs": "^1.0.0-rc.1",
         "@radix-ui/react-avatar": "^1.1.4",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -302,6 +304,18 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.5", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.2", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-1HTESOq1IUa23g1lFZEGIXsfZKZOwWmB9RROwGn+xariiQnd++wwTMvlRAbZ8wtXRHFUamJPxsKcxpSzeCvFWQ=="],
+
+    "@formatjs/fast-memoize": ["@formatjs/fast-memoize@2.2.7", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ=="],
+
+    "@formatjs/icu-messageformat-parser": ["@formatjs/icu-messageformat-parser@2.11.3", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.5", "@formatjs/icu-skeleton-parser": "1.8.15", "tslib": "^2.8.0" } }, "sha512-H/KfWSosaiDiOaW4nHe1Fn4Cgzm+oFQ8giTmB5RJzTBNSMmd+j2NVrvvZHAmlxJHcuOelzKBLjQ2EDcyH4NSWw=="],
+
+    "@formatjs/icu-skeleton-parser": ["@formatjs/icu-skeleton-parser@1.8.15", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.5", "tslib": "^2.8.0" } }, "sha512-qNrKxWJmnWxin5U4A4Evy7C0rgRiNw3IqXu9OGuT31B8lDxBGl+OgT8kcq0ZVKK0gqA4l4SQB9x+SFAvLT5hcQ=="],
+
+    "@formatjs/intl": ["@formatjs/intl@3.1.7", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.5", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.3", "intl-messageformat": "10.7.17", "tslib": "^2.8.0" }, "peerDependencies": { "typescript": "5.8.3" }, "optionalPeers": ["typescript"] }, "sha512-8nT63H95wtIN1o5BcpqWnTdzl3+78gPXguaqBpoUlCeQtBtrNWDsEDMHz8v60fyHDTZ6mTNKnac9THqwD3/cug=="],
+
+    "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
+
     "@graphql-typed-document-node/core": ["@graphql-typed-document-node/core@3.2.0", "", { "peerDependencies": { "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" } }, "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ=="],
 
     "@grpc/grpc-js": ["@grpc/grpc-js@1.14.4", "", { "dependencies": { "@grpc/proto-loader": "^0.8.0", "@js-sdsl/ordered-map": "^4.4.2" } }, "sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ=="],
@@ -570,6 +584,10 @@
 
     "@ory/client-fetch": ["@ory/client-fetch@1.22.37", "", {}, "sha512-OFPso6JcQ1NVA7UF4Ip112b9/3yoFlGF2kM78fy6gG3uwciC5eUXZWHBGLZdCEi7eKe1JVMJwraR5j6QVmS8vw=="],
 
+    "@ory/elements-react": ["@ory/elements-react@1.2.0", "", { "dependencies": { "@marsidev/react-turnstile": "^1.1.0", "@ory/client-fetch": "1.22.22", "@radix-ui/react-dropdown-menu": "2.1.14", "@radix-ui/react-password-toggle-field": "0.1.3", "@radix-ui/react-switch": "1.2.4", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "input-otp": "1.4.2", "react-hook-form": "7.56.4", "react-intl": "7.1.13", "sonner": "^2.0.0", "tailwind-merge": "3.3.0", "usehooks-ts": "3.1.1" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0" } }, "sha512-Zq/GxYErugATNTOyXkCnazsZoef692vnYxgLZxcLGwVVkFp5Z1U3nDm+LZ9UDQ/HF5cs2+MN2uoNjdQM78qwkg=="],
+
+    "@ory/nextjs": ["@ory/nextjs@1.0.0-rc.1", "", { "dependencies": { "@ory/client-fetch": "1.22.22", "cookie": "^1.0.1", "psl": "^1.15.0", "set-cookie-parser": "^2.7.1" }, "peerDependencies": { "next": ">=13.1.0", "react": ">=16.0.0" } }, "sha512-6qd2OIlhWr9hnMEUumPzCBwd1Fmp7IO6SffpTOx8SCU5PnIW6cJn1nCepbaqP1M0L0AaV0ebMC/BFweYJKNEaQ=="],
+
     "@oxc-parser/binding-android-arm-eabi": ["@oxc-parser/binding-android-arm-eabi@0.128.0", "", { "os": "android", "cpu": "arm" }, "sha512-aca6ZvzmCBUGOANQRiRQRZuRKYI3ENhcit6GisnknOOmcezfQc7xJ4dxlPU7MV7mOvrC7RNR1u3LAD7xyaiCxA=="],
 
     "@oxc-parser/binding-android-arm64": ["@oxc-parser/binding-android-arm64@0.128.0", "", { "os": "android", "cpu": "arm64" }, "sha512-BbeDmuohoJ7Rz/it5wnkj69i/OsCPS3Z51nLEzwO/Y6YshtC4JU+15oNwhY8v4LRKRYclRc7ggOikwrsJ/eOEQ=="],
@@ -724,6 +742,8 @@
 
     "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
 
+    "@radix-ui/react-password-toggle-field": ["@radix-ui/react-password-toggle-field@0.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-is-hydrated": "0.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw=="],
+
     "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
 
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
@@ -746,6 +766,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-yZCky6XZFnR7pcGonJkr9VyNRu46KcYAbyg1v/gVVCZUr8UJ4x+RpncC27hHtiZ15jC+3WS8Yg/JSgyIHnYYsQ=="],
+
     "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
 
     "@radix-ui/react-toast": ["@radix-ui/react-toast@1.2.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g=="],
@@ -968,6 +990,8 @@
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/hoist-non-react-statics": ["@types/hoist-non-react-statics@3.3.7", "", { "dependencies": { "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "@types/react": "*" } }, "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g=="],
+
     "@types/istanbul-lib-coverage": ["@types/istanbul-lib-coverage@2.0.6", "", {}, "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="],
 
     "@types/istanbul-lib-report": ["@types/istanbul-lib-report@3.0.3", "", { "dependencies": { "@types/istanbul-lib-coverage": "*" } }, "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA=="],
@@ -1152,7 +1176,7 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+    "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
 
     "copy-anything": ["copy-anything@4.0.5", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA=="],
 
@@ -1338,6 +1362,8 @@
 
     "help-me": ["help-me@5.0.0", "", {}, "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg=="],
 
+    "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],
+
     "html-dom-parser": ["html-dom-parser@5.1.1", "", { "dependencies": { "domhandler": "5.0.3", "htmlparser2": "10.0.0" } }, "sha512-+o4Y4Z0CLuyemeccvGN4bAO20aauB2N9tFEAep5x4OW34kV4PTarBHm6RL02afYt2BMKcr0D2Agep8S3nJPIBg=="],
 
     "html-encoding-sniffer": ["html-encoding-sniffer@6.0.0", "", { "dependencies": { "@exodus/bytes": "^1.6.0" } }, "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg=="],
@@ -1366,8 +1392,12 @@
 
     "inline-style-parser": ["inline-style-parser@0.2.6", "", {}, "sha512-gtGXVaBdl5mAes3rPcMedEBm12ibjt1kDMFfheul1wUAOVEJW60voNdMVzVkfLN06O7ZaD/rxhfKgtlgtTbMjg=="],
 
+    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
+
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
+    "intl-messageformat": ["intl-messageformat@10.7.17", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.5", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.3", "tslib": "^2.8.0" } }, "sha512-0Ugaf65B2J76rb31drgNF1l6bGEDkbIiYc2Glx6jaZINHnwa5kDRGy8KXYuA+/8P4G0c9prAFhfVhQJJfzUuvQ=="],
+
     "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
 
     "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
@@ -1622,6 +1652,8 @@
 
     "protobufjs": ["protobufjs@7.5.4", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.4", "@protobufjs/eventemitter": "^1.1.0", "@protobufjs/fetch": "^1.1.0", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.0", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.0", "@types/node": ">=13.7.0", "long": "^5.0.0" } }, "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg=="],
 
+    "psl": ["psl@1.15.0", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w=="],
+
     "pump": ["pump@3.0.3", "", { "dependencies": { "end-of-stream": "^1.1.0", "once": "^1.3.1" } }, "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA=="],
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
@@ -1640,6 +1672,8 @@
 
     "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],
 
+    "react-intl": ["react-intl@7.1.13", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.5", "@formatjs/icu-messageformat-parser": "2.11.3", "@formatjs/intl": "3.1.7", "@types/hoist-non-react-statics": "^3.3.1", "@types/react": "16 || 17 || 18 || 19", "hoist-non-react-statics": "^3.3.2", "intl-messageformat": "10.7.17", "tslib": "^2.8.0" }, "peerDependencies": { "react": "16 || 17 || 18 || 19", "typescript": "^5.6.0" }, "optionalPeers": ["typescript"] }, "sha512-wiRmYyWfaDDxv4QxRKXCscbSV2ZzrNnm1t7iC5qZKNDGtM2YrQO+C86QzXq7wz/ahVjJrgeSahY5h2rYlOGcyg=="],
+
     "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "react-property": ["react-property@2.0.2", "", {}, "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="],
@@ -1702,6 +1736,8 @@
 
     "server-only": ["server-only@0.0.1", "", {}, "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="],
 
+    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
+
     "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
 
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
@@ -1958,6 +1994,18 @@
 
     "@emnapi/wasi-threads/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@formatjs/ecma402-abstract/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@formatjs/fast-memoize/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@formatjs/icu-messageformat-parser/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@formatjs/icu-skeleton-parser/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@formatjs/intl/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@formatjs/intl-localematcher/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "@jest/types/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "@opentelemetry/auto-instrumentations-node/@opentelemetry/sdk-node": ["@opentelemetry/sdk-node@0.203.0", "", { "dependencies": { "@opentelemetry/api-logs": "0.203.0", "@opentelemetry/core": "2.0.1", "@opentelemetry/exporter-logs-otlp-grpc": "0.203.0", "@opentelemetry/exporter-logs-otlp-http": "0.203.0", "@opentelemetry/exporter-logs-otlp-proto": "0.203.0", "@opentelemetry/exporter-metrics-otlp-grpc": "0.203.0", "@opentelemetry/exporter-metrics-otlp-http": "0.203.0", "@opentelemetry/exporter-metrics-otlp-proto": "0.203.0", "@opentelemetry/exporter-prometheus": "0.203.0", "@opentelemetry/exporter-trace-otlp-grpc": "0.203.0", "@opentelemetry/exporter-trace-otlp-http": "0.203.0", "@opentelemetry/exporter-trace-otlp-proto": "0.203.0", "@opentelemetry/exporter-zipkin": "2.0.1", "@opentelemetry/instrumentation": "0.203.0", "@opentelemetry/propagator-b3": "2.0.1", "@opentelemetry/propagator-jaeger": "2.0.1", "@opentelemetry/resources": "2.0.1", "@opentelemetry/sdk-logs": "0.203.0", "@opentelemetry/sdk-metrics": "2.0.1", "@opentelemetry/sdk-trace-base": "2.0.1", "@opentelemetry/sdk-trace-node": "2.0.1", "@opentelemetry/semantic-conventions": "^1.29.0" }, "peerDependencies": { "@opentelemetry/api": ">=1.3.0 <1.10.0" } }, "sha512-zRMvrZGhGVMvAbbjiNQW3eKzW/073dlrSiAKPVWmkoQzah9wfynpVPeL55f9fVIm0GaBxTLcPeukWGy0/Wj7KQ=="],
@@ -2108,6 +2156,16 @@
 
     "@opentelemetry/sdk-trace-node/@opentelemetry/sdk-trace-base": ["@opentelemetry/sdk-trace-base@2.7.1", "", { "dependencies": { "@opentelemetry/core": "2.7.1", "@opentelemetry/resources": "2.7.1", "@opentelemetry/semantic-conventions": "^1.29.0" }, "peerDependencies": { "@opentelemetry/api": ">=1.3.0 <1.10.0" } }, "sha512-NAYIlsF8MPUsKqJMiDQJTMPOmlbawC1Iz/omMLygZ1C9am8fTKYjTaI+OZM+WTY3t3Glo0wnOg/6/pac6RGPPw=="],
 
+    "@ory/elements-react/@ory/client-fetch": ["@ory/client-fetch@1.22.22", "", {}, "sha512-MEoPKIRWETj6mTsJnWVCMJTFpZ/40885YZJUEc1vM7v7AwjLBgJPE7xsm2QvSYCSAiLBzbROETxEtvZiRCzYJw=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.14", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-lzuyNjoWOoaMFE/VC5FnAAYM16JmQA8ZmucOXtlhm2kKR5TSU95YLAueQ4JYuRmUJmBvSqXaVFGIfuukybwZJQ=="],
+
+    "@ory/elements-react/react-hook-form": ["react-hook-form@7.56.4", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw=="],
+
+    "@ory/elements-react/tailwind-merge": ["tailwind-merge@3.3.0", "", {}, "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="],
+
+    "@ory/nextjs/@ory/client-fetch": ["@ory/client-fetch@1.22.22", "", {}, "sha512-MEoPKIRWETj6mTsJnWVCMJTFpZ/40885YZJUEc1vM7v7AwjLBgJPE7xsm2QvSYCSAiLBzbROETxEtvZiRCzYJw=="],
+
     "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-checkbox/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
@@ -2140,6 +2198,10 @@
 
     "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-password-toggle-field/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-password-toggle-field/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@radix-ui/react-popover/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-popover/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -2170,6 +2232,12 @@
 
     "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-switch/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+
+    "@radix-ui/react-switch/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@radix-ui/react-switch/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.2", "", { "dependencies": { "@radix-ui/react-slot": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw=="],
+
     "@radix-ui/react-tabs/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
@@ -2202,6 +2270,8 @@
 
     "@supabase/realtime-js/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@supabase/ssr/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+
     "@supabase/storage-js/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "@swc/helpers/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -2250,8 +2320,12 @@
 
     "glob/minimatch": ["minimatch@10.1.1", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ=="],
 
+    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
     "htmlparser2/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
+    "intl-messageformat/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "istanbul-lib-report/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "jest-diff/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@@ -2292,6 +2366,8 @@
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-intl/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "react-remove-scroll/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "react-remove-scroll-bar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -2438,6 +2514,14 @@
 
     "@opentelemetry/sdk-trace-node/@opentelemetry/sdk-trace-base/@opentelemetry/resources": ["@opentelemetry/resources@2.7.1", "", { "dependencies": { "@opentelemetry/core": "2.7.1", "@opentelemetry/semantic-conventions": "^1.29.0" }, "peerDependencies": { "@opentelemetry/api": ">=1.3.0 <1.10.0" } }, "sha512-DeT6KKolmC4e/dRQvMQ/RwlnzhaqeiFOXY5ngoOPJ07GgVVKxZOg9EcrNZb5aTzUn+iCrJldAgOfQm1O/QfPAQ=="],
 
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.9", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.6", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.6", "@radix-ui/react-portal": "1.1.8", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-roving-focus": "1.1.9", "@radix-ui/react-slot": "1.2.2", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0zSiBAIFq9GSKoSH5PdEaQeRB3RnEGxC+H2P0egtnKoKKLNBH8VBHyVO6/jskhjAezhOIplyRUj7U2lds9A+Yg=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.2", "", { "dependencies": { "@radix-ui/react-slot": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw=="],
+
     "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-checkbox/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -2448,6 +2532,8 @@
 
     "@radix-ui/react-focus-scope/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-password-toggle-field/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -2458,6 +2544,8 @@
 
     "@radix-ui/react-scroll-area/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-switch/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],
+
     "@radix-ui/react-tabs/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-toast/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
@@ -2542,6 +2630,26 @@
 
     "@opentelemetry/sdk-node/@opentelemetry/instrumentation/import-in-the-middle/cjs-module-lexer": ["cjs-module-lexer@2.2.0", "", {}, "sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ=="],
 
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.6", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-slot": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-PbhRFK4lIEw9ADonj48tiYWzkllz81TM7KVYyyMMw2cwHO7D5h4XKEblL8NlaRisTK3QTe6tBEhDccFUryxHBQ=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.9", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-way197PiTvNp+WBP7svMJasHl+vibhWGQDb6Mgf5mhEWJkgb85z7Lfl9TUdkqpWsf8GRNmoopx9ZxCyDzmgRMQ=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.6", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-r9zpYNUQY+2jWHWZGyddQLL9YHkM/XvSFHVcWs7bdVuxMAnCwTAuy6Pf47Z4nw7dYcUou1vg/VgjjrrH03VeBw=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.6", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7iqXaOWIjDBfIG7aq8CUEeCSsQMLFdn7VEE8TaFz704DtEzpPHR7w/uuzRflvKgltqSAImgcmxQ7fFX3X7wasg=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-hQsTUIn7p7fxCPvao/q6wpbxmCwgLrlz+nOrJgC+RwfZqWY/WN+UMqkXzrtKbPrF82P43eCTl3ekeKuyAQbFeg=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.9", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.6", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ZzrIFnMYHHCNqSNCsuN6l7wlewBEq0O0BCSBkabJMFXVO51LRUTq71gLP1UxFvmrXElqmPjA5VX7IqC9VpazAQ=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],
+
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
@@ -2556,6 +2664,8 @@
 
     "yargs/string-width/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
+    "@ory/elements-react/@radix-ui/react-dropdown-menu/@radix-ui/react-menu/@radix-ui/react-popper/@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.6", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@emnapi/core/@emnapi/wasi-threads/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
   }
 }
diff --git a/package.json b/package.json
index 2eaa9ca4c..0effb7a56 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,8 @@
     "@opentelemetry/sdk-node": "^0.218.0",
     "@opentelemetry/semantic-conventions": "^1.36.0",
     "@ory/client-fetch": "^1.22.37",
+    "@ory/elements-react": "^1.2.0",
+    "@ory/nextjs": "^1.0.0-rc.1",
     "@radix-ui/react-avatar": "^1.1.4",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
diff --git a/src/app/login/components/custom-button.tsx b/src/app/login/components/custom-button.tsx
new file mode 100644
index 000000000..615bd5282
--- /dev/null
+++ b/src/app/login/components/custom-button.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import type { OryNodeButtonProps } from '@ory/elements-react'
+import { Button } from '@/ui/primitives/button'
+
+// Renders Ory button nodes (e.g. the "Sign in" submit) with the dashboard's
+// primary <Button>. `buttonProps` carries type/name/value/onClick/disabled.
+export function OryButton({
+  node,
+  buttonProps,
+  isSubmitting,
+}: OryNodeButtonProps) {
+  const label = node.meta?.label?.text
+
+  return (
+    <Button {...buttonProps} loading={isSubmitting ? 'Signing in…' : undefined}>
+      {label}
+    </Button>
+  )
+}
diff --git a/src/app/login/components/custom-card-header.tsx b/src/app/login/components/custom-card-header.tsx
new file mode 100644
index 000000000..402bd5b67
--- /dev/null
+++ b/src/app/login/components/custom-card-header.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+// Card header. Renders a plain <h1>, which the dashboard's global base styles
+// render as the uppercase, bold "SIGN IN" heading — and replaces Ory's default
+// header (logo + title), so the project-name line no longer shows.
+export function OryCardHeader() {
+  return <h1>Sign in</h1>
+}
diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
new file mode 100644
index 000000000..1adc84574
--- /dev/null
+++ b/src/app/login/components/custom-card.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+
+// Card container (Card.Root). Replaces Ory's DefaultCard — the white, rounded,
+// heavily-padded, fixed-480px surface — with the dashboard's compact bordered
+// card. We no longer load Ory's theme stylesheet, so this is styled entirely
+// with the dashboard's own classes.
+export function OryCard({ children }: PropsWithChildren) {
+  return (
+    <div className="bg-bg flex w-full flex-col gap-6 border p-6">{children}</div>
+  )
+}
+
+// Login is the only flow here and registration/recovery are disabled, so the
+// default footer (provider-switch links) has nothing useful to show.
+export function OryCardFooter() {
+  return null
+}
diff --git a/src/app/login/components/custom-form-group.tsx b/src/app/login/components/custom-form-group.tsx
new file mode 100644
index 000000000..439ec6663
--- /dev/null
+++ b/src/app/login/components/custom-form-group.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+
+// Layout for a group of form nodes (fields + submit). Owns the vertical rhythm
+// between fields ourselves, since we no longer load Ory's theme stylesheet.
+export function OryFormGroup({ children }: PropsWithChildren) {
+  return <div className="flex flex-col gap-4">{children}</div>
+}
diff --git a/src/app/login/components/custom-input.tsx b/src/app/login/components/custom-input.tsx
new file mode 100644
index 000000000..1f8744fe6
--- /dev/null
+++ b/src/app/login/components/custom-input.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import type { OryNodeInputProps } from '@ory/elements-react'
+import { Input } from '@/ui/primitives/input'
+
+// Renders Ory input nodes with the dashboard's own <Input>. `inputProps` carries
+// all of Ory's wiring (name/value/onChange/ref/type/…) and is spread straight
+// through, so behaviour is unchanged — only the styling is ours.
+export function OryInput({ inputProps, node }: OryNodeInputProps) {
+  // Friendly placeholders to match the dashboard's auth form. Ory/Kratos nodes
+  // don't carry these, so we derive them from the field.
+  const placeholder =
+    node.attributes.name === 'identifier' || inputProps.type === 'email'
+      ? 'you@example.com'
+      : inputProps.type === 'password'
+        ? '••••••••••••'
+        : undefined
+
+  return <Input {...inputProps} {...(placeholder ? { placeholder } : {})} />
+}
diff --git a/src/app/login/components/custom-label.tsx b/src/app/login/components/custom-label.tsx
new file mode 100644
index 000000000..9b0dd9eae
--- /dev/null
+++ b/src/app/login/components/custom-label.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import type { OryNodeLabelProps } from '@ory/elements-react'
+import { cn } from '@/lib/utils'
+import { Label } from '@/ui/primitives/label'
+
+// Wraps each field with the dashboard's uppercase <Label> above the input, plus
+// any Kratos validation messages below — mirroring the dashboard's FormItem.
+export function OryLabel({ node, children, fieldError }: OryNodeLabelProps) {
+  const label = node.meta?.label?.text
+  const messages = node.messages ?? []
+  const fieldErrorText =
+    fieldError && typeof fieldError === 'object' && 'text' in fieldError
+      ? String((fieldError as { text: unknown }).text)
+      : undefined
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {label && <Label htmlFor={node.attributes.name}>{label}</Label>}
+      {children}
+      {messages.map((message) => (
+        <span
+          key={message.id}
+          className={cn(
+            'prose-label',
+            message.type === 'error'
+              ? 'text-accent-error-highlight'
+              : 'text-fg-tertiary'
+          )}
+        >
+          {message.text}
+        </span>
+      ))}
+      {fieldErrorText && (
+        <span className="prose-label text-accent-error-highlight">
+          {fieldErrorText}
+        </span>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/login/components/custom-message.tsx b/src/app/login/components/custom-message.tsx
new file mode 100644
index 000000000..a0309c967
--- /dev/null
+++ b/src/app/login/components/custom-message.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import type { OryMessageContentProps } from '@ory/elements-react'
+import type { PropsWithChildren } from 'react'
+import { cn } from '@/lib/utils'
+
+// Flow-level messages (e.g. "invalid credentials"). Styled with the dashboard's
+// tokens so they read correctly without Ory's theme stylesheet.
+export function OryMessageRoot({ children }: PropsWithChildren) {
+  return <div className="flex flex-col gap-1">{children}</div>
+}
+
+export function OryMessageContent({ message }: OryMessageContentProps) {
+  return (
+    <span
+      className={cn(
+        'prose-label',
+        message.type === 'error'
+          ? 'text-accent-error-highlight'
+          : 'text-fg-tertiary'
+      )}
+    >
+      {message.text}
+    </span>
+  )
+}
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..533cede04
--- /dev/null
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import type { OryNodeSsoButtonProps } from '@ory/elements-react'
+import { Button } from '@/ui/primitives/button'
+
+// Social/SSO buttons ("Continue with …"), styled as the dashboard's secondary
+// button. Only rendered when Kratos has OIDC providers enabled (the local
+// harness disables OIDC, so this is dormant there).
+export function OrySsoButton({
+  node,
+  buttonProps,
+  isSubmitting,
+}: OryNodeSsoButtonProps) {
+  const label = node.meta?.label?.text
+
+  return (
+    <Button
+      variant="secondary"
+      {...buttonProps}
+      loading={isSubmitting ? 'Redirecting…' : undefined}
+    >
+      {label}
+    </Button>
+  )
+}
diff --git a/src/app/login/components/index.ts b/src/app/login/components/index.ts
new file mode 100644
index 000000000..860858df4
--- /dev/null
+++ b/src/app/login/components/index.ts
@@ -0,0 +1,33 @@
+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 { 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'
+
+// Full set of dashboard-styled components for the Ory login flow. We render
+// every visible slot ourselves and do NOT import Ory's theme stylesheet, so the
+// card is styled purely with the dashboard's design system.
+export const oryComponents: OryFlowComponentOverrides = {
+  Node: {
+    Button: OryButton,
+    SsoButton: OrySsoButton,
+    Input: OryInput,
+    Label: OryLabel,
+  },
+  Card: {
+    Root: OryCard,
+    Header: OryCardHeader,
+    Footer: OryCardFooter,
+  },
+  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
+// <Login> 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 (
+    <div className="relative flex min-h-svh flex-col">
+      <GridPattern
+        width={50}
+        height={50}
+        x={-1}
+        y={-1}
+        strokeDasharray={'4 2'}
+        className={cn(
+          '[mask-image:radial-gradient(800px_400px_at_center,white,transparent)]',
+          'z-10'
+        )}
+        gradientFrom="var(--accent-main-highlight )"
+        gradientVia="var(--bg-highlight)"
+        gradientTo="var(--fill-highlight)"
+        gradientDegrees={90}
+      />
+      <div className="z-10 flex w-full flex-1 items-center justify-center px-4 py-4">
+        <div className="w-full max-w-96">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/login/login-card.tsx b/src/app/login/login-card.tsx
new file mode 100644
index 000000000..d31b95647
--- /dev/null
+++ b/src/app/login/login-card.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Login } from '@ory/elements-react/theme'
+import type { ComponentProps } from 'react'
+import { oryComponents } from './components'
+
+// Client wrapper around <Login>. Component overrides are functions and can't
+// cross the server→client boundary, so `components` is applied here rather than
+// in the server page. `flow` and `config` are plain data and serialize fine.
+//
+// Prop types are derived from <Login> itself: two @ory/client-fetch copies are
+// installed (one nested under @ory/nextjs), so referencing the LoginFlow type
+// directly would mismatch what <Login> expects.
+type LoginProps = ComponentProps<typeof Login>
+
+export function LoginCard({
+  flow,
+  config,
+}: Pick<LoginProps, 'flow' | 'config'>) {
+  return <Login flow={flow} config={config} components={oryComponents} />
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 000000000..86e6b886a
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,41 @@
+import { getLoginFlow, type OryPageParams } from '@ory/nextjs/app'
+import { headers } from 'next/headers'
+import oryConfig from '@/configs/ory'
+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) {
+  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 <LoginCard flow={flow} config={config} />
+}
diff --git a/src/configs/ory.ts b/src/configs/ory.ts
new file mode 100644
index 000000000..5c88dbb41
--- /dev/null
+++ b/src/configs/ory.ts
@@ -0,0 +1,42 @@
+import type { OryClientConfiguration } from '@ory/elements-react'
+import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
+
+// Configuration for the custom Ory self-service login UI rendered with
+// @ory/elements-react. Only the login flow is served by the dashboard; every
+// other self-service flow (registration, recovery, verification, settings)
+// stays 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',
+    // Login-only scope: hide links into flows the dashboard does not yet render
+    // with Elements. Flip these on as those flows are migrated.
+    registration_enabled: false,
+    hide_registration_link: true,
+    registration_ui_url: AUTH_URLS.SIGN_UP,
+    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/lib/env.ts b/src/lib/env.ts
index 54cf0ebb9..a4d04c49c 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -77,6 +77,11 @@ export const clientSchema = z.object({
 
   NEXT_PUBLIC_INFRA_API_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(),
 })
 
 const merged = serverSchema.extend(clientSchema.shape)
diff --git a/src/proxy.ts b/src/proxy.ts
index aa16bbe00..489e64794 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,3 +1,4 @@
+import { createOryMiddleware } from '@ory/nextjs/middleware'
 import {
   type NextFetchEvent,
   type NextRequest,
@@ -59,11 +60,38 @@ const proxyWithOryAuth = authjsMiddleware((req, _event: NextFetchEvent) => {
   return proxyCore(req, isAuthenticated)
 })
 
+// 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.
+const oryProxy = createOryMiddleware({})
+
+function isOrySdkProxyPath(pathname: string): boolean {
+  return ORY_SDK_PROXY_PREFIXES.some((prefix) => pathname.startsWith(prefix))
+}
+
 export async function proxy(request: NextRequest, event: NextFetchEvent) {
   if (!isOryAuthEnabled()) {
     return proxyCore(request)
   }
 
+  // Ory SDK traffic is proxied straight to Kratos before the Auth.js wrapper
+  // and auth gate run — those would otherwise rewrite/redirect these paths.
+  if (isOrySdkProxyPath(request.nextUrl.pathname)) {
+    return oryProxy(request)
+  }
+
   return proxyWithOryAuth(request, event)
 }
 

From cf6fbf3f9bd0b1475c1553f2d9a7ab753f602b90 Mon Sep 17 00:00:00 2001
From: huv1k <5691926+huv1k@users.noreply.github.com>
Date: Wed, 10 Jun 2026 12:36:27 +0000
Subject: [PATCH 02/13] style: apply biome formatting

---
 src/app/login/components/custom-card.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
index 1adc84574..f57d01e17 100644
--- a/src/app/login/components/custom-card.tsx
+++ b/src/app/login/components/custom-card.tsx
@@ -8,7 +8,9 @@ import type { PropsWithChildren } from 'react'
 // with the dashboard's own classes.
 export function OryCard({ children }: PropsWithChildren) {
   return (
-    <div className="bg-bg flex w-full flex-col gap-6 border p-6">{children}</div>
+    <div className="bg-bg flex w-full flex-col gap-6 border p-6">
+      {children}
+    </div>
   )
 }
 

From 395856cf9023dd61e8ab402688a46b81f686c366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 15:30:29 +0200
Subject: [PATCH 03/13] feat(auth): provider logos + 'or' divider on login card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 components.json                               |   5 +-
 src/app/login/components/custom-divider.tsx   |  10 +
 .../login/components/custom-sso-button.tsx    |  16 +-
 src/app/login/components/index.ts             |   2 +
 src/components/ui/svgs/githubDark.tsx         |  15 ++
 src/components/ui/svgs/githubLight.tsx        |  14 +
 src/components/ui/svgs/google.tsx             | 243 ++++++++++++++++++
 src/features/auth/logos/github-logo.tsx       |  27 ++
 src/features/auth/logos/google-logo.tsx       |   8 +
 src/features/auth/logos/index.ts              |   8 +
 src/features/auth/oauth-provider-buttons.tsx  |  37 +--
 11 files changed, 349 insertions(+), 36 deletions(-)
 create mode 100644 src/app/login/components/custom-divider.tsx
 create mode 100644 src/components/ui/svgs/githubDark.tsx
 create mode 100644 src/components/ui/svgs/githubLight.tsx
 create mode 100644 src/components/ui/svgs/google.tsx
 create mode 100644 src/features/auth/logos/github-logo.tsx
 create mode 100644 src/features/auth/logos/google-logo.tsx
 create mode 100644 src/features/auth/logos/index.ts

diff --git a/components.json b/components.json
index 290947075..7c35f538c 100644
--- a/components.json
+++ b/components.json
@@ -17,5 +17,8 @@
     "utils": "@/lib/utils",
     "hooks": "@/lib/hooks"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "lucide",
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
 }
diff --git a/src/app/login/components/custom-divider.tsx b/src/app/login/components/custom-divider.tsx
new file mode 100644
index 000000000..a7530a77c
--- /dev/null
+++ b/src/app/login/components/custom-divider.tsx
@@ -0,0 +1,10 @@
+'use client'
+
+import TextSeparator from '@/ui/text-separator'
+
+// Card.Divider — replaces Ory's bare <hr> between the SSO buttons and the
+// email/password group with the dashboard's labelled separator. TextSeparator
+// already owns its vertical margin (my-6), so no extra spacing wrapper here.
+export function OryDivider() {
+  return <TextSeparator text="or" />
+}
diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
index 533cede04..f22ae859e 100644
--- a/src/app/login/components/custom-sso-button.tsx
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -1,24 +1,38 @@
 'use client'
 
 import type { OryNodeSsoButtonProps } from '@ory/elements-react'
+import type { ComponentType } from 'react'
+import { GitHubLogo, GoogleLogo } from '@/features/auth/logos'
 import { Button } from '@/ui/primitives/button'
 
+// Known OIDC providers get a branded logo and a "Continue with …" label. Other
+// providers fall back to whatever label Ory supplies, with no logo.
+const PROVIDERS: Record<string, { label: string; Logo: ComponentType }> = {
+  google: { label: 'Continue with Google', Logo: GoogleLogo },
+  github: { label: 'Continue with GitHub', Logo: GitHubLogo },
+}
+
 // Social/SSO buttons ("Continue with …"), styled as the dashboard's secondary
 // button. Only rendered when Kratos has OIDC providers enabled (the local
 // harness disables OIDC, so this is dormant there).
 export function OrySsoButton({
   node,
+  provider,
   buttonProps,
   isSubmitting,
 }: OryNodeSsoButtonProps) {
-  const label = node.meta?.label?.text
+  const known = PROVIDERS[provider]
+  const label = known?.label ?? node.meta?.label?.text
+  const Logo = known?.Logo
 
   return (
     <Button
       variant="secondary"
+      className="flex items-center gap-2"
       {...buttonProps}
       loading={isSubmitting ? 'Redirecting…' : undefined}
     >
+      {Logo && <Logo />}
       {label}
     </Button>
   )
diff --git a/src/app/login/components/index.ts b/src/app/login/components/index.ts
index 860858df4..49ed84f60 100644
--- a/src/app/login/components/index.ts
+++ b/src/app/login/components/index.ts
@@ -2,6 +2,7 @@ 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'
@@ -22,6 +23,7 @@ export const oryComponents: OryFlowComponentOverrides = {
     Root: OryCard,
     Header: OryCardHeader,
     Footer: OryCardFooter,
+    Divider: OryDivider,
   },
   Form: {
     Group: OryFormGroup,
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<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1024 1024" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      transform="scale(64)"
+      fill="#ffff"
+    />
+  </svg>
+)
+
+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<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 1024 1024" fill="none">
+    <path
+      fill="#1b1f23"
+      fillRule="evenodd"
+      d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28s87.04 5.76 128 17.28c97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+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<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    xmlSpace="preserve"
+    overflow="hidden"
+    viewBox="0 0 268.152 273.883"
+  >
+    <defs>
+      <linearGradient id="a">
+        <stop offset="0" stopColor="#0fbc5c" />
+        <stop offset="1" stopColor="#0cba65" />
+      </linearGradient>
+      <linearGradient id="g">
+        <stop offset=".231" stopColor="#0fbc5f" />
+        <stop offset=".312" stopColor="#0fbc5f" />
+        <stop offset=".366" stopColor="#0fbc5e" />
+        <stop offset=".458" stopColor="#0fbc5d" />
+        <stop offset=".54" stopColor="#12bc58" />
+        <stop offset=".699" stopColor="#28bf3c" />
+        <stop offset=".771" stopColor="#38c02b" />
+        <stop offset=".861" stopColor="#52c218" />
+        <stop offset=".915" stopColor="#67c30f" />
+        <stop offset="1" stopColor="#86c504" />
+      </linearGradient>
+      <linearGradient id="h">
+        <stop offset=".142" stopColor="#1abd4d" />
+        <stop offset=".248" stopColor="#6ec30d" />
+        <stop offset=".312" stopColor="#8ac502" />
+        <stop offset=".366" stopColor="#a2c600" />
+        <stop offset=".446" stopColor="#c8c903" />
+        <stop offset=".54" stopColor="#ebcb03" />
+        <stop offset=".616" stopColor="#f7cd07" />
+        <stop offset=".699" stopColor="#fdcd04" />
+        <stop offset=".771" stopColor="#fdce05" />
+        <stop offset=".861" stopColor="#ffce0a" />
+      </linearGradient>
+      <linearGradient id="f">
+        <stop offset=".316" stopColor="#ff4c3c" />
+        <stop offset=".604" stopColor="#ff692c" />
+        <stop offset=".727" stopColor="#ff7825" />
+        <stop offset=".885" stopColor="#ff8d1b" />
+        <stop offset="1" stopColor="#ff9f13" />
+      </linearGradient>
+      <linearGradient id="b">
+        <stop offset=".231" stopColor="#ff4541" />
+        <stop offset=".312" stopColor="#ff4540" />
+        <stop offset=".458" stopColor="#ff4640" />
+        <stop offset=".54" stopColor="#ff473f" />
+        <stop offset=".699" stopColor="#ff5138" />
+        <stop offset=".771" stopColor="#ff5b33" />
+        <stop offset=".861" stopColor="#ff6c29" />
+        <stop offset="1" stopColor="#ff8c18" />
+      </linearGradient>
+      <linearGradient id="d">
+        <stop offset=".408" stopColor="#fb4e5a" />
+        <stop offset="1" stopColor="#ff4540" />
+      </linearGradient>
+      <linearGradient id="c">
+        <stop offset=".132" stopColor="#0cba65" />
+        <stop offset=".21" stopColor="#0bb86d" />
+        <stop offset=".297" stopColor="#09b479" />
+        <stop offset=".396" stopColor="#08ad93" />
+        <stop offset=".477" stopColor="#0aa6a9" />
+        <stop offset=".568" stopColor="#0d9cc6" />
+        <stop offset=".667" stopColor="#1893dd" />
+        <stop offset=".769" stopColor="#258bf1" />
+        <stop offset=".859" stopColor="#3086ff" />
+      </linearGradient>
+      <linearGradient id="e">
+        <stop offset=".366" stopColor="#ff4e3a" />
+        <stop offset=".458" stopColor="#ff8a1b" />
+        <stop offset=".54" stopColor="#ffa312" />
+        <stop offset=".616" stopColor="#ffb60c" />
+        <stop offset=".771" stopColor="#ffcd0a" />
+        <stop offset=".861" stopColor="#fecf0a" />
+        <stop offset=".915" stopColor="#fecf08" />
+        <stop offset="1" stopColor="#fdcd01" />
+      </linearGradient>
+      <linearGradient
+        xlinkHref="#a"
+        id="s"
+        x1="219.7"
+        x2="254.467"
+        y1="329.535"
+        y2="329.535"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#b"
+        id="m"
+        cx="109.627"
+        cy="135.862"
+        r="71.46"
+        fx="109.627"
+        fy="135.862"
+        gradientTransform="matrix(-1.93688 1.043 1.45573 2.55542 290.525 -400.634)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#c"
+        id="n"
+        cx="45.259"
+        cy="279.274"
+        r="71.46"
+        fx="45.259"
+        fy="279.274"
+        gradientTransform="matrix(-3.5126 -4.45809 -1.69255 1.26062 870.8 191.554)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#d"
+        id="l"
+        cx="304.017"
+        cy="118.009"
+        r="47.854"
+        fx="304.017"
+        fy="118.009"
+        gradientTransform="matrix(2.06435 0 0 2.59204 -297.679 -151.747)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#e"
+        id="o"
+        cx="181.001"
+        cy="177.201"
+        r="71.46"
+        fx="181.001"
+        fy="177.201"
+        gradientTransform="matrix(-.24858 2.08314 2.96249 .33417 -255.146 -331.164)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#f"
+        id="p"
+        cx="207.673"
+        cy="108.097"
+        r="41.102"
+        fx="207.673"
+        fy="108.097"
+        gradientTransform="matrix(-1.2492 1.34326 -3.89684 -3.4257 880.501 194.905)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#g"
+        id="r"
+        cx="109.627"
+        cy="135.862"
+        r="71.46"
+        fx="109.627"
+        fy="135.862"
+        gradientTransform="matrix(-1.93688 -1.043 1.45573 -2.55542 290.525 838.683)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <radialGradient
+        xlinkHref="#h"
+        id="j"
+        cx="154.87"
+        cy="145.969"
+        r="71.46"
+        fx="154.87"
+        fy="145.969"
+        gradientTransform="matrix(-.0814 -1.93722 2.92674 -.11625 -215.135 632.86)"
+        gradientUnits="userSpaceOnUse"
+      />
+      <filter
+        id="q"
+        width="1.097"
+        height="1.116"
+        x="-.048"
+        y="-.058"
+        colorInterpolationFilters="sRGB"
+      >
+        <feGaussianBlur stdDeviation="1.701" />
+      </filter>
+      <filter
+        id="k"
+        width="1.033"
+        height="1.02"
+        x="-.017"
+        y="-.01"
+        colorInterpolationFilters="sRGB"
+      >
+        <feGaussianBlur stdDeviation=".242" />
+      </filter>
+      <clipPath id="i" clipPathUnits="userSpaceOnUse">
+        <path d="M371.378 193.24H237.083v53.438h77.167c-1.241 7.563-4.026 15.003-8.105 21.786-4.674 7.773-10.451 13.69-16.373 18.196-17.74 13.498-38.42 16.258-52.783 16.258-36.283 0-67.283-23.286-79.285-54.928-.484-1.149-.805-2.335-1.197-3.507a81.115 81.115 0 0 1-4.101-25.448c0-9.226 1.569-18.057 4.43-26.398 11.285-32.897 42.985-57.467 80.179-57.467 7.481 0 14.685.884 21.517 2.648a77.668 77.668 0 0 1 33.425 18.25l40.834-39.712c-24.839-22.616-57.219-36.32-95.844-36.32-30.878 0-59.386 9.553-82.748 25.7-18.945 13.093-34.483 30.625-44.97 50.985-9.753 18.879-15.094 39.8-15.094 62.294 0 22.495 5.35 43.633 15.103 62.337v.126c10.302 19.857 25.368 36.954 43.678 49.988 15.997 11.386 44.68 26.551 84.031 26.551 22.63 0 42.687-4.051 60.375-11.644 12.76-5.478 24.065-12.622 34.301-21.804 13.525-12.132 24.117-27.139 31.347-44.404 7.23-17.265 11.097-36.79 11.097-57.957 0-9.858-.998-19.87-2.689-28.968Z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#i)" transform="matrix(.95792 0 0 .98525 -90.174 -78.856)">
+      <path
+        fill="url(#j)"
+        d="M92.076 219.958c.148 22.14 6.501 44.983 16.117 63.424v.127c6.949 13.392 16.445 23.97 27.26 34.452l65.327-23.67c-12.36-6.235-14.246-10.055-23.105-17.026-9.054-9.066-15.802-19.473-20.004-31.677h-.17l.17-.127c-2.765-8.058-3.037-16.613-3.14-25.503Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#l)"
+        d="M237.083 79.025c-6.456 22.526-3.988 44.421 0 57.161 7.457.006 14.64.888 21.45 2.647a77.662 77.662 0 0 1 33.424 18.25l41.88-40.726c-24.81-22.59-54.667-37.297-96.754-37.332Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#m)"
+        d="M236.943 78.847c-31.67 0-60.91 9.798-84.871 26.359a145.533 145.533 0 0 0-24.332 21.15c-1.904 17.744 14.257 39.551 46.262 39.37 15.528-17.936 38.495-29.542 64.056-29.542l.07.002-1.044-57.335c-.048 0-.093-.004-.14-.004Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#n)"
+        d="m341.475 226.379-28.268 19.285c-1.24 7.562-4.028 15.002-8.107 21.786-4.674 7.772-10.45 13.69-16.373 18.196-17.702 13.47-38.328 16.244-52.687 16.255-14.842 25.102-17.444 37.675 1.043 57.934 22.877-.016 43.157-4.117 61.046-11.796 12.931-5.551 24.388-12.792 34.761-22.097 13.706-12.295 24.442-27.503 31.769-45 7.327-17.497 11.245-37.282 11.245-58.734Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="#3086ff"
+        d="M234.996 191.21v57.498h136.006c1.196-7.874 5.152-18.064 5.152-26.5 0-9.858-.996-21.899-2.687-30.998Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#o)"
+        d="M128.39 124.327c-8.394 9.119-15.564 19.326-21.249 30.364-9.753 18.879-15.094 41.83-15.094 64.324 0 .317.026.627.029.944 4.32 8.224 59.666 6.649 62.456 0-.004-.31-.039-.613-.039-.924 0-9.226 1.57-16.026 4.43-24.367 3.53-10.289 9.056-19.763 16.123-27.926 1.602-2.031 5.875-6.397 7.121-9.016.475-.997-.862-1.557-.937-1.908-.083-.393-1.876-.077-2.277-.37-1.275-.929-3.8-1.414-5.334-1.845-3.277-.921-8.708-2.953-11.725-5.06-9.536-6.658-24.417-14.612-33.505-24.216Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#p)"
+        d="M162.099 155.857c22.112 13.301 28.471-6.714 43.173-12.977l-25.574-52.664a144.74 144.74 0 0 0-26.543 14.504c-12.316 8.512-23.192 18.9-32.176 30.72Z"
+        filter="url(#q)"
+      />
+      <path
+        fill="url(#r)"
+        d="M171.099 290.222c-29.683 10.641-34.33 11.023-37.062 29.29a144.806 144.806 0 0 0 16.792 13.984c15.996 11.386 46.766 26.551 86.118 26.551.046 0 .09-.004.137-.004v-59.157l-.094.002c-14.736 0-26.512-3.843-38.585-10.527-2.977-1.648-8.378 2.777-11.123.799-3.786-2.729-12.9 2.35-16.183-.938Z"
+        filter="url(#k)"
+      />
+      <path
+        fill="url(#s)"
+        d="M219.7 299.023v59.996c5.506.64 11.236 1.028 17.247 1.028 6.026 0 11.855-.307 17.52-.872v-59.748a105.119 105.119 0 0 1-17.477 1.461c-5.932 0-11.7-.686-17.29-1.865Z"
+        filter="url(#k)"
+        opacity=".5"
+      />
+    </g>
+  </svg>
+)
+
+export { Google }
diff --git a/src/features/auth/logos/github-logo.tsx b/src/features/auth/logos/github-logo.tsx
new file mode 100644
index 000000000..952adcbf6
--- /dev/null
+++ b/src/features/auth/logos/github-logo.tsx
@@ -0,0 +1,27 @@
+import { GithubDark } from '@/components/ui/svgs/githubDark'
+import { GithubLight } from '@/components/ui/svgs/githubLight'
+
+// GitHub's mark is monochrome, so the svgl registry (added via
+// `bunx shadcn@latest add @svgl/github`) ships light/dark variants. We render
+// both and toggle with Tailwind's `dark:` variant (class strategy, see
+// styles/theme.css) so there's no theme-flash and no client JS. The hidden
+// variant is `display:none`, so it doesn't affect the button's flex `gap`.
+//
+// GithubLight is the dark mark (shown in light mode); GithubDark is the light
+// mark (shown in dark mode).
+export function GitHubLogo() {
+  return (
+    <>
+      <GithubLight
+        className="h-5 w-5 dark:hidden"
+        aria-hidden="true"
+        focusable="false"
+      />
+      <GithubDark
+        className="hidden h-5 w-5 dark:block"
+        aria-hidden="true"
+        focusable="false"
+      />
+    </>
+  )
+}
diff --git a/src/features/auth/logos/google-logo.tsx b/src/features/auth/logos/google-logo.tsx
new file mode 100644
index 000000000..980cd2802
--- /dev/null
+++ b/src/features/auth/logos/google-logo.tsx
@@ -0,0 +1,8 @@
+import { Google } from '@/components/ui/svgs/google'
+
+// Thin wrapper over the svgl registry icon (added via
+// `bunx shadcn@latest add @svgl/google`), pinning our button sizing + a11y.
+// A single multicolor mark that reads on either theme.
+export function GoogleLogo() {
+  return <Google className="h-5 w-5" aria-hidden="true" focusable="false" />
+}
diff --git a/src/features/auth/logos/index.ts b/src/features/auth/logos/index.ts
new file mode 100644
index 000000000..018e57832
--- /dev/null
+++ b/src/features/auth/logos/index.ts
@@ -0,0 +1,8 @@
+// Shared OAuth provider logos. Thin wrappers over the svgl shadcn registry
+// icons in `@/components/ui/svgs` (added via `bunx shadcn@latest add
+// @svgl/google @svgl/github`), adding our button sizing, a11y, and GitHub's
+// light/dark toggle. Used by both the legacy direct-OAuth buttons
+// (`oauth-provider-buttons.tsx`) and the Ory login flow's SSO button
+// (`src/app/login/components/custom-sso-button.tsx`).
+export { GitHubLogo } from './github-logo'
+export { GoogleLogo } from './google-logo'
diff --git a/src/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index 39b611c52..b1e25d74a 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -5,6 +5,7 @@ import { useAction } from 'next-safe-action/hooks'
 import { AUTH_MIGRATION_IN_PROGRESS } from '@/configs/flags'
 import { signInWithOAuthAction } from '@/core/server/actions/auth-actions'
 import { Button } from '@/ui/primitives/button'
+import { GitHubLogo, GoogleLogo } from './logos'
 
 export function OAuthProviders() {
   const searchParams = useSearchParams()
@@ -28,29 +29,7 @@ export function OAuthProviders() {
             : undefined
         }
       >
-        <svg
-          viewBox="0 0 24 24"
-          className="h-5 w-5"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path
-            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-            fill="#4285F4"
-          />
-          <path
-            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-            fill="#34A853"
-          />
-          <path
-            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-            fill="#FBBC05"
-          />
-          <path
-            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-            fill="#EA4335"
-          />
-        </svg>
+        <GoogleLogo />
         Continue with Google
       </Button>
 
@@ -67,17 +46,7 @@ export function OAuthProviders() {
             : undefined
         }
       >
-        <svg
-          viewBox="0 0 24 24"
-          className="h-5 w-5"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path
-            fill="currentColor"
-            d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.137 20.167 22 16.42 22 12c0-5.523-4.477-10-10-10z"
-          />
-        </svg>
+        <GitHubLogo />
         Continue with GitHub
       </Button>
     </div>

From e82a1920478129a4adc4fda58c290fe826ff625f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 15:37:41 +0200
Subject: [PATCH 04/13] fix(auth): match SSO provider by node value; drop logos
 barrel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../login/components/custom-sso-button.tsx    | 27 +++++++++++++++++--
 src/features/auth/logos/index.ts              |  8 ------
 src/features/auth/oauth-provider-buttons.tsx  |  3 ++-
 3 files changed, 27 insertions(+), 11 deletions(-)
 delete mode 100644 src/features/auth/logos/index.ts

diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
index f22ae859e..162b7258b 100644
--- a/src/app/login/components/custom-sso-button.tsx
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -2,7 +2,8 @@
 
 import type { OryNodeSsoButtonProps } from '@ory/elements-react'
 import type { ComponentType } from 'react'
-import { GitHubLogo, GoogleLogo } from '@/features/auth/logos'
+import { GitHubLogo } from '@/features/auth/logos/github-logo'
+import { GoogleLogo } from '@/features/auth/logos/google-logo'
 import { Button } from '@/ui/primitives/button'
 
 // Known OIDC providers get a branded logo and a "Continue with …" label. Other
@@ -12,6 +13,28 @@ const PROVIDERS: Record<string, { label: string; Logo: ComponentType }> = {
   github: { label: 'Continue with GitHub', Logo: GitHubLogo },
 }
 
+// The `provider` prop Ory passes comes from the node's label *context*, which
+// Kratos sets to the provider's human-facing label (e.g. "Google"), not a
+// stable lowercase id. The configured id lives on `node.attributes.value`. Match
+// leniently across the id, the prop, and the label text so casing / id naming
+// can't cause a miss.
+function resolveProvider({
+  node,
+  provider,
+}: Pick<OryNodeSsoButtonProps, 'node' | 'provider'>) {
+  const haystack = [
+    typeof node.attributes.value === 'string' ? node.attributes.value : '',
+    provider,
+    node.meta?.label?.text ?? '',
+  ]
+    .join(' ')
+    .toLowerCase()
+
+  if (haystack.includes('github')) return PROVIDERS.github
+  if (haystack.includes('google')) return PROVIDERS.google
+  return undefined
+}
+
 // Social/SSO buttons ("Continue with …"), styled as the dashboard's secondary
 // button. Only rendered when Kratos has OIDC providers enabled (the local
 // harness disables OIDC, so this is dormant there).
@@ -21,7 +44,7 @@ export function OrySsoButton({
   buttonProps,
   isSubmitting,
 }: OryNodeSsoButtonProps) {
-  const known = PROVIDERS[provider]
+  const known = resolveProvider({ node, provider })
   const label = known?.label ?? node.meta?.label?.text
   const Logo = known?.Logo
 
diff --git a/src/features/auth/logos/index.ts b/src/features/auth/logos/index.ts
deleted file mode 100644
index 018e57832..000000000
--- a/src/features/auth/logos/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Shared OAuth provider logos. Thin wrappers over the svgl shadcn registry
-// icons in `@/components/ui/svgs` (added via `bunx shadcn@latest add
-// @svgl/google @svgl/github`), adding our button sizing, a11y, and GitHub's
-// light/dark toggle. Used by both the legacy direct-OAuth buttons
-// (`oauth-provider-buttons.tsx`) and the Ory login flow's SSO button
-// (`src/app/login/components/custom-sso-button.tsx`).
-export { GitHubLogo } from './github-logo'
-export { GoogleLogo } from './google-logo'
diff --git a/src/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index b1e25d74a..25338eea2 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -5,7 +5,8 @@ import { useAction } from 'next-safe-action/hooks'
 import { AUTH_MIGRATION_IN_PROGRESS } from '@/configs/flags'
 import { signInWithOAuthAction } from '@/core/server/actions/auth-actions'
 import { Button } from '@/ui/primitives/button'
-import { GitHubLogo, GoogleLogo } from './logos'
+import { GitHubLogo } from './logos/github-logo'
+import { GoogleLogo } from './logos/google-logo'
 
 export function OAuthProviders() {
   const searchParams = useSearchParams()

From 50caad548a0d73c569047f560513f129d3734beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 16:09:40 +0200
Subject: [PATCH 05/13] feat(auth): custom Ory registration page at /register

- 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
---
 src/app/login/components/custom-button.tsx    | 12 +++--
 .../login/components/custom-card-header.tsx   | 18 +++++--
 src/app/login/components/custom-card.tsx      | 52 ++++++++++++++++---
 src/app/register/layout.tsx                   | 46 ++++++++++++++++
 src/app/register/page.tsx                     | 37 +++++++++++++
 src/app/register/registration-card.tsx        | 18 +++++++
 src/configs/ory.ts                            | 19 ++++---
 7 files changed, 177 insertions(+), 25 deletions(-)
 create mode 100644 src/app/register/layout.tsx
 create mode 100644 src/app/register/page.tsx
 create mode 100644 src/app/register/registration-card.tsx

diff --git a/src/app/login/components/custom-button.tsx b/src/app/login/components/custom-button.tsx
index 615bd5282..b211430a0 100644
--- a/src/app/login/components/custom-button.tsx
+++ b/src/app/login/components/custom-button.tsx
@@ -1,19 +1,25 @@
 'use client'
 
+import { FlowType } from '@ory/client-fetch'
 import type { OryNodeButtonProps } from '@ory/elements-react'
+import { useOryFlow } from '@ory/elements-react'
 import { Button } from '@/ui/primitives/button'
 
-// Renders Ory button nodes (e.g. the "Sign in" submit) with the dashboard's
-// primary <Button>. `buttonProps` carries type/name/value/onClick/disabled.
+// Renders Ory button nodes (e.g. the "Sign in" / "Sign up" submit) with the
+// dashboard's primary <Button>. `buttonProps` carries
+// type/name/value/onClick/disabled.
 export function OryButton({
   node,
   buttonProps,
   isSubmitting,
 }: OryNodeButtonProps) {
+  const { flowType } = useOryFlow()
   const label = node.meta?.label?.text
+  const loadingLabel =
+    flowType === FlowType.Registration ? 'Signing up…' : 'Signing in…'
 
   return (
-    <Button {...buttonProps} loading={isSubmitting ? 'Signing in…' : undefined}>
+    <Button {...buttonProps} loading={isSubmitting ? loadingLabel : undefined}>
       {label}
     </Button>
   )
diff --git a/src/app/login/components/custom-card-header.tsx b/src/app/login/components/custom-card-header.tsx
index 402bd5b67..b98fbb83e 100644
--- a/src/app/login/components/custom-card-header.tsx
+++ b/src/app/login/components/custom-card-header.tsx
@@ -1,8 +1,18 @@
 'use client'
 
-// Card header. Renders a plain <h1>, which the dashboard's global base styles
-// render as the uppercase, bold "SIGN IN" heading — and replaces Ory's default
-// header (logo + title), so the project-name line no longer shows.
+import { FlowType } from '@ory/client-fetch'
+import { useOryFlow } from '@ory/elements-react'
+
+// Card header, shared by the login and registration flows. Renders a plain
+// <h1>, which the dashboard's global base styles render as the uppercase, bold
+// heading — and replaces Ory's default header (logo + title), so the
+// project-name line no longer shows.
+//
+// The card no longer sets a flex `gap`, so the header owns the space below it
+// (the divider's own `my-6` handles the gap between the social and email forms).
 export function OryCardHeader() {
-  return <h1>Sign in</h1>
+  const { flowType } = useOryFlow()
+  const title = flowType === FlowType.Registration ? 'Sign up' : 'Sign in'
+
+  return <h1 className="mb-6">{title}</h1>
 }
diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
index f57d01e17..4fd2951e6 100644
--- a/src/app/login/components/custom-card.tsx
+++ b/src/app/login/components/custom-card.tsx
@@ -1,5 +1,8 @@
 'use client'
 
+import { FlowType } from '@ory/client-fetch'
+import { useOryFlow } from '@ory/elements-react'
+import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
 
 // Card container (Card.Root). Replaces Ory's DefaultCard — the white, rounded,
@@ -7,15 +10,48 @@ import type { PropsWithChildren } from 'react'
 // card. We no longer load Ory's theme stylesheet, so this is styled entirely
 // with the dashboard's own classes.
 export function OryCard({ children }: PropsWithChildren) {
-  return (
-    <div className="bg-bg flex w-full flex-col gap-6 border p-6">
-      {children}
-    </div>
-  )
+  return <div className="bg-bg flex w-full flex-col border p-6">{children}</div>
 }
 
-// Login is the only flow here and registration/recovery are disabled, so the
-// default footer (provider-switch links) has nothing useful to show.
+// Card footer, shared by the login and registration flows. The login card has
+// no footer links here; the registration card shows the "Sign in" cross-link
+// and the legal copy from the mockup. The card sets no flex `gap`, so the
+// footer owns its own top margin.
 export function OryCardFooter() {
-  return null
+  const { flowType } = useOryFlow()
+
+  if (flowType !== FlowType.Registration) {
+    return null
+  }
+
+  return (
+    <div className="text-fg-secondary mt-6 flex flex-col gap-4">
+      <p>
+        Already have an account?{' '}
+        <Link href="/login" className="text-fg underline">
+          Sign in
+        </Link>
+        .
+      </p>
+      <p className="text-fg-tertiary">
+        By signing up, you agree to our{' '}
+        <Link
+          href="/terms"
+          target="_blank"
+          className="text-fg-secondary underline"
+        >
+          Terms of Service
+        </Link>{' '}
+        and{' '}
+        <Link
+          href="/privacy"
+          target="_blank"
+          className="text-fg-secondary underline"
+        >
+          Privacy Policy
+        </Link>
+        .
+      </p>
+    </div>
+  )
 }
diff --git a/src/app/register/layout.tsx b/src/app/register/layout.tsx
new file mode 100644
index 000000000..2cedf15e1
--- /dev/null
+++ b/src/app/register/layout.tsx
@@ -0,0 +1,46 @@
+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 registration page. Mirrors /login's
+// layout (grid background + centering, no inner card wrapper since
+// @ory/elements-react renders its own self-contained card). Registration lives
+// at the top-level /register 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 (
+    <div className="relative flex min-h-svh flex-col">
+      <GridPattern
+        width={50}
+        height={50}
+        x={-1}
+        y={-1}
+        strokeDasharray={'4 2'}
+        className={cn(
+          '[mask-image:radial-gradient(800px_400px_at_center,white,transparent)]',
+          'z-10'
+        )}
+        gradientFrom="var(--accent-main-highlight )"
+        gradientVia="var(--bg-highlight)"
+        gradientTo="var(--fill-highlight)"
+        gradientDegrees={90}
+      />
+      <div className="z-10 flex w-full flex-1 items-center justify-center px-4 py-4">
+        <div className="w-full max-w-96">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 000000000..edec3d8b0
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,37 @@
+import { getRegistrationFlow, type OryPageParams } from '@ory/nextjs/app'
+import { headers } from 'next/headers'
+import oryConfig from '@/configs/ory'
+import { RegistrationCard } from './registration-card'
+
+// Custom registration page rendered with @ory/elements-react, mirroring the
+// /login page. Kratos bounces the browser here (`flows.registration.ui_url` /
+// our `registration_ui_url`).
+//
+// `getRegistrationFlow` mirrors `getLoginFlow`:
+//   - arriving without `?flow=...`: it creates a browser registration flow in
+//     Kratos, which redirects back here with `?flow=...`.
+//   - arriving with `?flow=...`: it fetches the flow and rewrites the Kratos
+//     action URLs onto this origin so the form posts through the proxy in
+//     src/proxy.ts.
+export default async function OryRegistrationPage(props: OryPageParams) {
+  const flow = await getRegistrationFlow(oryConfig, props.searchParams)
+
+  // getRegistrationFlow 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
+  }
+
+  // See src/app/login/page.tsx for why sdk.url must be this request's own
+  // origin: the browser submits to /self-service/* on our domain, which the
+  // proxy in src/proxy.ts forwards to Kratos.
+  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 <RegistrationCard flow={flow} config={config} />
+}
diff --git a/src/app/register/registration-card.tsx b/src/app/register/registration-card.tsx
new file mode 100644
index 000000000..bade82fd8
--- /dev/null
+++ b/src/app/register/registration-card.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { Registration } from '@ory/elements-react/theme'
+import type { ComponentProps } from 'react'
+import { oryComponents } from '@/app/login/components'
+
+// Client wrapper around <Registration>, mirroring <LoginCard>. The component
+// overrides (functions) can't cross the server→client boundary, so they're
+// applied here. The same `oryComponents` set powers both flows — the header and
+// footer branch on the flow type internally.
+type RegistrationProps = ComponentProps<typeof Registration>
+
+export function RegistrationCard({
+  flow,
+  config,
+}: Pick<RegistrationProps, 'flow' | 'config'>) {
+  return <Registration flow={flow} config={config} components={oryComponents} />
+}
diff --git a/src/configs/ory.ts b/src/configs/ory.ts
index 5c88dbb41..b5930e94b 100644
--- a/src/configs/ory.ts
+++ b/src/configs/ory.ts
@@ -1,11 +1,11 @@
 import type { OryClientConfiguration } from '@ory/elements-react'
 import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
 
-// Configuration for the custom Ory self-service login UI rendered with
-// @ory/elements-react. Only the login flow is served by the dashboard; every
-// other self-service flow (registration, recovery, verification, settings)
-// stays 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.
+// Configuration for the custom Ory self-service UI rendered with
+// @ory/elements-react. The dashboard serves the login (/login) and registration
+// (/register) 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
@@ -26,11 +26,10 @@ const oryConfig: OryClientConfiguration = {
     default_redirect_url: PROTECTED_URLS.DASHBOARD,
     error_ui_url: AUTH_URLS.SIGN_IN,
     login_ui_url: '/login',
-    // Login-only scope: hide links into flows the dashboard does not yet render
-    // with Elements. Flip these on as those flows are migrated.
-    registration_enabled: false,
-    hide_registration_link: true,
-    registration_ui_url: AUTH_URLS.SIGN_UP,
+    registration_enabled: true,
+    registration_ui_url: '/register',
+    // 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,

From 481d6a7d4960e14c531e32a01476606c5a29c86a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 16:26:58 +0200
Subject: [PATCH 06/13] feat(auth): login 'Sign up' footer link; inline GitHub
 logo

- 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
---
 src/app/login/components/custom-card.tsx      | 20 +++++++++++---
 .../login/components/custom-sso-button.tsx    |  3 ---
 src/features/auth/logos/github-logo.tsx       | 27 -------------------
 src/features/auth/oauth-provider-buttons.tsx  | 25 ++++++++++++++++-
 4 files changed, 40 insertions(+), 35 deletions(-)
 delete mode 100644 src/features/auth/logos/github-logo.tsx

diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
index 4fd2951e6..1e70a0eec 100644
--- a/src/app/login/components/custom-card.tsx
+++ b/src/app/login/components/custom-card.tsx
@@ -13,13 +13,25 @@ export function OryCard({ children }: PropsWithChildren) {
   return <div className="bg-bg flex w-full flex-col border p-6">{children}</div>
 }
 
-// Card footer, shared by the login and registration flows. The login card has
-// no footer links here; the registration card shows the "Sign in" cross-link
-// and the legal copy from the mockup. The card sets no flex `gap`, so the
-// footer owns its own top margin.
+// Card footer, shared by the login and registration flows. Login shows the
+// "Sign up" cross-link; registration shows the "Sign in" cross-link plus the
+// legal copy from the mockup. The card sets no flex `gap`, so the footer owns
+// its own top margin.
 export function OryCardFooter() {
   const { flowType } = useOryFlow()
 
+  if (flowType === FlowType.Login) {
+    return (
+      <p className="text-fg-secondary mt-6">
+        Don't have an account?{' '}
+        <Link href="/register" className="text-fg underline">
+          Sign up
+        </Link>
+        .
+      </p>
+    )
+  }
+
   if (flowType !== FlowType.Registration) {
     return null
   }
diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
index 162b7258b..f8f5e6e0b 100644
--- a/src/app/login/components/custom-sso-button.tsx
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -2,7 +2,6 @@
 
 import type { OryNodeSsoButtonProps } from '@ory/elements-react'
 import type { ComponentType } from 'react'
-import { GitHubLogo } from '@/features/auth/logos/github-logo'
 import { GoogleLogo } from '@/features/auth/logos/google-logo'
 import { Button } from '@/ui/primitives/button'
 
@@ -10,7 +9,6 @@ import { Button } from '@/ui/primitives/button'
 // providers fall back to whatever label Ory supplies, with no logo.
 const PROVIDERS: Record<string, { label: string; Logo: ComponentType }> = {
   google: { label: 'Continue with Google', Logo: GoogleLogo },
-  github: { label: 'Continue with GitHub', Logo: GitHubLogo },
 }
 
 // The `provider` prop Ory passes comes from the node's label *context*, which
@@ -30,7 +28,6 @@ function resolveProvider({
     .join(' ')
     .toLowerCase()
 
-  if (haystack.includes('github')) return PROVIDERS.github
   if (haystack.includes('google')) return PROVIDERS.google
   return undefined
 }
diff --git a/src/features/auth/logos/github-logo.tsx b/src/features/auth/logos/github-logo.tsx
deleted file mode 100644
index 952adcbf6..000000000
--- a/src/features/auth/logos/github-logo.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { GithubDark } from '@/components/ui/svgs/githubDark'
-import { GithubLight } from '@/components/ui/svgs/githubLight'
-
-// GitHub's mark is monochrome, so the svgl registry (added via
-// `bunx shadcn@latest add @svgl/github`) ships light/dark variants. We render
-// both and toggle with Tailwind's `dark:` variant (class strategy, see
-// styles/theme.css) so there's no theme-flash and no client JS. The hidden
-// variant is `display:none`, so it doesn't affect the button's flex `gap`.
-//
-// GithubLight is the dark mark (shown in light mode); GithubDark is the light
-// mark (shown in dark mode).
-export function GitHubLogo() {
-  return (
-    <>
-      <GithubLight
-        className="h-5 w-5 dark:hidden"
-        aria-hidden="true"
-        focusable="false"
-      />
-      <GithubDark
-        className="hidden h-5 w-5 dark:block"
-        aria-hidden="true"
-        focusable="false"
-      />
-    </>
-  )
-}
diff --git a/src/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index 25338eea2..efb1d4716 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -2,12 +2,35 @@
 
 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 { AUTH_MIGRATION_IN_PROGRESS } from '@/configs/flags'
 import { signInWithOAuthAction } from '@/core/server/actions/auth-actions'
 import { Button } from '@/ui/primitives/button'
-import { GitHubLogo } from './logos/github-logo'
 import { GoogleLogo } from './logos/google-logo'
 
+// GitHub's mark is monochrome, so the svgl registry ships light/dark variants;
+// render both and toggle with Tailwind's `dark:` variant (class strategy) so
+// there's no theme-flash. The hidden variant is display:none, so it doesn't
+// affect the button's flex `gap`. GithubLight is the dark mark (light mode);
+// GithubDark is the light mark (dark mode).
+function GitHubLogo() {
+  return (
+    <>
+      <GithubLight
+        className="h-5 w-5 dark:hidden"
+        aria-hidden="true"
+        focusable="false"
+      />
+      <GithubDark
+        className="hidden h-5 w-5 dark:block"
+        aria-hidden="true"
+        focusable="false"
+      />
+    </>
+  )
+}
+
 export function OAuthProviders() {
   const searchParams = useSearchParams()
   const returnTo = searchParams.get('returnTo')

From 28d5877217adafd9f86e534a8e8af368b0107817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 16:47:29 +0200
Subject: [PATCH 07/13] chore: trigger CI rebuild


From 4a6ae94fb684ef807ec73e4ad9eeabd15cfc77a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Wed, 10 Jun 2026 17:24:11 +0200
Subject: [PATCH 08/13] refactor(auth): serve registration page at
 /registration

Rename /register route to /registration and update registration_ui_url
and the login footer 'Sign up' link to match.
---
 src/app/login/components/custom-card.tsx                 | 2 +-
 src/app/{register => registration}/layout.tsx            | 2 +-
 src/app/{register => registration}/page.tsx              | 0
 src/app/{register => registration}/registration-card.tsx | 0
 src/configs/ory.ts                                       | 4 ++--
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/app/{register => registration}/layout.tsx (94%)
 rename src/app/{register => registration}/page.tsx (100%)
 rename src/app/{register => registration}/registration-card.tsx (100%)

diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
index 1e70a0eec..c038d4706 100644
--- a/src/app/login/components/custom-card.tsx
+++ b/src/app/login/components/custom-card.tsx
@@ -24,7 +24,7 @@ export function OryCardFooter() {
     return (
       <p className="text-fg-secondary mt-6">
         Don't have an account?{' '}
-        <Link href="/register" className="text-fg underline">
+        <Link href="/registration" className="text-fg underline">
           Sign up
         </Link>
         .
diff --git a/src/app/register/layout.tsx b/src/app/registration/layout.tsx
similarity index 94%
rename from src/app/register/layout.tsx
rename to src/app/registration/layout.tsx
index 2cedf15e1..605867f16 100644
--- a/src/app/register/layout.tsx
+++ b/src/app/registration/layout.tsx
@@ -6,7 +6,7 @@ import { GridPattern } from '@/ui/grid-pattern'
 // Dedicated layout for the custom Ory registration page. Mirrors /login's
 // layout (grid background + centering, no inner card wrapper since
 // @ory/elements-react renders its own self-contained card). Registration lives
-// at the top-level /register because the legacy (auth) group already owns
+// at the top-level /registration because the legacy (auth) group already owns
 // /sign-up.
 export const metadata = {
   title: METADATA.title,
diff --git a/src/app/register/page.tsx b/src/app/registration/page.tsx
similarity index 100%
rename from src/app/register/page.tsx
rename to src/app/registration/page.tsx
diff --git a/src/app/register/registration-card.tsx b/src/app/registration/registration-card.tsx
similarity index 100%
rename from src/app/register/registration-card.tsx
rename to src/app/registration/registration-card.tsx
diff --git a/src/configs/ory.ts b/src/configs/ory.ts
index b5930e94b..ab9380221 100644
--- a/src/configs/ory.ts
+++ b/src/configs/ory.ts
@@ -3,7 +3,7 @@ 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
-// (/register) flows; the remaining self-service flows (recovery, verification,
+// (/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.
 //
@@ -27,7 +27,7 @@ const oryConfig: OryClientConfiguration = {
     error_ui_url: AUTH_URLS.SIGN_IN,
     login_ui_url: '/login',
     registration_enabled: true,
-    registration_ui_url: '/register',
+    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,

From 41c884c850a41f0bb7ade9ee0655a97d466a8185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Thu, 11 Jun 2026 10:25:14 +0200
Subject: [PATCH 09/13] refactor(auth): use svgl Google registry icon directly;
 pass project 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
---
 src/app/login/components/custom-sso-button.tsx | 15 ++++++++++-----
 src/features/auth/logos/google-logo.tsx        |  8 --------
 src/features/auth/oauth-provider-buttons.tsx   |  4 ++--
 src/proxy.ts                                   |  8 +++++++-
 4 files changed, 19 insertions(+), 16 deletions(-)
 delete mode 100644 src/features/auth/logos/google-logo.tsx

diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
index f8f5e6e0b..d1813f3a3 100644
--- a/src/app/login/components/custom-sso-button.tsx
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -1,14 +1,17 @@
 'use client'
 
 import type { OryNodeSsoButtonProps } from '@ory/elements-react'
-import type { ComponentType } from 'react'
-import { GoogleLogo } from '@/features/auth/logos/google-logo'
+import type { ComponentType, SVGProps } from 'react'
+import { Google } from '@/components/ui/svgs/google'
 import { Button } from '@/ui/primitives/button'
 
 // Known OIDC providers get a branded logo and a "Continue with …" label. Other
 // providers fall back to whatever label Ory supplies, with no logo.
-const PROVIDERS: Record<string, { label: string; Logo: ComponentType }> = {
-  google: { label: 'Continue with Google', Logo: GoogleLogo },
+const PROVIDERS: Record<
+  string,
+  { label: string; Logo: ComponentType<SVGProps<SVGSVGElement>> }
+> = {
+  google: { label: 'Continue with Google', Logo: Google },
 }
 
 // The `provider` prop Ory passes comes from the node's label *context*, which
@@ -52,7 +55,9 @@ export function OrySsoButton({
       {...buttonProps}
       loading={isSubmitting ? 'Redirecting…' : undefined}
     >
-      {Logo && <Logo />}
+      {Logo && (
+        <Logo className="h-5 w-5" aria-hidden="true" focusable="false" />
+      )}
       {label}
     </Button>
   )
diff --git a/src/features/auth/logos/google-logo.tsx b/src/features/auth/logos/google-logo.tsx
deleted file mode 100644
index 980cd2802..000000000
--- a/src/features/auth/logos/google-logo.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Google } from '@/components/ui/svgs/google'
-
-// Thin wrapper over the svgl registry icon (added via
-// `bunx shadcn@latest add @svgl/google`), pinning our button sizing + a11y.
-// A single multicolor mark that reads on either theme.
-export function GoogleLogo() {
-  return <Google className="h-5 w-5" aria-hidden="true" focusable="false" />
-}
diff --git a/src/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index efb1d4716..ed6adcc65 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -4,10 +4,10 @@ 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'
-import { GoogleLogo } from './logos/google-logo'
 
 // GitHub's mark is monochrome, so the svgl registry ships light/dark variants;
 // render both and toggle with Tailwind's `dark:` variant (class strategy) so
@@ -53,7 +53,7 @@ export function OAuthProviders() {
             : undefined
         }
       >
-        <GoogleLogo />
+        <Google className="h-5 w-5" aria-hidden="true" focusable="false" />
         Continue with Google
       </Button>
 
diff --git a/src/proxy.ts b/src/proxy.ts
index 1be449eda..73f4334e0 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -6,6 +6,7 @@ import {
 } from 'next/server'
 import { auth as authjsMiddleware } from '@/auth'
 import { isOryAuthEnabled } 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 {
@@ -106,7 +107,12 @@ const ORY_SDK_PROXY_PREFIXES = [
 
 // 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.
-const oryProxy = createOryMiddleware({})
+//
+// 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))

From 9875c18828160ef867f5d580b475c4ebb1c36586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Thu, 11 Jun 2026 12:47:21 +0200
Subject: [PATCH 10/13] feat(auth): gate custom Ory Elements UI to
 non-production; trim comments

- 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
---
 src/app/login/components/custom-button.tsx    |  3 ---
 .../login/components/custom-card-header.tsx   |  7 -----
 src/app/login/components/custom-card.tsx      |  8 ------
 src/app/login/components/custom-divider.tsx   |  3 ---
 .../login/components/custom-form-group.tsx    |  2 --
 src/app/login/components/custom-input.tsx     |  5 ----
 src/app/login/components/custom-label.tsx     |  2 --
 src/app/login/components/custom-message.tsx   |  2 --
 .../login/components/custom-sso-button.tsx    | 13 +++-------
 src/app/login/components/index.ts             |  3 ---
 src/app/login/login-card.tsx                  | 10 +++----
 src/app/login/page.tsx                        |  9 +++++++
 src/app/registration/layout.tsx               |  6 +----
 src/app/registration/page.tsx                 | 26 +++++++------------
 src/app/registration/registration-card.tsx    |  4 ---
 src/configs/flags.ts                          |  6 +++++
 src/features/auth/oauth-provider-buttons.tsx  |  5 ----
 src/proxy.ts                                  |  5 ++--
 18 files changed, 35 insertions(+), 84 deletions(-)

diff --git a/src/app/login/components/custom-button.tsx b/src/app/login/components/custom-button.tsx
index b211430a0..40d56d5aa 100644
--- a/src/app/login/components/custom-button.tsx
+++ b/src/app/login/components/custom-button.tsx
@@ -5,9 +5,6 @@ import type { OryNodeButtonProps } from '@ory/elements-react'
 import { useOryFlow } from '@ory/elements-react'
 import { Button } from '@/ui/primitives/button'
 
-// Renders Ory button nodes (e.g. the "Sign in" / "Sign up" submit) with the
-// dashboard's primary <Button>. `buttonProps` carries
-// type/name/value/onClick/disabled.
 export function OryButton({
   node,
   buttonProps,
diff --git a/src/app/login/components/custom-card-header.tsx b/src/app/login/components/custom-card-header.tsx
index b98fbb83e..dca9c0d2a 100644
--- a/src/app/login/components/custom-card-header.tsx
+++ b/src/app/login/components/custom-card-header.tsx
@@ -3,13 +3,6 @@
 import { FlowType } from '@ory/client-fetch'
 import { useOryFlow } from '@ory/elements-react'
 
-// Card header, shared by the login and registration flows. Renders a plain
-// <h1>, which the dashboard's global base styles render as the uppercase, bold
-// heading — and replaces Ory's default header (logo + title), so the
-// project-name line no longer shows.
-//
-// The card no longer sets a flex `gap`, so the header owns the space below it
-// (the divider's own `my-6` handles the gap between the social and email forms).
 export function OryCardHeader() {
   const { flowType } = useOryFlow()
   const title = flowType === FlowType.Registration ? 'Sign up' : 'Sign in'
diff --git a/src/app/login/components/custom-card.tsx b/src/app/login/components/custom-card.tsx
index c038d4706..e6df2db95 100644
--- a/src/app/login/components/custom-card.tsx
+++ b/src/app/login/components/custom-card.tsx
@@ -5,18 +5,10 @@ import { useOryFlow } from '@ory/elements-react'
 import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
 
-// Card container (Card.Root). Replaces Ory's DefaultCard — the white, rounded,
-// heavily-padded, fixed-480px surface — with the dashboard's compact bordered
-// card. We no longer load Ory's theme stylesheet, so this is styled entirely
-// with the dashboard's own classes.
 export function OryCard({ children }: PropsWithChildren) {
   return <div className="bg-bg flex w-full flex-col border p-6">{children}</div>
 }
 
-// Card footer, shared by the login and registration flows. Login shows the
-// "Sign up" cross-link; registration shows the "Sign in" cross-link plus the
-// legal copy from the mockup. The card sets no flex `gap`, so the footer owns
-// its own top margin.
 export function OryCardFooter() {
   const { flowType } = useOryFlow()
 
diff --git a/src/app/login/components/custom-divider.tsx b/src/app/login/components/custom-divider.tsx
index a7530a77c..22d6a68a9 100644
--- a/src/app/login/components/custom-divider.tsx
+++ b/src/app/login/components/custom-divider.tsx
@@ -2,9 +2,6 @@
 
 import TextSeparator from '@/ui/text-separator'
 
-// Card.Divider — replaces Ory's bare <hr> between the SSO buttons and the
-// email/password group with the dashboard's labelled separator. TextSeparator
-// already owns its vertical margin (my-6), so no extra spacing wrapper here.
 export function OryDivider() {
   return <TextSeparator text="or" />
 }
diff --git a/src/app/login/components/custom-form-group.tsx b/src/app/login/components/custom-form-group.tsx
index 439ec6663..fdc5b3be4 100644
--- a/src/app/login/components/custom-form-group.tsx
+++ b/src/app/login/components/custom-form-group.tsx
@@ -2,8 +2,6 @@
 
 import type { PropsWithChildren } from 'react'
 
-// Layout for a group of form nodes (fields + submit). Owns the vertical rhythm
-// between fields ourselves, since we no longer load Ory's theme stylesheet.
 export function OryFormGroup({ children }: PropsWithChildren) {
   return <div className="flex flex-col gap-4">{children}</div>
 }
diff --git a/src/app/login/components/custom-input.tsx b/src/app/login/components/custom-input.tsx
index 1f8744fe6..ba613e248 100644
--- a/src/app/login/components/custom-input.tsx
+++ b/src/app/login/components/custom-input.tsx
@@ -3,12 +3,7 @@
 import type { OryNodeInputProps } from '@ory/elements-react'
 import { Input } from '@/ui/primitives/input'
 
-// Renders Ory input nodes with the dashboard's own <Input>. `inputProps` carries
-// all of Ory's wiring (name/value/onChange/ref/type/…) and is spread straight
-// through, so behaviour is unchanged — only the styling is ours.
 export function OryInput({ inputProps, node }: OryNodeInputProps) {
-  // Friendly placeholders to match the dashboard's auth form. Ory/Kratos nodes
-  // don't carry these, so we derive them from the field.
   const placeholder =
     node.attributes.name === 'identifier' || inputProps.type === 'email'
       ? 'you@example.com'
diff --git a/src/app/login/components/custom-label.tsx b/src/app/login/components/custom-label.tsx
index 9b0dd9eae..a322aca03 100644
--- a/src/app/login/components/custom-label.tsx
+++ b/src/app/login/components/custom-label.tsx
@@ -4,8 +4,6 @@ import type { OryNodeLabelProps } from '@ory/elements-react'
 import { cn } from '@/lib/utils'
 import { Label } from '@/ui/primitives/label'
 
-// Wraps each field with the dashboard's uppercase <Label> above the input, plus
-// any Kratos validation messages below — mirroring the dashboard's FormItem.
 export function OryLabel({ node, children, fieldError }: OryNodeLabelProps) {
   const label = node.meta?.label?.text
   const messages = node.messages ?? []
diff --git a/src/app/login/components/custom-message.tsx b/src/app/login/components/custom-message.tsx
index a0309c967..ee79eab59 100644
--- a/src/app/login/components/custom-message.tsx
+++ b/src/app/login/components/custom-message.tsx
@@ -4,8 +4,6 @@ import type { OryMessageContentProps } from '@ory/elements-react'
 import type { PropsWithChildren } from 'react'
 import { cn } from '@/lib/utils'
 
-// Flow-level messages (e.g. "invalid credentials"). Styled with the dashboard's
-// tokens so they read correctly without Ory's theme stylesheet.
 export function OryMessageRoot({ children }: PropsWithChildren) {
   return <div className="flex flex-col gap-1">{children}</div>
 }
diff --git a/src/app/login/components/custom-sso-button.tsx b/src/app/login/components/custom-sso-button.tsx
index d1813f3a3..86c8752c1 100644
--- a/src/app/login/components/custom-sso-button.tsx
+++ b/src/app/login/components/custom-sso-button.tsx
@@ -5,8 +5,6 @@ import type { ComponentType, SVGProps } from 'react'
 import { Google } from '@/components/ui/svgs/google'
 import { Button } from '@/ui/primitives/button'
 
-// Known OIDC providers get a branded logo and a "Continue with …" label. Other
-// providers fall back to whatever label Ory supplies, with no logo.
 const PROVIDERS: Record<
   string,
   { label: string; Logo: ComponentType<SVGProps<SVGSVGElement>> }
@@ -14,11 +12,9 @@ const PROVIDERS: Record<
   google: { label: 'Continue with Google', Logo: Google },
 }
 
-// The `provider` prop Ory passes comes from the node's label *context*, which
-// Kratos sets to the provider's human-facing label (e.g. "Google"), not a
-// stable lowercase id. The configured id lives on `node.attributes.value`. Match
-// leniently across the id, the prop, and the label text so casing / id naming
-// can't cause a miss.
+// 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,
@@ -35,9 +31,6 @@ function resolveProvider({
   return undefined
 }
 
-// Social/SSO buttons ("Continue with …"), styled as the dashboard's secondary
-// button. Only rendered when Kratos has OIDC providers enabled (the local
-// harness disables OIDC, so this is dormant there).
 export function OrySsoButton({
   node,
   provider,
diff --git a/src/app/login/components/index.ts b/src/app/login/components/index.ts
index 49ed84f60..143422c56 100644
--- a/src/app/login/components/index.ts
+++ b/src/app/login/components/index.ts
@@ -9,9 +9,6 @@ import { OryLabel } from './custom-label'
 import { OryMessageContent, OryMessageRoot } from './custom-message'
 import { OrySsoButton } from './custom-sso-button'
 
-// Full set of dashboard-styled components for the Ory login flow. We render
-// every visible slot ourselves and do NOT import Ory's theme stylesheet, so the
-// card is styled purely with the dashboard's design system.
 export const oryComponents: OryFlowComponentOverrides = {
   Node: {
     Button: OryButton,
diff --git a/src/app/login/login-card.tsx b/src/app/login/login-card.tsx
index d31b95647..8f654bd84 100644
--- a/src/app/login/login-card.tsx
+++ b/src/app/login/login-card.tsx
@@ -4,13 +4,9 @@ import { Login } from '@ory/elements-react/theme'
 import type { ComponentProps } from 'react'
 import { oryComponents } from './components'
 
-// Client wrapper around <Login>. Component overrides are functions and can't
-// cross the server→client boundary, so `components` is applied here rather than
-// in the server page. `flow` and `config` are plain data and serialize fine.
-//
-// Prop types are derived from <Login> itself: two @ory/client-fetch copies are
-// installed (one nested under @ory/nextjs), so referencing the LoginFlow type
-// directly would mismatch what <Login> expects.
+// Overrides are functions, so they're applied client-side here, not in the
+// server page. Prop types come from <Login> itself: two @ory/client-fetch
+// copies are installed, so naming the LoginFlow type directly would mismatch.
 type LoginProps = ComponentProps<typeof Login>
 
 export function LoginCard({
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 86e6b886a..afd54708c 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,6 +1,9 @@
 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
@@ -15,6 +18,12 @@ import { LoginCard } from './login-card'
 //     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
diff --git a/src/app/registration/layout.tsx b/src/app/registration/layout.tsx
index 605867f16..d17ec420f 100644
--- a/src/app/registration/layout.tsx
+++ b/src/app/registration/layout.tsx
@@ -3,11 +3,7 @@ import { METADATA } from '@/configs/metadata'
 import { cn } from '@/lib/utils'
 import { GridPattern } from '@/ui/grid-pattern'
 
-// Dedicated layout for the custom Ory registration page. Mirrors /login's
-// layout (grid background + centering, no inner card wrapper since
-// @ory/elements-react renders its own self-contained card). Registration lives
-// at the top-level /registration because the legacy (auth) group already owns
-// /sign-up.
+// Top-level /registration because the legacy (auth) group already owns /sign-up.
 export const metadata = {
   title: METADATA.title,
   description: METADATA.description,
diff --git a/src/app/registration/page.tsx b/src/app/registration/page.tsx
index edec3d8b0..c336c7472 100644
--- a/src/app/registration/page.tsx
+++ b/src/app/registration/page.tsx
@@ -1,31 +1,25 @@
 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'
 
-// Custom registration page rendered with @ory/elements-react, mirroring the
-// /login page. Kratos bounces the browser here (`flows.registration.ui_url` /
-// our `registration_ui_url`).
-//
-// `getRegistrationFlow` mirrors `getLoginFlow`:
-//   - arriving without `?flow=...`: it creates a browser registration flow in
-//     Kratos, which redirects back here with `?flow=...`.
-//   - arriving with `?flow=...`: it fetches the flow and rewrites the Kratos
-//     action URLs onto this origin so the form posts through the proxy in
-//     src/proxy.ts.
+// 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)
 
-  // getRegistrationFlow 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
   }
 
-  // See src/app/login/page.tsx for why sdk.url must be this request's own
-  // origin: the browser submits to /self-service/* on our domain, which the
-  // proxy in src/proxy.ts forwards to Kratos.
   const requestHeaders = await headers()
   const host = requestHeaders.get('host')
   const proto = requestHeaders.get('x-forwarded-proto') ?? 'http'
diff --git a/src/app/registration/registration-card.tsx b/src/app/registration/registration-card.tsx
index bade82fd8..a2ef9fc96 100644
--- a/src/app/registration/registration-card.tsx
+++ b/src/app/registration/registration-card.tsx
@@ -4,10 +4,6 @@ import { Registration } from '@ory/elements-react/theme'
 import type { ComponentProps } from 'react'
 import { oryComponents } from '@/app/login/components'
 
-// Client wrapper around <Registration>, mirroring <LoginCard>. The component
-// overrides (functions) can't cross the server→client boundary, so they're
-// applied here. The same `oryComponents` set powers both flows — the header and
-// footer branch on the flow type internally.
 type RegistrationProps = ComponentProps<typeof Registration>
 
 export function RegistrationCard({
diff --git a/src/configs/flags.ts b/src/configs/flags.ts
index e9cbf269a..1c2107975 100644
--- a/src/configs/flags.ts
+++ b/src/configs/flags.ts
@@ -30,6 +30,12 @@ export function isOryAuthEnabled() {
   return process.env.AUTH_PROVIDER === 'ory'
 }
 
+// The custom @ory/elements-react login/registration UI is gated to non-production
+// (staging/preview); production keeps Ory auth on but uses its existing flow.
+export function isOryCustomUiEnabled() {
+  return isOryAuthEnabled() && process.env.VERCEL_ENV !== 'production'
+}
+
 // 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/features/auth/oauth-provider-buttons.tsx b/src/features/auth/oauth-provider-buttons.tsx
index ed6adcc65..48712046b 100644
--- a/src/features/auth/oauth-provider-buttons.tsx
+++ b/src/features/auth/oauth-provider-buttons.tsx
@@ -9,11 +9,6 @@ import { AUTH_MIGRATION_IN_PROGRESS } from '@/configs/flags'
 import { signInWithOAuthAction } from '@/core/server/actions/auth-actions'
 import { Button } from '@/ui/primitives/button'
 
-// GitHub's mark is monochrome, so the svgl registry ships light/dark variants;
-// render both and toggle with Tailwind's `dark:` variant (class strategy) so
-// there's no theme-flash. The hidden variant is display:none, so it doesn't
-// affect the button's flex `gap`. GithubLight is the dark mark (light mode);
-// GithubDark is the light mark (dark mode).
 function GitHubLogo() {
   return (
     <>
diff --git a/src/proxy.ts b/src/proxy.ts
index 73f4334e0..18f496330 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -5,7 +5,7 @@ import {
   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'
@@ -127,7 +127,8 @@ export async function proxy(request: NextRequest, event: NextFetchEvent) {
 
   // Ory SDK traffic is proxied straight to Kratos before the Auth.js wrapper
   // and auth gate run — those would otherwise rewrite/redirect these paths.
-  if (isOrySdkProxyPath(request.nextUrl.pathname)) {
+  // Only the custom Elements UI (staging/preview) needs this same-origin proxy.
+  if (isOryCustomUiEnabled() && isOrySdkProxyPath(request.nextUrl.pathname)) {
     return oryProxy(request)
   }
 

From 68f7bb24900a518326461f55032f286d28347c31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Thu, 11 Jun 2026 13:01:01 +0200
Subject: [PATCH 11/13] test: inline @ory/nextjs in vitest so proxy suites
 resolve next/server

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.
---
 vitest.config.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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/],
       },
     },
   },

From 16c3e0b9bbbb1dd0e4bc40b90f5db75f2c162cad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Thu, 11 Jun 2026 14:19:06 +0200
Subject: [PATCH 12/13] refactor(auth): gate custom Ory UI on
 NEXT_PUBLIC_ORY_CUSTOM_UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .env.example         |  3 +++
 src/configs/flags.ts | 11 ++++++++---
 src/lib/env.ts       |  5 +++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index cf8583164..ce101fdcb 100644
--- a/.env.example
+++ b/.env.example
@@ -33,6 +33,9 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 ### page. Self-hosted: the Kratos public endpoint (harness default :4433).
 ### Ory Network: same value as ORY_SDK_URL.
 # NEXT_PUBLIC_ORY_SDK_URL=http://localhost:4433
+### Set to 1 to enable the custom @ory/elements-react login/registration UI
+### (staging/preview and local dev). Leave unset in production to keep /sign-in.
+# NEXT_PUBLIC_ORY_CUSTOM_UI=1
 ### OAuth2 client credentials issued by Ory for this dashboard deployment
 # ORY_OAUTH2_CLIENT_ID=
 # ORY_OAUTH2_CLIENT_SECRET=
diff --git a/src/configs/flags.ts b/src/configs/flags.ts
index 1c2107975..a15386270 100644
--- a/src/configs/flags.ts
+++ b/src/configs/flags.ts
@@ -30,10 +30,15 @@ export function isOryAuthEnabled() {
   return process.env.AUTH_PROVIDER === 'ory'
 }
 
-// The custom @ory/elements-react login/registration UI is gated to non-production
-// (staging/preview); production keeps Ory auth on but uses its existing flow.
+// 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.VERCEL_ENV !== 'production'
+  return isOryAuthEnabled() && process.env.NEXT_PUBLIC_ORY_CUSTOM_UI === '1'
 }
 
 // Freezes interactive auth entry points while we migrate identity stores.
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 086ab8e67..3405fec9e 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -87,6 +87,11 @@ export const clientSchema = z.object({
   // 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)

From 4c702d54f63cc3ec999719871b18eafbfb885f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Huvar?= <lukas@huvar.cz>
Date: Thu, 11 Jun 2026 15:46:58 +0200
Subject: [PATCH 13/13] fix(auth): forward Ory SDK paths to Kratos before the
 auth-session bypass

/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.
---
 src/proxy.ts                    | 17 ++++++++------
 tests/integration/proxy.test.ts | 39 +++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/proxy.ts b/src/proxy.ts
index 18f496330..42d68287c 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -121,17 +121,20 @@ function isOrySdkProxyPath(pathname: string): boolean {
 export async function proxy(request: NextRequest, event: NextFetchEvent) {
   const plan = classifyProxyRequest(request.nextUrl.pathname)
 
-  if (!isOryAuthEnabled() || !plan.needsOryAuthJsSession) {
-    return proxyCore(request, plan)
-  }
-
-  // Ory SDK traffic is proxied straight to Kratos before the Auth.js wrapper
-  // and auth gate run — those would otherwise rewrite/redirect these paths.
-  // Only the custom Elements UI (staging/preview) needs this same-origin proxy.
+  // 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)
+  }
+
   return proxyWithOryAuth(request, event, 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()
+    })
+  })
 })