<attestto-sign>

Sign documents with any DID wallet. The output is a Verifiable Credential, not a modified file — the original document is never altered.

Basic usage

HTML 
 <script type="module"
  src="https://unpkg.com/@attestto/[email protected]/dist/attestto-verify.js"
  integrity="sha384-v5irXGJ3QL+rHxekFY6LC4PsECPYYAtLt4L7qA30edAvB+/Ah+ZS8IvSXoxqmctW"
  crossorigin="anonymous"
></script>

<attestto-sign></attestto-sign>

How it works

The sign component uses @attestto/id-wallet-adapter under the hood to discover and connect to DID wallets. The signing flow follows five steps:

1

Discover wallets — Scans for available DID wallets using the wallet adapter's discovery protocol (browser extensions, mobile deep links, CHAPI).

2

Select wallet — The user picks their wallet from the built-in picker. The component connects and retrieves the user's DID.

3

Drop PDF — The user drops or selects a document. The component computes its SHA-256 hash locally.

4

Sign — The hash (not the document) is sent to the wallet for signing. The wallet prompts the user for approval and returns a cryptographic signature.

5

Store — The signed Verifiable Credential is stored in the user's wallet. It can be presented to any verifier later.

💡
Output is a Verifiable Credential. The component does not modify the original PDF or produce a signed file download. Instead, it creates a W3C Verifiable Credential that binds the signer's DID to the document hash. The VC is stored in the user's identity wallet.

Attributes

Attribute Type Default Description
theme "light" | "dark" "light" Color scheme for the component.
wallet-filter string — Comma-separated list of wallet IDs to show. Omit to show all discovered wallets.
credential-type string "DocumentSignature" The Verifiable Credential type to issue.

Events

Event Detail When
wallet-connected { did: string, walletId: string } A wallet has been selected and connected.
sign-started { fileName: string, hash: string, did: string } The user has approved signing and the operation has begun.
sign-complete { credential: object, hash: string, did: string } Signing succeeded. The credential is a full W3C Verifiable Credential.
sign-error { error: string, code: string } Signing failed (wallet rejected, timeout, etc.).

Event handling

JavaScript 
 const signer = document.querySelector('attestto-sign')

signer.addEventListener('wallet-connected', (e) => {
  console.log('Connected DID:', e.detail.did)
})

signer.addEventListener('sign-complete', (e) => {
  console.log('Signed by:', e.detail.did)
  console.log('Document hash:', e.detail.hash)
  console.log('Credential:', e.detail.credential)

  // The VC is already stored in the wallet.
  // You can also record it on your backend:
  fetch('/api/signatures', {
    method: 'POST',
    body: JSON.stringify(e.detail)
  })
})

signer.addEventListener('sign-error', (e) => {
  console.error('Sign failed:', e.detail.error)
})

See also