Add SDK Components for React, Angular, Vue (Pre-built UI Components)

[alex-fusionauth]

Pre-built UI Components for React, Angular, and Vue SDKs

Problem

FusionAuth's current SDKs, particularly the JavaScript SDK, primarily focus on interacting with the Hosted Backend. While this provides robust authentication functionalities, it places the burden of building user interfaces (UIs) for common authentication flows entirely on the developer. This significantly increases development time and effort, especially for applications using popular frontend frameworks like React, Angular, and Vue.

This approach puts FusionAuth at a disadvantage compared to leading competitors such as Auth0, Frontegg, and Clerk, which offer ready-to-use, customizable UI components for essential features such as:

• Login
• Sign-up
• Password Reset
• User Profile Management
• Multi-factor Authentication (MFA)
• Account Linking

Auth0, for instance, provides their "Universal Login" experience, which is a highly customizable, hosted login page that handles various authentication flows, reducing the need for developers to build these UIs from scratch.
* Examples/Documentation: Auth0 Universal Login, Customize Universal Login Page Templates
* Related GitHub Repository: auth0/universal-login

Frontegg offers ready-to-use components for common functionalities like login, signup, password reset, profile management, and more. They also offer frontend drop-in components that you can customize within your application.
* Examples/Documentation: Frontegg Customizations Overview, Building AI Agents with Frontegg AI SDK (includes React frontend example)
* Related GitHub Repositories: frontegg/frontegg-react, frontegg/frontegg-angular, frontegg/frontegg-vue

Clerk also offers such components, providing a comprehensive suite designed to seamlessly integrate authentication and multi-tenancy.
* Examples/Documentation: Clerk Component Reference, Clerk SignIn Component Example
* Related GitHub Repository: clerk/javascript (Monorepo for their JS SDKs, including React, Next.js, etc.)

These competitors demonstrate the immense value of providing developers with "drop-in" UI components that can be easily integrated and customized, significantly accelerating frontend development and improving the developer experience.

---

Solution

To enhance the developer experience and accelerate frontend development, FusionAuth should provide first-class, pre-built UI components within its SDKs for popular frameworks, starting with React, Angular, and Vue.

These components should:

• Cover common authentication and user management flows: This includes, but is not limited to, login, registration, password reset, profile editing, and MFA setup.
• Be easily customizable: Developers should be able to style and modify the components to match their application's look and feel, either through props, CSS variables, or theming options.
• Be framework-idiomatic: The components should integrate seamlessly with each framework's ecosystem and best practices.
• Be well-documented: Clear documentation with examples for integration and customization is crucial.

Implementing this would empower developers to rapidly integrate FusionAuth's authentication services into their applications with minimal UI development effort, making FusionAuth a more attractive and efficient solution.

Alternatives/Workarounds

Currently, developers must:

• Build all UI components from scratch: This involves significant time and effort in designing, developing, and testing UI elements for every authentication flow.
• Utilize community-contributed components (if available): This can introduce inconsistencies, maintenance challenges, and potential security risks if not properly vetted.

Additional Context

Providing pre-built UI components would not only streamline development but also:

• Reduce time-to-market for new applications and features.
• Improve consistency in user authentication experiences across different applications.
• Lower the barrier to entry for new FusionAuth users, particularly those less experienced with frontend development.
• Demonstrate FusionAuth's commitment to a comprehensive and developer-friendly ecosystem.

---

Community Guidelines

All issues filed in this repository must abide by the [FusionAuth community guidelines](https://fusionauth.io/community/forum/topic/1000/code-of-conduct).

How to Vote

Please give us a thumbs up or thumbs down as a reaction to help us prioritize this feature. Feel free to comment if you have a particular need or specific ideas on how these components should work.

[mooreds]

Thanks for the detailed outline @alex-fusionauth . We've discussed this for some time, but it's great to get this on the GitHub issues list for customers and users to weigh in on.

If anyone reading this has concrete use cases they want to share, we always love to read those.

Things I think about when considering this effort:

• Auth0 doesn't have JavaScript components, do they? I believe they always require a redirect. I would consider our themes to be equivalent to what they offer, with better encapsulation. Perhaps a good interim measure would be to either invest in simple themes to make them more capable or invest in advanced themes to improve the developer experience. Maybe I'm missing something about Auth0 though.
• For React/Vue/Angular SDK components, we want to consider the security implications carefully. The end result of the Authorization Code grant is an access token, which is a bearer token. If you make that available to the browser, like a component would, then JavaScript can exfiltrate it. Options include: in-memory storage in the SDK or client bound tokens (MTLS, DPoP). With the prompt parameter work, in memory storage might be possible, but would require updates to our React/Vue/Angular SDKs.
• Desired feature parity. We support 15+ workflows and would need to decide whether we needed complete parity or whether there is a relevant subset of functionality that would help our users and customers. Or whether they'd be unpleasantly surprised with any gap between workflows supported by "hosted login pages" and SDK components. We'd also want to think about how to maintain these going forward as new pages and functionality are added.