waltid-react-components

UI components for digital ID use-cases powered by walt.id's Open-Source digital ID and wallet infrastructure.

• Issue or verify digital ID credentials by rendering QR codes or links via pre-built model and button components.
• Configure credential types to issue or verify, provide redirect URIs for success events, and adjust the styling to your needs via component props. No need to understand and write complex issuance and verification requests or custom frontend components.
• A few minutes, and your ID use case is ready to present.

Quickstart

In a nutshell, this is how to use it.

1. Install the lib

npm i waltid-react-components

2. Add the component to a page

<IssuanceButton credentials={[{ "type": "eID" }]} />

3. Let the magic happen

To see it working straight away, take a look at this example app.

Components

The library exports multiple helper functions and two main components: the IssuanceButton for credential issuance and the VerificationButton for credential verification. Both are like black boxes that abstract all the necessary backend details for issuing and verifying credentials from the developer.

Issuance

The only parameter you need to specify to create the credential issue button is the credential type. A list of the default supported credential types can be found in our credential repository.

In the example below, we create a button to issue a credential of type eID.

<IssuanceButton credentials={[{ "type": "eID" }]} />

The result will be a button like this:

When clicked, the generated button will call the Issuer API to initialize an OID4VC exchange session. The final result will be a credential offer URL which will be enconded as a QrCode to be scanned by the user with their wallet.

Verification

The basic usage of the verification button is very similar to the previous one. The only required parameter is the credential type to be presented.

<VerificationButton credentialTypes={["eID"]} />

The resulting button will be like:

When clicked, the Verifier API will be called to initialize an OID4VP presentation session. Similar to the issuance process, the result of the API call is a presentation request URL which is usually encoded as a QrCode.

The user then uses their wallet to scan the QrCode and the flow of credential presentation and verification continues.

Need more?

For more fine-grained customization, the components expose the walt.id's complete issuer and verifier API interfaces to be able to handle even the most complex use cases.

You can also take a look at our example apps which show different use-cases in more detail.