deepvue-aadhaar-ekyc-digilocker-switch

A React component library that provides a seamless integration for Aadhaar eKYC and DigiLocker authentication flows. This package allows users to choose between Aadhaar-based verification or DigiLocker-based document verification in your React applications.

Installation

npm install deepvue-aadhaar-ekyc-digilocker-switch
# or
yarn add deepvue-aadhaar-ekyc-digilocker-switch

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "@mui/material": "^7.0.0",
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0"
}

Usage

import {
  FlowSelector,
  AadhaarFlow,
  DigiLockerFlow,
} from "deepvue-aadhaar-ekyc-digilocker-switch";
import { useState } from "react";

function App() {
  const [flow, setFlow] = useState<"aadhaar" | "digilocker" | null>(null);

  // Your DeepVue credentials
  const apiKey = "your_api_key";
  const clientId = "your_client_id";
  const userCallback = "https://your-callback-url.com";

  const handleBackToSelection = () => {
    setFlow(null);
  };

  return (
    <div>
      {!flow ? (
        <FlowSelector
          apiKey={apiKey}
          clientId={clientId}
          onSelectAadhaar={() => setFlow("aadhaar")}
          onSelectDigiLocker={() => setFlow("digilocker")}
          onAutoSelectDigiLocker={() => setFlow("digilocker")}
        />
      ) : flow === "aadhaar" ? (
        <AadhaarFlow
          apiKey={apiKey}
          clientId={clientId}
          generatePdf={false}
          redirectUrl={userCallback}
          onBack={handleBackToSelection}
          companyName="Your Company"
          purpose="ForKYC"
        />
      ) : (
        <DigiLockerFlow
          apiKey={apiKey}
          clientId={clientId}
          redirectUrl={userCallback}
        />
      )}
    </div>
  );
}

Components

FlowSelector

The main component that allows users to choose between Aadhaar and DigiLocker flows.

Props:

• apiKey (string, required): Your DeepVue API key
• clientId (string, required): Your DeepVue client ID
• onSelectAadhaar (function, required): Callback when Aadhaar flow is selected
• onSelectDigiLocker (function, required): Callback when DigiLocker flow is selected
• onAutoSelectDigiLocker (function, required): Callback for auto-selecting DigiLocker flow
• autoDetectCallback (boolean, optional): Enable auto-detection of DigiLocker callback

AadhaarFlow

Component for handling Aadhaar eKYC verification flow.

Props:

• apiKey (string, required): Your DeepVue API key
• clientId (string, required): Your DeepVue client ID
• generatePdf (boolean, optional): Whether to generate PDF after verification
• redirectUrl (string, required): URL to redirect after successful verification
• onBack (function, required): Callback when user wants to go back
• companyName (string, required): Your company name
• purpose (string, required): Purpose of verification

DigiLockerFlow

Component for handling DigiLocker document verification flow.

Props:

• apiKey (string, required): Your DeepVue API key
• clientId (string, required): Your DeepVue client ID
• redirectUrl (string, required): URL to redirect after successful verification

Features

• Dual Authentication Flow

  • Aadhaar eKYC verification
  • DigiLocker document verification
  • Easy switching between authentication methods
  • OTP-based verification
  • PDF generation support for Aadhaar flow

Configuration

Before using the components, you need to:

1. Sign up for a DeepVue account to get your API credentials
2. Configure your callback URLs in the DeepVue dashboard
3. Add your API key and client ID to your application

License

MIT © DeepVue