Passkeys Authentication
Based on FIDO Alliance and W3C standards, passkeys are a safer and easier alternative to passwords. With passkeys, users can sign in to apps and websites using a biometric sensor (such as a fingerprint or facial recognition), PIN, or pattern, eliminating the need to remember and manage passwords.
Passkeys are:
- Easier - Users can sign in using a biometric sensor.
- Safer - Passkeys are resistant to phishing, credential stuffing, and other remote attacks.
Creating a Passkey
Before asking your user to create a passkey, ensure their browser is compatible.
The np:login event emitted from the email authentication <np-login> component contains a suggest_passkeys attribute.
It is set to true if the user’s browser supports passkeys. Use it to suggest the passkey creation process only for compatible browsers.
To create a passkey, add the <np-passkey-register> component.
Once the user clicks on this button, the browser will prompt them to create a passkey.
This component will then emit a np:register event once the passkey is created.
<np-passkey-register></np-passkey-register>
<script type="module"> el.addEventListener("np:register", (e) => { // The passkey has been created 🎉 const { id } = e.detail; // The passkey ID. });</script>The np:register event contains the passkey id.
It can be used for further optional administrative operations such as revocation.
Authenticating with Passkeys
The <np-login> component, which allows the user to enter their email address,
also enables the selection of passkeys created on your domain. The user simply has to select it to start authentication with the passkey.
<np-login></np-login>
<script type="module"> // Listen to the 'np:login' event const el = document.querySelector("np-login");
el.addEventListener("np:login", async (e) => { // A session has been created 🎉 const { expires_at, token } = await e.target.getSession(); });</script>What if the user hasn’t created a passkey yet?
Don’t worry, the <np-login> component allows the user to enter their email address (as a fallback) and will send them an authentication link.
You are done!
Once the session is established, you only need to transmit the session token to your server and verify it.