At SpartanAuth we aim to make authentication as simple as possible. Simplicity prevents a ton of security and usability nightmares. So today we are going to talk about our login widget.

Why Build a Widget?

TLDR: Usability, branding and ease of proper implementation.

Businesses stand to lose a ton of money if people are unable to sign in to their accounts. “About a third of online purchases are abandoned at checkout because consumers cannot remember their passwords,” from a study conducted jointly by MasterCard and the University of Oxford (source). Because of this, SpartanAuth wants to help others move away from relying on passwords.

Replacing passwords with other highly secure types of authentication can be expensive, complicated, error-prone and hard to use. While SpartanAuth provides an API to allow you to build your own login page, we wanted to provide a complete solution that would make both your user’s experience and your developer’s experience the easiest possible.

While the user’s experience is extremely important, so is branding. A login page needs to welcome the user into your application. That application should be consistent in style and color.

To that end, we decided to build a login widget with all the supported bells and whistles provided by SpartanAuth and configurable to your heart’s content.

Choosing a Tech

Putting a third party’s software into your own application can cause some developers to think twice. We are aware of the hesitation and want to address any potential issues or questions before they arise. To this end, we wanted to build our widget on top of reliable, performant, and minimal technology. We did a lot of research in this area. There is a lot to be said about the frontend framework wars. In the end, all that competition has seriously moved the web frontend world forward in terms of performance and bundle size. We wanted to take advantage of these gains.

While looking for the right technology to use to implement our login widget we set three specific criteria. The technology must:

• be simple to implement in any web environment
• have a minimal bundle size when delivered to the end user
• be a leader in performance

Our first prototype was built in VueJS. We were able to make a decent login window and boy do we like that sweet, sweet reactive programming paradigm. But alas, Vue is far from being light-weight for small components. They even say explicitly that, “it is not ideal to use Vue if you are shipping a single custom element”. We decided to look for some more fitting alternatives.

At the suggestion of our friend Christopher Bradshaw, we found SolidJS. And lo and behold, we found this wonderful blog post with all the goodies about minimizing bundle sizes as well as killing it on performance. The fact that it uses reactive programming is just icing on the cake.

We feel that SolidJS was a solid choice in which to build our login widget. It has nearly vanilla javascript performance, it encourages minimal lines of javascript within your application, it supports Typescript, and the final bundle size is tiny. But, would it allow us to make it easy for developers to use a widget?

Yes! SolidJS has a library made specifically for creating web components. Solid Element.

With the technology chosen it is time to build the widget itself.

Results

Our first SolidJS prototype is showing some real promise. We are able to implement a custom login page using only two lines of code.

<script type="module" crossorigin src="/assets/index.2157afe0.js"></script>

and

<spartan-login start-mode="webAuthn" locale="en" redirect="/app.html"></spartan-login>

The bundle size is small but could be improved upon a lot:

index.668c492a.js            44.63 KiB / gzip: 16.70 KiB

We currently include an i18n library and you can’t argue with the results:

Is it customizable? Currently, you can pass any css into the styles attribute, and it will be applied. We plan on adding more customizations as we go, but for now free rein over all the css is pretty powerful.

Next Steps

The widget currently has basic functionality to prove out the concept. As SpartanAuth’s backend service adds more features we will be updating the widget to support each one in lockstep. In the meantime, keep up to date with us by following our RSS feed and or signing up for our newsletter. We can’t wait to see what you build using SpartanAuth!