The story(book) behind showcasing our SDKs flexibility

Latest

August 12, 2021

Author: Stytch Team

How Storybook helps us showcase out-of-the-box authentication solutions that work with your brand

When we tell people that Stytch offers fully customizable SDKs for passwordless authentication, we often get asked, “but how customizable are they really?”

The answer is: very.

Our SDKs adapt to the look and feel of your brand, so your authentication flows integrate seamlessly with the rest of your app—without the heavy lifting that usually entails for engineers.

To demonstrate just how flexible they are, we work with Storybook, an open-source tool that makes it simple to explore and document UI components.

Storybook displays our javascript SDK and its customization options, so you can experience how easy it is to make our turnkey authentication solutions your own.

The design dilemma

A strong visual identity is one of the key elements that differentiate a brand from its competitors. It’s what allows you to recognize Robinhood green or Coinbase blue, for instance, among a sea of investment and trading apps.

Standout design means paying attention to the details of every interface; but what if you could own all of those details without spending time on complex infrastructure like authentication?

When it comes to authentication solutions, traditionally there’s been a tradeoff between simplicity and design.

Direct API integrations are great when you want to completely own the user experience of your app (that’s why we offer this integration option for Stytch customers!), but they can require more hands-on attention than many engineering teams can spare.

On the other hand, pre-built SDKs save you a lot of development time, but they’re often inflexible and, to be honest, uninspiring. With most SDK solutions, your app’s authentication flow will look and run just like every other authentication flow in the industry.

Simple, composable UI

If you ask us, you shouldn’t have to sacrifice your brand’s unique personality and style to make authentication a breeze for your users. And we’ve created adaptable, ready-to-use SDK solutions so you don’t have to.

Typically, SDK authentication solutions let you add one or two brand colors and a logo—but that’s about it. In most cases, you’re offered a basic widget that locks you into a predetermined layout.

We designed our SDKs to introduce a much wider range of options, from adjusting the size and shape of your input button and CTA to modifying the color scheme and text of your error message.

Enter Storybook

When Stytch first launched, our customizable SDKs were ready to go and performing well. 

The trouble was, users were so accustomed to rigid SDK products that they didn’t realize how many elements they could configure.

We needed an intuitive, hands-on way for users to implement and visualize their edits instantly, without the hassle of a full integration. When we looked into our options, Storybook immediately stood out as the perfect solution.

With Storybook, our users can toggle between components and see independent configurations play out in real time, allowing them to try out different effects and features until they find the ones that fit.

Stytch and Storybook in action

Let’s run through an example of our customizable SDKs as displayed through Storybook.

Say you want to embed a passwordless authentication solution—like an email magic link—onto an existing login page, right next to your traditional username and password fields.

Most SDK products will make you redirect to a new page, and they’ll come with a fixed, uneditable header text that reads something like “Sign Up” or “Log In.”

If this header text doesn’t meet your needs, the styling of the widget doesn’t fit with your brand or you don’t want to redirect to a new page, you’re usually out of options.

But with Stytch’s flexible SDKs you can customize everything from the look and feel of the button to embedding the SDK within a page of your app, and you can try it all out in minutes with Storybook.

The bottom line

Your authentication flow is an integral part of your app, and it should be made to match—but you shouldn’t have to spend months building boilerplate experiences.

With our simple, customizable SDKs, you can delight your users with the best of your brand, right out of the gate.

What can you do with Stytch’s flexible solutions?

Check out our SDK on Storybook and experiment with a variety of UI configuration tools. Or, if you’re ready to make a move, head to our SDK docs to learn more about our passwordless authentication solutions. Once you’re ready, you can start building with Stytch here.

SHARE

Get started with Stytch