elements-react: settings success toast is lost when return_to is set; need a supported hook to influence the post-submit redirect
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 22/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- nextjs, react, typescript
调研方向
Start in onSubmitSettings.ts, where onSuccess runs before handleContinueWith, and read how handleContinueWith and setFlowContainer decide between redirecting and updating the flow. SettingsMessageToaster is the component that reads flow.ui.messages. The issue offers three options (an onSuccess return value, exposing onRedirect on the provider, or documenting the mutation contract), so a maintainer must pick one before code. Done means that a settings save with return_to shows the success toast under the chosen contract, with a test.
由索引模型根据 Issue 内容生成。
描述
Summary
@ory/elements-react: when a settings flow is initialised with return_to, a successful save never shows the success toast. The only way to keep the toast today is to mutate the flow object inside onSuccess, which works but is not a documented contract. Request: a supported hook for influencing where Elements goes after a successful submit.
Tested on @ory/elements-react 1.2.1 and current main, Next.js 15 app router, Ory Network.
What happens
onSubmitSettings.ts:
const body = await res.value()
await onSuccess?.({ flowType, method, flow: body })
const didContinueWith = handleContinueWith(body.continue_with, { onRedirect })
if (didContinueWith) return
setFlowContainer({ flow: body, flowType })
On browser JSON requests Kratos always attaches continue_with: [{ action: "redirect_browser_to", redirect_browser_to: <return_to> }] on success (selfservice/flow/settings/hook.go, NewContinueWithRedirectBrowserTo(returnTo)), and redirect_browser_to is the raw return_to with no flow= appended. So with return_to set, handleContinueWith always redirects and setFlowContainer is never reached. SettingsMessageToaster reads flow.ui.messages from the rendered flow, so the "Your changes have been saved!" toast never fires. It only shows when Kratos falls back to settings_ui_url?flow=<id> (no return_to).
Any app that uses return_to to carry page state through the settings flow (multi-brand query params, deep links back into the app) loses success feedback.
What people do today
Two workarounds, both verified live:
- In
onSuccess, stashflow.ui.messages(session storage or router state) and render it after the redirect. - In
onSuccess, mutatecontinue_with: appendflow=<completed id>to theredirect_browser_toentry that equalsflow.return_to. Elements then redirects to<return_to>&flow=<id>, the page fetches the completed flow (state: success,ui.messagespresent), and the built-in toast shows.
Option 2 is what a customer has in production. It works only because onSuccess receives the same object by reference that handleContinueWith reads afterwards, and because the callback is awaited first. Neither is documented; the onSuccess docs say "invoked after a successful submission, before the default behavior (redirect, flow update)". A refactor that clones the flow, freezes it, or reorders the two calls silently breaks it.
Request
One of, in order of preference:
- Let
onSuccessreturn a value that overrides the default behaviour, e.g.{ redirectTo?: string; continueWith?: ContinueWith[]; preventDefault?: boolean }. Keeps the existing event shape; by-reference mutation becomes unnecessary. - Expose
onRedirecton<Settings>/OryProvider(it is already a parameter ofonSubmitSettingsand the nextjs package hasuseOnRedirect), so apps can intercept theredirect_browser_totarget. - If neither: document that the flow passed to
onSuccessis the same objecthandleContinueWithreads and that mutations are honoured, and add a test so it stays that way.
Also worth noting in the onSuccess docs that with return_to set the toast does not show, with a pointer to the workaround.
Repro
- Project with
settings.ui_url = <app>/settings,<app>inallowed_return_urls. - Open
<kratos>/self-service/settings/browser?return_to=<app>/settings?brand=x. - Save the profile form. Observe: redirect to
<app>/settings?brand=x, new flow started by the page, no toast. - Add
onSuccess={(ev) => { for (const cw of ev.flow.continue_with ?? []) if (cw.action === "redirect_browser_to" && cw.redirect_browser_to === ev.flow.return_to) cw.redirect_browser_to += "&flow=" + ev.flow.id }}. Observe: redirect to<app>/settings?brand=x&flow=<id>, toast shows.
Console from the second case:
[onSuccess] {"state":"success","messages":[{"id":1050001,"text":"Your changes have been saved!","type":"success"}],
"continue_with":[{"action":"redirect_browser_to","redirect_browser_to":"http://localhost:3000/settings?brand=blick&flow=31b5031e-…"}]}
Side note observed while testing: because ui.messages stays on the completed flow, reloading ?flow=<id> shows the toast again. Same as Kratos' own default redirect, so probably fine, but a consumer-side "mark as seen" would need the hook above too.
- 主要语言
- TypeScript
- 星标
- 187
- 派生
- 80
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
ory/elements 的其他 Issue
-
Needs Triage
难度 2/5 1-3 小时 新手友好度 70/100
-
enhancement
难度 3/5 1-2 天 新手友好度 72/100
-
good first issue help wanted upstream
难度 2/5 1-3 小时 新手友好度 45/100
-
good first issue help wanted upstream
难度 3/5 1-2 天 新手友好度 25/100
-
Needs Triage
难度 3/5 1-2 天 新手友好度 52/100
相似的 Issue
-
docs(api): openapi.yaml still documents gif-tools optimize colors as 2-256 instead of 2, 4, 16, 256未关闭area: backend documentation priority: low
难度 2/5 1-3 小时 新手友好度 84/100
snapotter-hq/SnapOtter#2919 ·
维护者通常 1 天内回复
-
accepted :+1: bug db/redis
难度 2/5 1-3 小时 新手友好度 76/100
beekeeper-studio/beekeeper-studio#4882 · 1 条评论 ·
维护者通常 1 天内回复
-
ready-for-triage
难度 2/5 1-3 小时 新手友好度 72/100
konflux-ci/konflux-ui#1630 · 1 条评论 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 67/100
ahmedkhaleel2004/gitdiagram#233 ·
-
难度 2/5 1-3 小时 新手友好度 72/100
simkimsia/netlify-axi#19 ·
维护者通常 1 天内回复