Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Hanko elements with flow api #1443

Merged
merged 9 commits into from
May 22, 2024

Conversation

bjoern-m
Copy link
Contributor

@bjoern-m bjoern-m commented Apr 22, 2024

Description

  • Makes hanko-elements work with the new flow API
  • Introduces new web components <hanko-login> and <hanko-registration>

Implementation

The AppProvider now contains the state handlers used by the SDK to dispatch the flow api states. A state handler either handles the respective state itself and performs another request to the flow API, or leads to rendering of a page. Each page corresponds to a state in the flow and includes the logic to collect user input and perform a flow action.

Because flow states cannot be mapped 1:1 to a page, the difficultly arises that on one hand, when a new state occurs, the page should not change, and on the other hand, the page may need to change even though the state has not changed and no further request to the flow API has been made yet.

An example of the first case would be that the flow API jumps into the passkey-onboarding sub-flow, but the login-init page should still be displayed. However, this page can only be generated with the response of the login-init state. An example of the second case would be that you are currently in the profile state, and when clicking "delete account", you should land on a different page, although this is not represented by a state.

To enable these cases, including error handling and controlling other states in the UI (currently enabled/disabled form fields and links, or the loading spinner on the corresponding UI element, etc.), some useState hooks have been moved to the AppProvider so that certain states can be established at a higher level. Also, some pages use a hook to cache the state object, so that a re-rendering of the respective page, which refers to a specific state, is possible even though the flow is currently in a different state. Other changes include generating the forms and input fields based on the information from the flow API response.

Todos

  • Conditional UI support
  • oAuth support
  • SDK error handling needs to be reworked

@bjoern-m bjoern-m changed the title Hanko elements with flow api feat: Hanko elements with flow api Apr 23, 2024
@bjoern-m bjoern-m force-pushed the hanko-elements-with-flow-api branch from aec9424 to 0e4028f Compare April 29, 2024 15:43
@bjoern-m bjoern-m marked this pull request as ready for review April 29, 2024 15:43
@bjoern-m bjoern-m merged commit a32589b into introduce_flowpilot May 22, 2024
@bjoern-m bjoern-m deleted the hanko-elements-with-flow-api branch May 22, 2024 10:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: ✅ Recently closed
Development

Successfully merging this pull request may close these issues.

None yet

2 participants