XState & Amplify <Authenticator>

I tweet about remote, JS/Node/React, UX, and improving developer experiences. Staff @Stripe, opinions my own.

2y ago

Here's a 🧵 on why I bet big on @statelyai for the rewrite of @AWSAmplify's cross-platform, cross-framework <Authenticator>👇

#xstate #react #angular #vue #reactnative

Rewrites are scary!

An estimated 80% of Amplify's customer apps rely on Auth & our Authenticator. 😳

Why rebuild what's working? 🤔

(We event rewrote it with Web Components the previous year!)

As documented in the RFC, the WC implementation was largely a lateral move that improved development, but at the cost of CX:

😃 We only had to write our UIs once!

😤 But they didn't work with RN

😤 Logic was tightly coupled to UI

Customer issues came down to

Correctness – Auth is complex! Getting it wrong means losing customers, revenue, & breaking trust.
Escape hatches – When customers need to go beyond what our Authenticator provides, did they lose all that functionality? (spoiler: yes)

To make matters worse, we didn't have a "source of truth" for how the UI was supposed to work – no exhaustive spec, no flow chart.

Just internal experts and a history of edge-cases.

This is where #xstate shines – getting complexity out of our heads and into a visualization:

We could finally see what we've missed, where gaps in behavior were, and re-use it across all JS runtimes!

Previously, rolling your own Authenticator meant losing out on correctness – can you imagine everyone writing this logic each time??

Today, customers can `useAuthenticator()` and get access to a wrapper around our state machine.

Finally, testing the machine's transitions aren't enough when we have framework-specific UIs built on top of them.

Rather than testing the machine alone, we created BDD-style Cucumber specs that validates the same behavior across all supported frameworks:

Thanks to @kieranbosgood for the tweet that prompted this 🙏

Resources:

Thread

Comments