Proof Digital Credentials - Web Components

drawing

Web Components to harness Proof Digital Credentials built on top of @proof.com/proof-vc-common.

Read our documentation or try them!

• Installation
• Getting Started
  • Custom authorization URL
• Styles
• TypeScript
  • React
• Documentation
• Contributing

npm install @proof.com/proof-vc-web

To request a Verifiable Presentation, drop the <proof-verify-id /> HTML tag anywhere and give it your verifier config:

<proof-verify-id
 environment="sandbox"
 client-id="<CLIENT_ID>"
 callback-uri="<CALLBACK_URI>"
 nonce="3e8e4918-e9fb-453a-a538-81152be15c1b"
/>

You can also provide a login-hint, state, scope, or response-mode (fragment (default) | direct_post):

<proof-verify-id
 environment="sandbox"
 client-id="<CLIENT_ID>"
 callback-uri="<CALLBACK_URI>"
 nonce="3e8e4918-e9fb-453a-a538-81152be15c1b"
 state="6A2B4CD830"
 login-hint="frodo.baggins@theshire"
 response-mode="direct_post"
/>

scope selects which credential to request. It defaults to urn:proof:params:scope:verifiable-credentials:basic:

<proof-verify-id
 environment="sandbox"
 client-id="<CLIENT_ID>"
 callback-uri="<CALLBACK_URI>"
 nonce="3e8e4918-e9fb-453a-a538-81152be15c1b"
 scope="urn:proof:params:scope:verifiable-credentials:nationality:us"
/>

You can pass a resolveAuthorizationUrl property to create your own authorization request URL (e.g. a Pushed Authorization Request server-side). When set, the element ignores the environment / client-id / callback-uri / response-mode / nonce / state / login-hint / scope attributes.

import { buildAuthorizationUrl } from "@proof.com/proof-vc-web";
<proof-verify-id
 resolveAuthorizationUrl={() =>
 buildAuthorizationUrl({
 environment: "sandbox",
 clientId: "<CLIENT_ID>",
 callbackUri: "<CALLBACK_URI>",
 nonce: "3e8e4918-e9fb-453a-a538-81152be15c1b",
 scope: "urn:proof:params:scope:verifiable-credentials:basic",
 })
 }
/>;

Return null (or undefined) to cancel the redirect.

You can customize your <proof-verify-id /> with the following attributes:

• theme: dark | gray | outline | primary (default)
• size: icon | small | medium (default) | large

drawing

The package ships its own type definitions; everything you import from @proof.com/proof-vc-web is fully typed by default.

<proof-verify-id /> works in React 19+ JSX. To get type checking and prop autocomplete in TSX, opt in to the React types subpath in your project's tsconfig.json:

{
 "compilerOptions": {
 "types": ["@proof.com/proof-vc-web/react"]
 }
}

Or, drop a triple-slash reference in any .d.ts file in your project:

/// <reference types="@proof.com/proof-vc-web/react" />

Both forms activate the React.JSX.IntrinsicElements augmentation that types environment, client-id, callback-uri, nonce, theme, size, and the other attributes.

Digital Credentials guides https://dev.proof.com/docs/digital-credentials-overview
API Documentation https://dev.proof.com/reference/authorizeverifiablecredentialpresentation

Contribution guidelines for this project