NFID Docs - Quickstart

Installation

Add the @nfid/embed package and dependencies

npm i @nfid/embed @dfinity/agent @dfinity/identity @dfinity/auth-client @dfinity/principal

Import NFID class

import { NFID } from "@nfid/embed"

The static NFID.init() method returns a promise that resolves as soon as the mounted NFID iframe is ready to use. You can use the await keyword to wait for the promise to resolve:

type IdleOptions = {
  onIdle?: () => unknown; // callback after the user has gone idle
  idleTimeout?: number; // timeout in ms, default is 600000 (10 minutes)
  captureScroll?: boolean; // capture scroll events
  scrollDebounce?: number; // scroll debounce time in ms, default is 100
  disableIdle?: boolean; // disables idle functionality
  disableDefaultIdleCallback?: boolean; // disables default idle behavior - call logout & reload window
}
 
type NFIDConfig = {
  origin?: string; // default is "https://nfid.one"
  application?: { // your application details to display in the NFID iframe
    name?: string; // your app name user can recognize
    logo?: string; // your app logo user can recognize
  };
  identity?: SignIdentity;
  storage?: AuthClientStorage;
  keyType?: "ECDSA" | "Ed25519" // default is "ECDSA"
  idleOptions?: IdleOptions;
};
 
const nfid = await NFID.init({
  application: {
    name: "My Sweet App",
    logo: "https://dev.nfid.one/static/media/id.300eb72f3335b50f5653a7d6ad5467b3.svg"
  },
}: NFIDConfig);

You're now ready to onboard users and request approvals without interrupting your dApp UX.

Sample implementation to demonstrate how this could look in your app: NFID Playground (opens in a new tab)

Welcome Authentication