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 with a biometric sensor (such as a fingerprint or facial recognition), PIN, or pattern, freeing them from having to remember and manage passwords.
Passkeys are:
- easier - users can select an account to sign in with biometric sensor.
- safer - passkeys are proven to be resistant to phishing, credential stuffing, and other remote attacks.
Creating a passkey
Before asking your user to create a Passkey you need to make sure that their browsers are 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 support Passkeys. Use it to suggest a passkey creation process only for compatible browsers.
To create a passkey, just add the <np-passkey-register> component.
Once the user clicks on this button, the browser will prompt the user to create a passkey.
This component will then emit a np:register event when created.
<np-passkey-register></np-passkey-register>
<script type="module"> el.addEventListner("np:register", (e) => { // The passkey has been created 🎉 const { id } = e.detail; // the passkey id. });</script>`;This np:register event contains the passkey id.
It can be used to perform further optional administration operations such as revokation.
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.addEventListner("np:login", async (e) => { // a session has been created 🎉 const { expires_at, token } = await e.target.getSession(); });</script>What if the user didn’t create 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 established, you only have to transmit the session token to your server and verify it.