Skip to content
dev

Email link authentication

Also known as magic link, email authentication is a passwordless flow where users click a unique link sent to their email address to log in.

Add the login with email button

From your login page, add the <np-email-auth> component and set the email property with your user’s email address.

<np-email-auth></np-email-auth>


<script type="module">
  // set the email property
  const el = document.querySelector("np-email-auth");
  el.email = "ada@lovelace.uk"; // from an input field somewhere
</script>

Once the user clicks on this button, an email will be sent to its inbox. By clicking on the received authorization link, he will be redirected to the original page with an extra code parameter. This component will then use it to create the user session and emits a np:login event.

el.addEventListner("np:login", async (e) => {
  // a session has been created 🎉
  const { expires_at, token } = await e.target.getSession();
});

You are done!

Once the session established, you only have to transmit the session token to your server and verify it.

Session management Learn how to manage session and verify the session token