Skip to content

fix(elements): add restart button when flow state has error#2580

Open
d02ev wants to merge 1 commit intoteamhanko:mainfrom
d02ev:fix/2487-reload-button-on-flow-expired
Open

fix(elements): add restart button when flow state has error#2580
d02ev wants to merge 1 commit intoteamhanko:mainfrom
d02ev:fix/2487-reload-button-on-flow-expired

Conversation

@d02ev
Copy link
Copy Markdown

@d02ev d02ev commented Apr 2, 2026

Summary

When a user's session expires during a login flow (e.g., flow_expired_error), they now see a 'Restart' button to reload the login state instead of being stuck with no way to recover.

Problem

In issue #2487, users reported that when their session expires during a login flow (e.g., entering email, waiting for session to expire, then clicking back), they see an error message but no way to restart or reload the flow. The issue is in Form.tsx - it doesn't render anything when flowAction is not enabled, leaving users stuck.

Solution

  1. Modified Form.tsx (frontend/elements/src/components/form/Form.tsx):
    • Added optional fallbackLabel and onFallbackClick props
    • When the form doesn't render (no flowAction or action not enabled), shows a fallback button if these props are provided
  2. Modified LoginInitPage.tsx (frontend/elements/src/pages/LoginInitPage.tsx):
    • Added onRestartClick callback that calls init("login") to restart the flow
    • Passes fallback props to Form component when there's a flow error (flowState.error?.code)
  3. Added translations in all 8 languages (en, de, fr, zh, bn, pt-BR, nl, it)

Why This Works

  • The Form component now supports showing a fallback button when the form itself cannot be rendered due to disabled/expired flow actions
  • LoginInitPage detects flow errors and provides the restart functionality
  • The flow error message already exists (flow_expired_error: "The session has expired, please click the button to restart.") - this fix provides the button the message refers to

Fixes #2487

When a user's session expires during a login flow (e.g., flow_expired_error),
they now see a 'Restart' button to reload the login state instead of being
stuck with no way to recover.

- Modified Form.tsx to accept optional fallbackLabel and onFallbackClick props
- Added onRestartClick handler in LoginInitPage to restart the login flow
- Shows restart button when flowState.error?.code is present
- Added 'restart' translation key in all 8 languages (en, de, fr, zh, bn, pt-BR, nl, it)

Fixes: teamhanko#2487
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

If no flow state (e.g. some error states), user gets no reload button

1 participant