@mosip/react-inji-verify-sdk 0.13.0-beta.7 → 0.14.0-beta.0

package/Readme.md

@@ -62,8 +62,8 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
 
 | Prop                                         | Description                                       |
 |----------------------------------------------|---------------------------------------------------|
-| `onVpReceived(txnId: string)`                  | Use when your backend fetches the VP result later |
-| `onVpProcessed(vpResult: VerificationResults)` | Use when the frontend needs the result directly   |
+| `onVPReceived(txnId: string)`                  | Use when your backend fetches the VP result later |
+| `onVPProcessed(vpResult: VerificationResults)` | Use when the frontend needs the result directly   |
 
 ##### Presentation Definition Options
 <br/>
@@ -105,7 +105,7 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
   protocol="openid4vp://"
   verifyServiceUrl="https://verifier.example.com/v1/verify"
   presentationDefinitionId="example-definition-id"
-  onVpProcessed={(vpResult) => {
+  onVPProcessed={(vpResult) => {
     console.log("VP Verified:", vpResult);
   }}
   onQrCodeExpired={() => alert("QR expired")}
@@ -125,7 +125,7 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
     id: "custom-def",
     input_descriptors: [/* your PD here */],
   }}
-  onVpReceived={(txnId) => {
+  onVPReceived={(txnId) => {
     // Send txnId to your backend to fetch the result later
     console.log("VP submission received, txn ID:", txnId);
   }}
@@ -144,6 +144,119 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
     - Stop the backend or simulate a 500 error.
     - Try missing required props or using both callbacks to see validation.
 
+### QRCodeVerification
+
+This guide walks you through integrating the QRCodeVerification component into your React TypeScript project. It facilitates QR code scanning and image upload to verify Verifiable Credentials (VCs) in your React application, including client-side and backend-to-backend verification. 
+
+#### Component Props
+✅ Required Props
+<br/> 
+
+| Prop   | Type | Description |
+|--------|------| ------------|
+| `verifyServiceUrl` | string | Backend service URL for VC submission or verification.|
+| `onError` | (error: Error) => void | Callback triggered on errors during scanning/upload.|
+|`onVCReceived or onVCProcessed` | See below |See below
+
+Only one of these callbacks should be provided.
+
+#### 📌 Callback Types
+Use one of the following:
+
+##### onVCReceived
+
+```onVCReceived: (txnId: string) => void; ```
+
+Called when a Verifiable Presentation (VP) is received and submitted to the backend, returning the transaction ID
+
+##### onVCProcessed
+
+``` onVCProcessed: (vpResult: VerificationResults) => void; ```
+
+Called when the VP is verified, returning an array of verification result objects:
+
+```type VerificationResult = {   vc: unknown;   vcStatus: "SUCCESS" | "INVALID" | "EXPIRED"; }; ```
+
+``` type VerificationResults = VerificationResult[]; ```
+
+**⚠️ onVCReceived and onVCProcessed cannot be used simultaneously.**
+
+#### 🛠️ Optional Props
+<br/>
+
+| Prop             | Type               | Default         | Description                                         |
+|------------------|--------------------|-----------------|-----------------------------------------------------|
+| `triggerElement` | `React.ReactNode`  |      null       | Optional trigger to initiate the scan/upload (e.g., a button or label). |
+| `transactionId` | string | null | Optional external tracking ID |
+| `uploadButtonId`  | `string`           |    "upload-qr"             | Custom ID for upload button.                       |
+| `uploadButtonStyle`   | `React.CSSProperties`           |  "upload-button-default"               | Inline style object to apply custom styling to the upload button. |
+| `isEnableUpload` | boolean | true | Enables/disables QR-CODE image upload. |
+| `isEnableScan` | boolean | true | Enables/disables camera scanning. | 
+| `isEnableZoom` | boolean | true | Enables camera zoom on mobile devices. |
+
+#### Upload Support
+Upload supports the following image types:
+
+- PNG
+
+- JPEG
+
+- JPG
+
+- PDF
+
+You can customize the upload button’s style using uploadButtonStyle, and control its placement with uploadButtonId.
+
+#### Callback Behaviour
+
+**onVCReceived** : Used when you want the VC sent to a backend and just need a txnId response.
+
+**onVCProcessed** : Used for apps that handle VC verification client-side and want full VC + status.
+
+**onError** : Handles all runtime, parsing, and scanning errors.
+
+The component will clean up camera streams and timers on unmount.
+
+#### Example with onVCProcessed
+
+```
+<QRCodeVerification 
+    verifyServiceUrl="https://your-api/verify"
+    onVCProcessed={(vpResult) => { console.log("VC + Status:", vpResult)}}
+    onError={(e) => console.error("Error:", e.message)} 
+    triggerElement={<div className="btn-primary">Verify Now</div>} 
+/>
+```
+
+#### Basic Usage
+
+```
+import {QRCodeVerification} from "@mosip/react-inji-verify-sdk";
+const App = () => {
+  const handleVCReceived = (txnId: string) => {
+    console.log("txnId received from VC submission:", txnId);
+  };
+  const handleError = (error: Error) => {
+    console.error("Verification Error:", error.message);
+  };
+  return (
+    <QRCodeVerification
+      verifyServiceUrl="https://your-backend/verify"
+      onVCReceived={handleVCReceived}
+      onError={handleError}
+      triggerElement={<button>Start Verification</button>}
+    />
+  );
+};
+```
+
+#### Redirect Behavior
+When using Online Share QR Code, the user is redirected to the client (issuer) server for processing, and then sent back to the RP’s root path (/) with the vp_token in the URL fragment:
+
+
+```
+https://your-rp-domain.com/#vp_token=<base64url-encoded-token> 
+```
 
 ### Compatibility & Scope
 

package/dist/components/openid4vp-verification/OpenID4VPVerification.types.d.ts

@@ -82,7 +82,7 @@ interface InputDescriptor {
     };
     constraints?: {};
 }
-interface PresentationDefinition {
+export interface PresentationDefinition {
     id?: string;
     purpose: string;
     format?: {

package/dist/components/qrcode-verification/QRCodeVerification.types.d.ts

@@ -27,6 +27,11 @@ export type QRCodeVerificationProps = ExclusiveCallbacks & {
      * This is a required field.
      */
     verifyServiceUrl: string;
+    /**
+    
+    * A unique identifier for the transaction.
+    */
+    transactionId?: string;
     /**
      * Callback triggered when an error occurs during the verification process.
      * This is a required field to ensure proper error handling.
@@ -68,37 +73,8 @@ export type scanResult = {
     data: any;
     error: Error | null;
 };
-export interface QrData {
-    /**
-     * Unique transaction identifier.
-     */
-    transactionId: string;
-    /**
-     * Request identifier associated with the verification.
-     */
-    requestId: string;
-    /**
-     * Authorization details required for verification.
-     */
-    authorizationDetails: {
-        responseType: string;
-        clientId: string;
-        presentationDefinition: Record<string, unknown>;
-        presentationDefinitionUri?: string;
-        responseUri: string;
-        nonce: string;
-        iat: number;
-    };
-    /**
-     * Expiration timestamp of the QR code.
-     */
-    expiresAt: number;
-}
-export interface vpRequestBody {
-    clientId: string;
-    nonce: string;
+export interface vcSubmissionBody {
+    vc: any;
     transactionId?: string;
-    presentationDefinitionId?: string;
-    presentationDefinition?: Record<string, unknown>;
 }
 export {};