@mosip/react-inji-verify-sdk 0.12.0-beta.1 → 0.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +79 -4
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -11,6 +11,14 @@ Inji Verify SDK is a library which exposes React components for integrating Inji
|
|
|
11
11
|
|
|
12
12
|
[npm](https://www.npmjs.com/package/@mosip/react-inji-verify-sdk)
|
|
13
13
|
|
|
14
|
+
## Peer Dependencies
|
|
15
|
+
|
|
16
|
+
| Name | Version |
|
|
17
|
+
|------------|---------|
|
|
18
|
+
| React | 18.2.0 |
|
|
19
|
+
| TypeScript | 4.9.5 |
|
|
20
|
+
|
|
21
|
+
|
|
14
22
|
## Local Publishing Guide
|
|
15
23
|
|
|
16
24
|
Install the dependencies
|
|
@@ -23,6 +31,73 @@ Publish the npm package using Verdaccio
|
|
|
23
31
|
We use [verdaccio](https://verdaccio.org/docs/what-is-verdaccio). `npm link` or `yarn link` won't work as we have peer dependencies. Follow the docs to setup Verdaccio. Then run
|
|
24
32
|
`npm publish --registry http://localhost:<VERADACCIO_PORT>`
|
|
25
33
|
|
|
34
|
+
## Components
|
|
35
|
+
#### OpenID4VPVerification
|
|
36
|
+
|
|
37
|
+
##### Overview
|
|
38
|
+
|
|
39
|
+
The OPENID4VP UI Component is designed to facilitate the Verifiable Presentation (VP) verification process using the OpenID4VP specification. It interacts with the Relying Party UI, Verify Backend, and Wallet application to complete the verification process.
|
|
40
|
+
|
|
41
|
+
This document explains the sequence of operations performed by the component, along with the relevant API calls and callback handling.
|
|
42
|
+
|
|
43
|
+
##### Sequence of Operations
|
|
44
|
+
|
|
45
|
+
###### 1. Trigger (User Action)
|
|
46
|
+
|
|
47
|
+
The user initiates the verification process via the Relying Party UI by:
|
|
48
|
+
Clicking a "Verify" button. Opening the component where auto-verification is triggered.
|
|
49
|
+
|
|
50
|
+
###### 2. Configuration (Relying Party Setup)
|
|
51
|
+
|
|
52
|
+
The Relying Party UI configures the OPENID4VP UI Component with the following parameters described [here]("#component-props")
|
|
53
|
+
|
|
54
|
+
###### 3. VP Request Creation
|
|
55
|
+
|
|
56
|
+
The OPENID4VP UI Component sends a request to verifyServiceUrl/vp-request to initiate an Authorization Request. Either presentationDefinitionId or presentationDefinition must be provided in the request.
|
|
57
|
+
|
|
58
|
+
###### 4. Authorization Request (from Backend)
|
|
59
|
+
|
|
60
|
+
The Verify Backend processes the VP request. Generates a transactionId if not provided. Constructs an Authorization Request following the OpenID4VP standard. Returns the Authorization Request response to the OPENID4VP UI Component.
|
|
61
|
+
|
|
62
|
+
###### 5. QR Code Generation
|
|
63
|
+
|
|
64
|
+
The OPENID4VP UI Component generates a QR Code containing the Authorization Request Response. The QR Code is displayed to the user for scanning via their Wallet.
|
|
65
|
+
|
|
66
|
+
###### 6. Status Polling (Background Check)
|
|
67
|
+
|
|
68
|
+
The component continuously polls the verifyServiceUrl/vp-request/{reqId}/status endpoint. Status values include:
|
|
69
|
+
`ACTIVE` → Waiting for user action.
|
|
70
|
+
`VP_SUBMITTED` → User has submitted the VP.
|
|
71
|
+
`EXPIRED` → QR code expired.
|
|
72
|
+
|
|
73
|
+
###### 7. Wallet Interaction (User Action)
|
|
74
|
+
|
|
75
|
+
The user scans the QR Code with their Wallet. The Wallet extracts the presentation definition. Displays a list of matching Verifiable Credentials (VCs) available in the Wallet for user selection. Submits the selected VCs as a Verifiable Presentation (VP) Token to the Verify Backend.
|
|
76
|
+
|
|
77
|
+
###### 8. VP Token Submission (from Wallet)
|
|
78
|
+
|
|
79
|
+
The Wallet authenticates the user (if required) and submits the VP Token to the Verify Backend.
|
|
80
|
+
|
|
81
|
+
###### 9. Status Handling (/vp-request/{reqId}/status)
|
|
82
|
+
|
|
83
|
+
The OPENID4VP UI Component checks the status of the VP request:
|
|
84
|
+
- Case 1: QR Code Expired
|
|
85
|
+
If the status returns `EXPIRED`, then the `onQrCodeExpired()` callback is triggered. Which notifies the Relying Party UI that the verification request has expired.
|
|
86
|
+
|
|
87
|
+
- Case 2: VP Submitted
|
|
88
|
+
If the status returns `VP_SUBMITTED`, then the component requests the VP data from `verifyServiceUrl/vp-result/{txnId}`. This call retrieves the VP data. Once its retrieved the componnent validates the VP using the VC-Verifier library. Returns the validated verification result.
|
|
89
|
+
- onVpProcessed(data) Execution: The onVpProcessed(data) callback is triggered. Passes the validated verification result to the Relying Party UI.
|
|
90
|
+
|
|
91
|
+
- onVpReceived(txnId) Execution: The onVpReceived(txnId) callback is triggered. The Relying Party UI can now pass the txnId to its backend to fetch results from the Verify Backend.
|
|
92
|
+
|
|
93
|
+
###### 10. Error Handling
|
|
94
|
+
|
|
95
|
+
If an error occurs before reaching `VP_SUBMITTED`, the `onError(error)` callback is triggered. Common errors include,
|
|
96
|
+
- Failure to generate QR code.
|
|
97
|
+
- Issues communicating with the backend.
|
|
98
|
+
- Timeout during status polling.
|
|
99
|
+
- Invalid VP submission.
|
|
100
|
+
|
|
26
101
|
## Integration Guide
|
|
27
102
|
|
|
28
103
|
### OpenID4VPVerification
|
|
@@ -138,11 +213,11 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
|
|
|
138
213
|
|
|
139
214
|
- **Simulate Wallet Scan** : Use a mobile wallet app that supports OpenID4VP, or use mock tools to scan the QR code.
|
|
140
215
|
|
|
141
|
-
- **Trigger Expiry** : Don
|
|
216
|
+
- **Trigger Expiry** : Don’t scan the QR and wait for expiry to ensure onQrCodeExpired fires.
|
|
142
217
|
|
|
143
218
|
- **Force Errors** :
|
|
144
|
-
|
|
145
|
-
|
|
219
|
+
- Stop the backend or simulate a 500 error.
|
|
220
|
+
- Try missing required props or using both callbacks to see validation.
|
|
146
221
|
|
|
147
222
|
|
|
148
223
|
### Compatibility & Scope
|
|
@@ -159,4 +234,4 @@ verifyServiceUrl="https://injiverify-service.example.com/v1/verify"
|
|
|
159
234
|
|
|
160
235
|
- ❌ Angular, Vue, or other frontend frameworks
|
|
161
236
|
|
|
162
|
-
- ❌ SSR frameworks like Next.js without customization
|
|
237
|
+
- ❌ SSR frameworks like Next.js without customization
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mosip/react-inji-verify-sdk",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.3",
|
|
4
4
|
"description": "A react component library to perform Inji verify tasks, such as OpenId4VP sharing, Reading VC QR codes",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|