PropelAuth's Customizable Login Components

At PropelAuth, our product is fully focused on helping developers get their B2B products live as quickly as possible. To achieve that, we provide a full set of UIs for your customers to use, including signup, login, account management, and team/organization management.

These hosted pages have been great at enabling companies to launch quickly. The experience is similar to Stripe Checkout - you pick your color scheme, configure some settings about authentication, and you are done. What we’ve seen is that, as our customers grow, they want more control over the design of these pages.

Bring your own component library (Beta Launch)

That’s why we decided to build our own React-based component library which focuses on customizability. The idea is that instead of relying on our styles, our fonts, and our border-radius (border-radii?), every component can be restyled or overridden completely.

The library manages state for you, so you don’t have to worry about questions like “When should I display a 2FA prompt?” and all you have to do is take your blank canvas and make it your own.

You start off with a (mostly) unstyled login component, like this:

Each element of the page can have a custom class/style applied, which is great for libraries like Tailwind. You can also completely override components with your own or from popular component libraries like Chakra, Mantine, MUI, and more.

We had a lot of fun with this internally, and to make sure it’s truly customizable, we took that unstyled, ugly starting page and recreated a few popular login pages, like Github:

We also made login pages using CSS libraries designed to look like Windows 98, Windows XP, and Windows 7:

And because we are also big fans of three.js, here’s a very peaceful login page:

That gets… admittedly a little bit aggressive when you type in an incorrect password:

Split-screen Signup Page?

One really common type of signup page is a split-screen signup page. This provides you with extra screen space to sell the product, and here’s a quick example that we made with Chakra:

Send us your creations!

The docs for getting started are here. We’re incredibly excited to see what you all will build! If you have any feedback, please share it with us at support@propelauth.com. And if you want to share your creations with the world, tweet us at @PropelAuth.

Thank you to everyone who provided us feedback over the last few weeks, we couldn’t have done it without you.