At Hexmos, we needed a versatile login component for our LiveAPI product that could be reused across multiple applications.
With performance and reusability in mind, we chose Solid.js to build the component, leveraging server-side rendering (SSR) to optimize the user experience.
You can check out the LiveAPI login system in action here:
👉 LiveAPI Login
How We Built It
1. Creating the Login Component
We started by building the login logic in a standalone repository using Solid.js.
Solid’s reactivity and lightweight runtime allowed us to create a performant login flow with dynamic state management.
2. Packaging the Component
To make the component reusable, we encapsulated it as an npm package.
This approach lets us integrate the login component into multiple projects without duplicating code.
3. JWT Integration
The component communicates with our authentication backend to handle login requests.
Upon successful authentication, it throws out a JWT (JSON Web Token).
This token is then used for secure communication between the client and backend services.
4. SSO Made Simple with iFrames
One of the standout features of our implementation is its versatility.
We designed the login component to be embeddable as an iframe.
By rendering it via a string, any application can effortlessly integrate the login flow without dealing with complex setups.
Why Use Solid.js?
- SSR Support: Solid.js ensures a smooth, fast, and SEO-friendly login experience with its built-in server-side rendering capabilities.
- Fine-Grained Reactivity: The reactivity model allows precise updates, ensuring the login flow is snappy and responsive.
- Reusable Components: Encapsulating the logic into an npm package aligns with our goal of modular and maintainable code.
Watch this 100 second video on Solid
How to Use the Package
Using our login component in your app is straightforward:
- Install the npm package
npm install @hexmos/login-component
- Embed the Login Component via iFrame We can render the login UI using an iframe, simplifying integration for any frontend:
<iframe src="https://hexmos.com/login?redirectUrl=<your-app-url>" width="400" height="600"></iframe>
- Handle the JWT After the user logs in, the component emits a JWT, which can be retrieved and stored in the app for secure API requests.
The Results
- Reusability: A single, centralized login system across our apps.
- Efficiency: Minimal code duplication and easy integration via iframes.
- Scalability: The npm package approach allows seamless updates and improvements.
Try It Yourself
Curious to see it in action? Check out our LiveAPI Login at https://hexmos.com/liveapi.
Using the power of Solid.js, SSR, and modular packaging, we’ve crafted a login solution that’s performant for our expanding product suite.
We’d love to hear how you approach building reusable components! Let us know in the comments or reach out to collaborate.
Top comments (0)