Get up and running with IdentityKit
Prerequisites
- An ICP project with a frontend canister.
- Node.js version >= 12.7.0
If you use Typescript:
- Typescript version >= 4.7
tsconfig.jsonmodule set tonode16ornodenextor any other with moduleResolution set tonode16ornodenext
{
"compilerOptions": {
"module": "node16",
// or
"moduleResolution": "node16"
}
}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/identitykitThe 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-clientNote: IdentityKit is a React library and exports styles that need to be imported into your project.
Import
import "@nfid/identitykit/react/styles.css"
import { IdentityKitProvider } from "@nfid/identitykit/react"Wrap provider
Wrap your application with IdentityKitProvider, set authType to delegation, and add your
backend canisters to the targets array.
Add only your backend canister IDs to the targets array.
const App = () => {
return (
<IdentityKitProvider
authType={IdentityKitAuthType.DELEGATION}
signerClientOptions={{
targets=["canisterID1", "canisterID2",...] // **IMPORTANT**: these are *your* canisters, not ledger canisters
}}>
<YourApp />
</IdentityKitProvider>
)
}Support on-chain wallets
Add the following snippet to each of the canisters you added to targets in the step above.
use candid::{self, CandidType, Deserialize};
#[derive(CandidType, Deserialize, Eq, PartialEq, Debug)]
pub struct SupportedStandard {
pub url: String,
pub name: String,
}
#[query]
fn icrc10_supported_standards() -> Vec<SupportedStandard> {
vec![
SupportedStandard {
url: "https://github.com/dfinity/ICRC/blob/main/ICRCs/ICRC-10/ICRC-10.md".to_string(),
name: "ICRC-10".to_string(),
},
SupportedStandard {
url: "https://github.com/dfinity/wg-identity-authentication/blob/main/topics/icrc_28_trusted_origins.md".to_string(),
name: "ICRC-28".to_string(),
},
]
}
#[derive(Clone, Debug, CandidType, Deserialize)]
pub struct Icrc28TrustedOriginsResponse {
pub trusted_origins: Vec<String>
}
// list every base URL that users will authenticate to your app from
#[update]
fn icrc28_trusted_origins() -> Icrc28TrustedOriginsResponse {
let trusted_origins = vec![
String::from("https://your-frontend-canister-id.icp0.io"),
String::from("https://your-frontend-canister-id.raw.icp0.io"),
String::from("https://your-frontend-canister-id.ic0.app"),
String::from("https://your-frontend-canister-id.raw.ic0.app"),
String::from("https://your-frontend-canister-id.icp0.icp-api.io"),
String::from("https://your-frontend-canister-id.icp-api.io"),
String::from("https://yourcustomdomain.com"),
String::from("https://yourothercustomdomain.com")
];
return Icrc28TrustedOriginsResponse { trusted_origins }
}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.
Signer support
Currently known support for the icrc34_delegation standard:
| Signer | icrc34_delegation support |
|---|---|
| NFID Wallet | Yes |
| Plug | Yes |
| Oisy | No |
| Internet Identity | Yes |
| Stoic | Yes |