IdentifiReact

IdentifiReact is a React component that integrates with the Identifi service, enabling user identification and verification in your React applications with minimal setup.

🚀 Features

• Easy integration with the Identifi platform
• Customizable configuration options
• Callback hooks for success and error handling
• Supports TypeScript

📦 Installation

Install the package and its peer dependencies via npm:

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

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 (
    <IdentifiReact
      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 |

appConfig object

| 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:

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 expired

Make 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:

npm run dev

📄 License

MIT License