Getting started

Components list

name	Type	Description
np-login	input	Authenticate a user with a magic-link or passkey
np-passkey-register	button	Register a passkey
np-logout	button	Revoke the current session

How to install it?

You can load our web components via CDN or by installing it locally using package manager such as NPM.

using NPM

If you don’t want to use the CDN, you can install the latest version of our sdk from npm with the following command.

npm i @nopwdio/sdk-js@latest

Once installed, you only have to import the desired component and you are good to go.

import "@nopwdio/sdk-js/dist/components/{component-name}.js";

using CDN

Each components (np-login, np-passkey-register, np-logout) can be loaded individualy from a CDN.

Example using the email link authentication button component:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@nopwdio/sdk-js@latest/cdn/components/{component-name}.js"
></script>

About version management

It is not recommended to use the @latest suffix, as a major release could break your application. Instead, use a fixed version such as X.Y.Z.

As module is asynchronous, the component may be not loaded during the first render and you may notice a Flash of Undefined Custom Elements (FOUCE) when the page loads.

How to prevent it?

One option is to use the :defined CSS pseudo-class to mask custom elements that haven’t been registered yet.

np-login:not(:defined) {
  visibility: hidden;
}

Another option is to use customElements.whenDefined() function, which returns a promise that resolves when the specified element is registered. You can then add a specific class to adapt the CSS accordingly.

await customElements.whenDefined("np-login");
document.body.classList.add("ready");

The difference between CDN and NPM

TL;DR: @nopwdio/sdk-js/cdn is for CDN supporters and @nopwdio/sdk-js/dist for NPM lovers.

You’ll notice that the CDN links all start with /cdn and npm imports use /dist. The /cdn files are pre-bundled, minified. Code splitting is also used for optimal bandwidth optimization. The /dist files DO NOT come pre-bundled, allowing your bundler of choice to more efficiently deduplicate dependencies, resulting in smaller bundles and optimal code sharing.