`IdentifiReact` is a React component that integrates with the Identifi service, enabling user identification and verification in your React applications with minimal setup. <br/><br/>
npm install @dwn-protocol/identifi-reactIdentifiReact is a React component that integrates with the Identifi service, enabling user identification and verification in your React applications with minimal setup.
sh
npm install @dwn-protocol/identifi-react framer-motion
`Peer Dependencies:
-
framer-motion (^12.0.0) - Required for animations
- lucide-react (^0.510.0) - Required for icons
- react (^18.0.0) - Required
- react-dom (^18.0.0) - Required
๐ ๏ธ Usage
`ts
import React from 'react';
import { IdentifiReact } from "identifi-react";
import "identifi-react/index.css"; // import "identifi-react/index.css" for the UI styling.const App = () => {
return (
title="Identifi"
appConfig={{
pbUrl: import.meta.env.VITE_IDENTIFI_URL,
userId: "your platforms users id"
}}
onError={(error) => {
console.error("Identifi error:", error);
}}
onSuccess={(result) => {
console.log("Identifi success:", result);
}}
/>
);
};
export default App;
`
โ๏ธ Props
| Prop | Type | Required | Description |
| ----------- | ---------- | -------- | --------------------------------------- |
| title | string | โ
| Title displayed in the component |
| appConfig | object | โ
| Configuration object for Identifi API |
| onError | function | โ
| Callback for error handling |
| onSuccess | function | โ
| Callback when the process is successful |$3
| Key | Type | Required | Description |
| -------- | -------- | -------- | ----------------------------------------------------- |
| pbUrl | string | โ
| URL of the Identifi API endpoint |
| userId | string | โ
| Your platforms user id |
| apiKey | string | โ | Deprecated - authentication now uses OIDC access token |๐งช Example Response
On success, the onSuccess callback receives a result object. On failure, the onError callback is triggered with an error object.๐ง Environment Variables
Make sure you define your environment variables in a .env file:
`ini
VITE_IDENTIFI_URL="your-api-url"
VITE_DWN_API_USER="dev1"
VITE_DWN_API_PASSWORD="password1"
`๐ Authentication
The SDK now uses DWN API credentials (username/password) for authentication instead of hardcoded API keys. The credentials are read from environment variables and used to authenticate with the relay app's /login endpoint to obtain a JWT token.The authentication flow:
1. SDK reads
VITE_DWN_API_USER and VITE_DWN_API_PASSWORD from environment variables
2. Authenticates with ${pbUrl}/login endpoint using username/password
3. Receives a JWT token (valid for 30 days)
4. Token is cached in memory and localStorage for subsequent API calls
5. Token is automatically refreshed when expiredMake sure to set the DWN API credentials in your
.env file before using the IdentifiReact component.๐ Development
1. Clone the repo.
2. Run npm install.
3. Start development:
`sh
npm run dev
``