A react component library to perform Inji verify tasks, such as OpenId4VP sharing, Reading VC QR codes
npm install inji-sdkInji Verify SDK provides ready-to-use React components to integrate OpenID4VP-based Verifiable Credential (VC) and Verifiable Presentation (VP) verification into any React TypeScript web application.
bash
npm i @mosip/react-inji-verify-sdk
`$3
`javascript
import { OpenID4VPVerification, QRCodeVerification } from "@mosip/react-inji-verify-sdk";
`$3
Option A: QR Code Verification (Scan & Upload)
`javascript
function MyApp() {
return (
verifyServiceUrl="https://your-backend.com/verify"
onVCProcessed={(result) => {
console.log("Verification complete:", result);
// Handle the verification result here
}}
onError={(error) => {
console.log("Something went wrong:", error);
}}
triggerElement={}
clientId="CLIENT_ID"
/>
);
}
`Option B: OpenID4VP Verification
`javascript
function MyApp() {
return (
verifyServiceUrl="https://your-backend.com/v1/verify"
presentationDefinitionId="your-definition-id"
onVpProcessed={(result) => {
console.log("Wallet verification complete:", result);
// Handle the verification result here
}}
onQrCodeExpired={() => alert("QR code expired, please try again")}
onError={(error) => console.log("Error:", error)}
triggerElement={}
clientId="CLIENT_ID"
/>
);
}
`Response Received
When verification is completed, the response received is as below:
`javascript
{
vcResults: [
{
vc: { / Your verified credential data / },
vcStatus: "SUCCESS" // or "INVALID", "EXPIRED"
}
],
vpResultStatus: "SUCCESS" // Overall verification status
}
`
>Security Recommendation
>
>Avoid consuming results directly from VPProcessed or VCProcessed.
Instead, use VPReceived or VCReceived events to capture the txnId, then retrieve the verification results securely from your backend's verification service endpoint.
This ensures data integrity and prevents reliance on client-side verification data for final decisions.Pre-requisites
$3
1. A React project (TypeScript recommended)
2. A verification backend - You need a server that can verify credentials
3. Camera permissions - For QR scanning features$3
Your backend must support the OpenID4VP protocol. You can either:
- Use the official inji-verify-service
- Build your own following this specificationImportant: Your backend URL should look like:
`
https://your-backend.com
`📖 Detailed Component Guide
$3
Perfect for: Scanning QR codes from documents or uploading QR codes (PNG, JPEG, JPG, PDF)
#### Basic Setup:
`javascript
verifyServiceUrl="https://your-backend.com"
onVCProcessed={(result) => handleResult(result)}
onError={(error) => handleError(error)}
triggerElement={}
clientId="CLIENT_ID"
/>
`#### All Available Options:
`javascript
// Required
verifyServiceUrl="https://your-backend.com"
onVCProcessed={(result) => console.log(result)} // OR use onVCReceived
onError={(error) => console.log(error)}
clientId="CLIENT_ID" // Optional
triggerElement={}
transactionId="your-tracking-id" //Optional
uploadButtonId="my-upload-btn"
uploadButtonStyle={{ backgroundColor: 'blue' }}
isEnableUpload={true} // Allow file uploads
isEnableScan={true} // Allow camera scanning
isEnableZoom={true} // Allow camera zoom
isVPSubmissionSupported={false} // This attribute indicates whether VP submission is supported in Inji OVP VC sharing flow. By default, it is false which means that VP token will be directly sent in response. If set to true, then VP token will be submitted to the VP_SUBMISSION_ URL.
/>
`Choose One Callback:
-
onVCProcessed: Get full verification results immediately
- onVCReceived: Get just a transaction ID (your backend handles the rest)$3
Perfect for: Integrating with digital wallets (like mobile ID apps)
#### Basic Setup:
`javascript
verifyServiceUrl="https://your-backend.com"
presentationDefinitionId="what-you-want-to-verify"
onVpProcessed={(result) => handleResult(result)}
onQrCodeExpired={() => alert("Please try again")}
onError={(error) => handleError(error)}
clientId="CLIENT_ID"
/>
`#### With Presentation Definition:
`javascript
verifyServiceUrl="https://your-backend.com"
presentationDefinition={"Refer Option 2 below"}
onVpProcessed={(result) => console.log(result)}
onQrCodeExpired={() => alert("QR expired")}
onError={(error) => console.error(error)}
triggerElement={}
clientId="CLIENT_ID"
/>
`#### Define What to Verify:
Option 1: Use a predefined template
`javascript
presentationDefinitionId="drivers-license-check"
`Option 2: Define exactly what you want
`javascript
presentationDefinition={{
id: "custom-verification",
purpose: "We need to verify your identity",
format: {
ldp_vc: {
proof_type: ["Ed25519Signature2020"],
},
},
input_descriptors: [
{
id: "id-card-check",
constraints: {
fields: [
{
path: ["$.type"],
filter: {
type: "object",
pattern: "DriverLicenseCredential",
},
},
],
},
},
],
}}
`🎛️ Component Options Reference
$3
| Property | Type | Required | Description |
|--------------------|---------------|----------|---------------------------------------------|
|
verifyServiceUrl | string | ✅ | Your backend verification URL |
| onError | function | ✅ | What to do when something goes wrong |
| triggerElement | React element | ❌ | Custom button/element to start verification |
| transactionId | string | ❌ | Your own tracking ID |
| clientId | string | ✅ | Your own client ID | $3
| Property | Type | Default | Description |
|---------------------------|----------|---------|------------------------------|
|
onVCProcessed | function | - | Get full results immediately |
| onVCReceived | function | - | Get transaction ID only |
| isEnableUpload | boolean | true | Allow file uploads |
| isEnableScan | boolean | true | Allow camera scanning |
| isEnableZoom | boolean | true | Allow camera zoom |
| uploadButtonStyle | object | - | Custom upload button styling |
| isVPSubmissionSupported | Boolean | false | Toggle VP submission support |$3
| Property | Type | Default | Description |
|----------------------------|----------|----------------|------------------------------------|
|
protocol | string | "openid4vp://" | Protocol for QR codes (optional) |
| presentationDefinitionId | string | - | Predefined verification template |
| presentationDefinition | object | - | Custom verification rules |
| onVpProcessed | function | - | Get full results immediately |
| onVpReceived | function | - | Get transaction ID only |
| onQrCodeExpired | function | - | Handle QR code expiration |
| isSameDeviceFlowEnabled | boolean | true | Enable same-device flow (optional) |
| qrCodeStyles` | object | - | Customize QR code appearance |- React Only: Won't work with Angular, Vue, or React Native
- Backend Required: You must have a verification service running