feat(auth): custom Ory Elements login UI#413
Closed
huv1k wants to merge 16 commits into
Closed
Conversation
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)
- Add svgl Google/GitHub logos via shadcn registry (@svgl) - Show provider logo + 'Continue with …' on Ory SSO buttons - GitHub logo toggles light/dark variants via Tailwind dark: variant - Replace bare login divider with an 'or' separator
- Resolve provider via node.attributes.value (stable id) so the logo + 'Continue with …' label render (the provider prop is a display label) - Remove logos/index.ts barrel in favor of direct imports
- Add /register route (page, layout, card) mirroring /login, using @ory/elements-react <Registration> + getRegistrationFlow - Make shared card header/footer/submit-button flow-aware (Sign in vs Sign up; registration footer shows sign-in link + legal copy) - Enable registration in ory config, point registration_ui_url at /register
- Add 'Don't have an account? Sign up' footer to the login card (-> /register) - Move GitHubLogo into oauth-provider-buttons and drop the shared logos/github-logo.tsx; remove GitHub from the Ory SSO provider map
Rename /register route to /registration and update registration_ui_url and the login footer 'Sign up' link to match.
…n-flows # Conflicts: # src/proxy.ts
…to Ory proxy - Drop logos/google-logo.tsx wrapper; oauth-provider-buttons and the Ory SSO button now use the @svgl Google icon directly with sizing - Pass oryConfig.project to createOryMiddleware so Kratos redirect/body URLs are rewritten onto our /login and /registration UIs
- Add isOryCustomUiEnabled() (Ory enabled && VERCEL_ENV !== production) - Gate the proxy Ory-SDK short-circuit and the /login + /registration pages on it; production keeps Ory auth on but uses its existing flow - Drop redundant component-label comments, keeping only core why-notes
proxy.ts now imports createOryMiddleware (@ory/nextjs/middleware), whose ESM bare-imports 'next/server'; inline it like next-auth so vitest resolves Next's exports. Fixes proxy.test.ts and auth-ory-entrypoints.test.ts.
Replace the VERCEL_ENV-based gate with an explicit NEXT_PUBLIC_ORY_CUSTOM_UI flag. isOryCustomUiEnabled() is read in Edge middleware, where VERCEL_ENV/AUTH_PROVIDER are inlined at build time and resolve to undefined in standalone/self-hosted builds (anything but `next dev`) — silently disabling the same-origin Ory proxy. A NEXT_PUBLIC_ flag is readable at request time everywhere and lets the local harness opt in explicitly while production leaves it unset (keeping /sign-in).
…pass /self-service/* classifies as public (needsOryAuthJsSession: false), so the short-circuit ran too late and those requests fell through to Next, breaking custom-UI flow creation and form submits. Move the gated Ory-SDK proxy branch to the top of proxy(). Add a regression test covering both enabled/disabled.
…n-flows # Conflicts: # bun.lock
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Restores the custom Ory Elements login/registration UI originally landed in #380 and reverted in #399.
What this brings back
src/app/login/**,src/app/registration/**)src/configs/ory.ts,src/proxy.ts)Beyond the original #380
Two follow-up commits made after the original PR are included:
16c3e0b9— gate the custom Ory UI behindNEXT_PUBLIC_ORY_CUSTOM_UI4c702d54— forward Ory SDK paths to Kratos before the auth-session bypassNotes
main;bun.lockregenerated (only lockfile conflict on merge).tests/integration/proxy.test.tspassing locally (11/11).