Nopwd JavaScript SDK

Welcome to the Nopwd JavaScript SDK repository!

This repository contains all the source code used to build our JavaScript library.

What is it?

Nopwd is a set of web components and APIs to authenticate your users using email links or Passkeys.

Nopwd is still in beta. The API and components may change and are not production-ready at this time.

Check out our demo website to see it live :)

Why?

Authentication used to be hard for users and developers. At Nopwd, we work hard to keep our API simple and minimal 💆. Using Nopwd, you won’t have to:

• give us money (but you can still support us 😅)
• register your app or website
• manage any API keys or secrets

How to install it?

You can load our web components via CDN or install them locally using a package manager such as NPM.

Using CDN

<!-- Import the login with magic link or Passkeys input element -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/np-login.js"
></script>

<!-- Import the logout button element -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/np-logout.js"
></script>

<!-- Import the Passkey registration button element -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/np-passkey-register.js"
></script>

Using NPM

npm i @nopwdio/sdk-js@latest

Then:

// Import the login with magic link or Passkeys input element
import "@nopwdio/sdk-js/dist/components/np-login.js";

// Import the logout button element
import "@nopwdio/sdk-js/dist/components/np-logout.js";

// Import the Passkey registration button element
import "@nopwdio/sdk-js/dist/components/np-passkey-register.js";

How to add magic-link or Passkeys authentication?

<np-login></np-login>

<script>
  const input = document.querySelector("np-login");

  input.addEventListener("np:login", (e) => {
    // You are authenticated 🎉
    const { expires_at, token } = e.target.getSession();
  });
</script>

How to logout?

<np-logout></np-logout>

<script>
  const button = document.querySelector("np-logout");

  button.addEventListener("np:logout", (e) => {
    // You are logged out 🎉
  });
</script>

How to create a Passkey?

<np-passkey-register></np-passkey-register>

<script>
  const button = document.querySelector("np-passkey-register");

  button.addEventListener("np:register", (e) => {
    // The Passkey has been created 🎉
  });
</script>

New contributors welcome!

You can create a new issue to put a problem on our radar or submit a pull request!

What's next?

Read the full documentation