Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.
At Hexmos, we needed a versatile login component 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.
/liveapi)
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 app- Efficiency: Minimal code duplication and easy integration via iframes.
- Scalability: The npm package approach allows seamless updates and improvements.
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.
I’ve been building FreeDevTools.
A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.
Any feedback or contributors are welcome!
It’s online, open-source, and ready for anyone to use.
👉 Check it out: FreeDevTools
⭐ Star it on GitHub: freedevtools
Let’s make it even better together.
Top comments (0)