Auth request
Authentication request to my.app
Also known as a magic link, email authentication is a passwordless flow where users click a unique link sent to their email address to log in.
Email link authentication button
<np-email-auth></np-email-auth>
<!-- importing the component using CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/np-email-auth.js"></script>
<script type="module">
// set the email property with the user's email...
const button = document.querySelector("np-email-auth");
button.email = "...";
// ...and retrieve the access token by listening the "np:login" event. You're done!
button.addEventListner("np:login", async (e) => {
// Your are authenticated 🎉
const { expires_at, token } = await e.target.getSession();
});
</script>
Authentication request to my.app
FFFF
FFFFFFFFFFFFFF
FFFFFFFF
Based on FIDO Alliance and W3C standards, passwords replace passwords with a cryptographic key unlocked only with the user's device.
Passkey registration button
<np-passkey-register></np-passkey-register>
<!-- import the component using CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/np-passkey-register.js"></script>
<script type="module">
// retrieve the access token by listening the "np:register" event.
const button = document.querySelector("np-passkey-register");
button.addEventListner("np:register", (e) => {
// Passkey has been created 🎉
const { id } = e.detail; // the passkey's id
});
</script>
Nopwd components can be customized at a high level through CSS parts. This gives you control over theming and styling for each element state.
np-email-auth:not([state])::part(button) {
color: white;
background-color: var(--my-accent-gradient);
}
Override with ease strings for any element to localize to any language or change the wording to match your brand.
<np-email-auth>Se connecter</np-email-auth>
A local session is created when the user initiates either login flow. You can customize its duration easily by configuring these components.
<!-- 'lifetime' equals to one day (24h) by default -->
<np-email-auth></np-email-auth>
Unlock a Password-Free Future and embrace Passwordless Authentication today!