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
np-if	slot	Render specific slots based on user’s session states

How to Install

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

Using CDN

Each component (np-login, np-passkey-register, np-logout, np-if) can be loaded individually 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>

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.

Since modules are loaded asynchronously, the component may not be available during the initial render, causing a Flash of Undefined Custom Elements (FOUCE) when the page loads.

How to Prevent FOUCE

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

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

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

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

Using NPM

If you prefer not 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, simply import the desired component:

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

CDN vs NPM

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

CDN links start with /cdn and npm imports use /dist. The /cdn files are pre-bundled and minified, with code splitting for optimal bandwidth usage. The /dist files are not pre-bundled, allowing your bundler to efficiently deduplicate dependencies, resulting in smaller bundles and optimal code sharing.