Getting Started
Installation

Get up and running with IdentityKit

Prerequisites

  • An ICP project with a frontend canister.

Install

Install IdentityKit:

  • @nfid/identitykit - A library to integrate compatible ICP wallets into your application.

React components can be imported from @nfid/identitykit/react

npm i @nfid/identitykit

The bundle needs peer dependencies, be sure that following resources are available in your project as well:

npm i @dfinity/ledger-icp @dfinity/identity @dfinity/agent @dfinity/candid @dfinity/identity @dfinity/principal @dfinity/utils @dfinity/auth-client

Note: IdentityKit is a React library and exports styles, that you need to import in your project.

Import

import "@nfid/identitykit/react/styles.css"
 
import { IdentityKitProvider } from "@nfid/identitykit/react"

Wrap provider

Wrap your application with IdentityKitProvider.

const App = () => {
  return (
    <IdentityKitProvider>
      <YourApp />
    </IdentityKitProvider>
  )
}

Add the connect button

Then, in your app, import and render the ConnectWallet component.

import { ConnectWallet } from "@nfid/identitykit/react"
 
export const YourApp = () => {
  return <ConnectWallet />;
};

IdentityKit will now handle your user's wallet selection, display wallet information, and handle wallet switching.

WelcomeConnectWallet