Fix social button rendering issue with Asgardeo v2 (Thunder) Flows API

[brionmario]

Purpose

This pull request addresses a social button rendering issue in v2 and introduces several improvements to the embedded authentication flow, including support for a divider component, enhanced internationalization, and more robust handling of social login buttons. The changes also improve code clarity and maintainability by refining type definitions and component logic.

Authentication Flow Enhancements:

• Added support for a new Divider component type (EmbeddedFlowComponentType.Divider) for visual separation within authentication flows, and updated the component factory to render this divider appropriately. [1] [2]
• Improved handling of social login buttons: detection now considers the button variant, allowing more accurate rendering of branded social buttons (Google, GitHub, Facebook, Microsoft, LinkedIn, Ethereum) even when the button text or variant changes. [1] [2] [3]

Internationalization (i18n) Improvements:

• Added a new translation key 'elements.display.divider.or_separator' to the i18n model and provided translations for all supported languages (English, French, Hindi, Japanese, Portuguese (Brazil and Portugal), Sinhala, Tamil, Telugu). [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Type and API Refinements:

• Expanded and improved documentation for enums in embedded-flow-v2.ts, including EmbeddedFlowComponentType, EmbeddedFlowActionVariant, EmbeddedFlowTextVariant, and EmbeddedFlowEventType, making the API clearer and easier to use. [1] [2] [3] [4]
• Updated function signatures throughout the React component factory and sign-in/sign-up flows to allow skipping validation for certain actions (e.g., social logins or triggers), providing a more flexible and robust form handling experience. [1] [2] [3] [4] [5]

Bug Fixes:

• Fixed an issue where social buttons were not rendered correctly in v2. (.changeset/every-adults-study.md .changeset/every-adults-study.mdR1-R6)

Component Structure Improvements:

• Updated the rendering of block components to wrap their children in a <form> element, improving semantic structure and accessibility.

Related Issues

• feat: provide initial provision for asgardeo/thunder runtime #212

Related PRs

• N/A

Checklist

• Followed the CONTRIBUTING guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?

[asgardeo-github-bot]

🦋 Changeset detected

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.