pwa-auth: A New Sign-in Component for the Modern Web
We’re releasing pwa-auth, a new open source web component that lets your users sign-in through Microsoft, Google, Facebook, or Apple. Try it here.
It’s modern: using new web APIs to speed through sign-in
It’s flexible: using Web Components and CSS shadow parts so you can use it anywhere and customize it to your heart’s content
It’s lightweight: lazy loading auth libraries as needed
It’s progressive: giving the core sign-in experience on older browsers, lighting up on newer browsers
It’s free and open source: because we ❤ you
The web today is a bad place for users wanting to sign-up/sign-in. Nearly every site wants you to sign-up, requiring you to share your email and create a new password. Users, overwhelmed with the number of passwords they have, end up reusing passwords across multiple services, or using insecure passwords.
It’s bad for developers, too: web devs create register and sign-in flows, as well as “forgot my password”, email delivery, expiring tokens for confirm email and password reset, email address changes, salting and hashing passwords, login cooldowns to prevent brute force attacks, and more. Building secure sign-in/sign-up flows is nontrivial.
Sites like haveibeenpwned.com show just how bad the situation is: over half a billion passwords leaked in data breaches, yet users continue using them. Password managers are helping to address the problem, but these are not yet mainstream.
Sign In with X
Many sites now offer an alternative: Sign In with X, where X is Facebook, Google, Microsoft, Twitter, or some other well-known identity.
In this model, users don’t need new passwords; they sign-in with their existing account. Your app still gets what it needs — a user with a working email address — while leaving the technical heavy lifting to the sign-in provider.
While this model isn’t perfect, it grants some quick wins:
- Users don’t have to remember new passwords.
- Users are encouraged towards multi-factor authentication. (In fact, some work accounts require it.)
- The sign-in providers tend to have more security around suspicious activity, e.g. signing in from an unknown location, invalid password cooldowns, etc.
pwa-auth: Sign-in for the modern web
It’s in that vein we’ve built pwa-auth: a new web component from the PWABuilder team. While there are various sign-in components available to developers today, pwa-auth offers something new:
· Modern: pwa-auth uses the web’s new Credential Management APIs to enable instant successive sign-ins without the need for bulky OAuth popups or redirects.
· Works everywhere: pwa-auth is a standards-compliant Web Component. This means you can use it in any framework — React, Angular, Vue, Aurelia — or no framework at all. It’s just HTML + JavaScript + CSS.
· Lightweight: pwa-auth uses 3rd party authentication libraries to sign-in to each service. But unlike other solutions, pwa-auth lazy loads these libraries only when the user attempts to sign-in. For example, GApi doesn’t get loaded unless the user tries to sign-in with Google. MSAL doesn’t get loaded unless the user tries to sign-in with Microsoft. And so on. The end result is, pwa-auth is a tiny 12k compressed web component.
· Customizable: pwa-auth utilizes CSS shadow parts to enable totally customizable look and feel. It also offers a headless mode; bring your own UI and hook it up to pwa-auth’s authentication flow.
· Progressive: Despite using new modern web APIs like Credential Management, pwa-auth falls back to standard OAuth flows for browsers that don’t support the new APIs. And, as a standards-compliant web component, polyfills are available for IE and older browsers that don’t support web components.
· Consistent API: no matter which provider the user signs-in with, your app receives the user’s name, email, and profile picture in a single, consistent API. Additionally, your app can access the raw sign-in data from the provider (e.g. authentication token).
· Open source and free: pwa-auth is an open source project and totally free to use. We’re releasing this because we want to make it easier to build better web apps.
If that piques your interest, try out the interactive Getting Started docs now. Read on for more details.
The Basics
To use pwa-auth, you add a non-blocking module script to your page:
Then, you add the pwa-auth Sign In button with one or more keys to your HTML:
Now you have a sign-in button that lets your users sign-in with Microsoft, Google, Facebook, or Apple.
Your app will want to know when a user has signed in. To do that, listen for the signin-completed event:
You’re done — your users can now sign-in to your app using Facebook, Microsoft, Google, or Apple. 😎
But maybe you want more. You may ask, “Why is this auth component different from all others?” After all, this post promised something modern, flexible, progressive, and lightweight. If that’s you, read on to see why this is something new.
Flexible
pwa-auth is a standards-based Web Component and utilizes CSS shadow parts so you can use it anywhere — React, Angular, Vue, or no framework at all — and style it down to the last pixel.
By default, pwa-auth displays as a Sign In dropdown button:
Maybe your app already has a sign-in button and flow; in which case, you may want pwa-auth to render as a list of buttons:
pwa-auth also supports headless mode — bring your own UI — just hook up your existing UI to pwa-auth’s sign-in flow:
Finally, pwa-auth is fully stylable using CSS shadow parts.
See our styling docs for more info.
Fast successive sign-ins via modern web APIs
Browser vendors and web standards groups recognize the problem of sign-ins on the web today and are addressing it from several angles. Once such angle is the new Credential Management APIs. These web standards enable instantaneous successive sign-ins, and are currently supported in Chrome, Edge, Opera, and other Chromium-based browsers.
In the spirit of the progressive web, pwa-auth uses the new Credential Management APIs where available and otherwise falls back to standard OAuth flows.
What does it look like? The first time the user sees nothing special; just the ordinary OAuth popup/redirect asking for sign-in confirmation:
When the user signs-in that first time, the browser will prompt to save your credentials:
But now when the user comes back to your app to sign-in again, he’ll be instantly signed-in with his saved credentials, no OAuth popups/redirects needed!
Above: the user clicked the Sign In button, and instantly was signed in; no popups or redirects needed. The browser typically shows a “Signing in as…” status message for a brief moment; meanwhile, your user is signed in instantly. 😎
This instantaneous sign-in is enabled through the new Credential Management APIs. This is pwa-auth’s default credential mode: silent.
pwa-auth has two other credential modes: prompt and none.
Prompt mode, as you might imagine, prompts the user to confirm their sign-in:
Above: the user clicked the gray Sign In button, and the browser prompts them to sign-in using their saved credential.
This is a good option for when the user has more than one account (e.g. a work and personal account). When the user has signed-in with more than one account, prompt mode will ask which credential to use:
pwa-auth also supports turning off credential mode, in which case the Sign In button always shows the dropdown.
Recap
pwa-auth is a new open source Web Component that lets your users sign-in with their Microsoft, Google, Facebook, or Apple account.
It uses new web APIs to enable fast, frictionless successive sign-ins, with fallbacks for old browsers.
You can use it anywhere, regardless of your UI framework, because it’s built as a standards-compliant Web Component.
It’s customizable and stylable down to the very last pixel.
It’s lightweight, lazy loading auth libraries only when the user tries to sign-in.
It’s open source and free, built with ❤ by the PWABuilder team, because we want a better web.
Check out interactive Getting Started docs to try it out.
Thanks for reading, friends!
