Building a Login Component with SSR Support Using Solid.js

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:


👉

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

.

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.