Skip to content

Commit 26201e3

Browse files
author
Test User
committed
build: publish first npm package and add docs
1 parent b618fc4 commit 26201e3

9 files changed

Lines changed: 562 additions & 60 deletions

File tree

‎README.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# `<auths-verify>` Web Component
2+
3+
[![npm version](https://img.shields.io/npm/v/auths-verify.svg)](https://www.npmjs.com/package/auths-verify)
4+
[![license](https://img.shields.io/npm/l/auths-verify.svg)](https://github.com/bordumb/auths-verify-widget/blob/main/LICENSE)
5+
6+
A drop-in web component for decentralized commit verification — the decentralized equivalent of GitHub's green "Verified" badge. Powered by [Auths](https://github.com/bordumb/auths) cryptographic attestation verification via WASM.
7+
8+
## Quick Start
9+
10+
```html
11+
<script type="module" src="https://unpkg.com/auths-verify/dist/auths-verify.mjs"></script>
12+
13+
<auths-verify
14+
attestation='{"version":1,"rid":"...","issuer":"did:keri:...","subject":"did:key:z...","device_public_key":"...","identity_signature":"...","device_signature":"...","revoked":false}'
15+
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
16+
></auths-verify>
17+
```
18+
19+
The widget loads WASM and verifies the attestation automatically on mount.
20+
21+
## Display Modes
22+
23+
### Badge (default)
24+
25+
Compact inline pill showing verification status.
26+
27+
```html
28+
<auths-verify attestation="..." public-key="..." mode="badge"></auths-verify>
29+
```
30+
31+
### Detail
32+
33+
Badge with an expandable panel showing the full attestation chain. Click the badge to expand.
34+
35+
```html
36+
<auths-verify attestations="[...]" public-key="..." mode="detail"></auths-verify>
37+
```
38+
39+
### Tooltip
40+
41+
Badge with a hover tooltip summarizing verification status.
42+
43+
```html
44+
<auths-verify attestation="..." public-key="..." mode="tooltip"></auths-verify>
45+
```
46+
47+
## Attributes
48+
49+
| Attribute | Type | Default | Description |
50+
|---|---|---|---|
51+
| `attestation` | JSON string | `""` | Single attestation to verify |
52+
| `attestations` | JSON array string | `""` | Chain of attestations to verify |
53+
| `public-key` | hex string | `""` | Root/issuer Ed25519 public key |
54+
| `mode` | `badge\|detail\|tooltip` | `badge` | Display mode |
55+
| `size` | `sm\|md\|lg` | `md` | Badge size |
56+
| `wasm-url` | string | `""` | Optional WASM URL override |
57+
| `auto-verify` | boolean | `true` | Verify on connect/attribute change |
58+
59+
## JavaScript API
60+
61+
```js
62+
const el = document.querySelector('auths-verify');
63+
64+
// Trigger verification manually
65+
await el.verify();
66+
67+
// Get the last verification report
68+
const report = el.getReport();
69+
70+
// Listen for events
71+
el.addEventListener('auths-verified', (e) => {
72+
console.log('Status:', e.detail.status.type);
73+
console.log('Chain:', e.detail.chain);
74+
});
75+
76+
el.addEventListener('auths-error', (e) => {
77+
console.error('Error:', e.detail.error);
78+
});
79+
```
80+
81+
## Theming
82+
83+
All colors are overridable via CSS custom properties:
84+
85+
```css
86+
auths-verify {
87+
--auths-verified-bg: #eef2ff;
88+
--auths-verified-fg: #3730a3;
89+
--auths-verified-border: #a5b4fc;
90+
--auths-font-family: 'Inter', sans-serif;
91+
--auths-border-radius: 6px;
92+
}
93+
```
94+
95+
Available properties: `--auths-{state}-bg`, `--auths-{state}-fg`, `--auths-{state}-border` for each state (`verified`, `invalid`, `expired`, `revoked`, `error`, `loading`, `idle`), plus `--auths-font-family`, `--auths-font-size`, `--auths-border-radius`, `--auths-detail-border-radius`.
96+
97+
## Development
98+
99+
### Prerequisites
100+
101+
- Node.js >= 18
102+
- Rust 1.93+ with `wasm32-unknown-unknown` target (for WASM builds)
103+
- [wasm-pack](https://rustwasm.github.io/wasm-pack/)
104+
- The [auths](https://github.com/bordumb/auths) repo cloned alongside this one:
105+
```
106+
auths-base/
107+
├── auths/ # main auths repo
108+
└── auths-verify-widget/ # this repo
109+
```
110+
111+
### Setup
112+
113+
```bash
114+
npm install
115+
```
116+
117+
### Build WASM (requires Rust)
118+
119+
```bash
120+
npm run build:wasm
121+
```
122+
123+
### Run tests
124+
125+
```bash
126+
# Unit tests (no WASM required — mocked)
127+
npm test
128+
129+
# Type check
130+
npm run typecheck
131+
```
132+
133+
### Dev server
134+
135+
```bash
136+
npm run dev
137+
```
138+
139+
Opens the examples directory with hot reload via Vite.
140+
141+
### Production build
142+
143+
```bash
144+
# Build WASM first
145+
npm run build:wasm
146+
147+
# Build both full (inlined WASM) and slim (split WASM) bundles
148+
npm run build
149+
```
150+
151+
Outputs:
152+
- `dist/auths-verify.js` — single file with WASM base64-inlined (~100-200KB gzipped)
153+
- `dist/slim/auths-verify.js` — smaller JS, loads `.wasm` separately
154+
155+
### Visual testing
156+
157+
Open `tests/visual/index.html` in a browser to see all states and modes rendered side by side.
158+
159+
## Build Outputs
160+
161+
| File | Description |
162+
|---|---|
163+
| `dist/auths-verify.js` | CDN-ready single file (WASM inlined) |
164+
| `dist/slim/auths-verify.js` | Smaller JS bundle (loads WASM separately) |
165+
166+
## License
167+
168+
MIT

‎examples/basic.html‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,47 @@
77
<style>
88
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
99
h1 { font-size: 20px; }
10+
h2 { font-size: 16px; margin-top: 32px; color: #6b7280; }
1011
code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
12+
.demo { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
13+
p { font-size: 14px; color: #4b5563; }
1114
</style>
1215
</head>
1316
<body>
1417
<h1>Basic Usage</h1>
15-
<p>Drop in a single <code>&lt;script&gt;</code> tag and use the <code>&lt;auths-verify&gt;</code> element:</p>
18+
<p>Drop in a single <code>&lt;script&gt;</code> tag and use the <code>&lt;auths-verify&gt;</code> element.</p>
19+
20+
<h2>Visual Demo (all states)</h2>
21+
<p>These show what the badge looks like in each verification state:</p>
22+
<div class="demo">
23+
<auths-verify data-state="verified" auto-verify="false"></auths-verify>
24+
<auths-verify data-state="invalid" auto-verify="false"></auths-verify>
25+
<auths-verify data-state="expired" auto-verify="false"></auths-verify>
26+
<auths-verify data-state="revoked" auto-verify="false"></auths-verify>
27+
<auths-verify data-state="loading" auto-verify="false"></auths-verify>
28+
<auths-verify data-state="error" auto-verify="false"></auths-verify>
29+
</div>
30+
31+
<h2>Live Verification</h2>
32+
<p>This widget runs real WASM verification. Replace the attestation and key with real data from <code>auths</code> to see a green "Verified" badge.</p>
1633

17-
<!-- Single attestation verification -->
1834
<auths-verify
35+
id="live"
1936
attestation='{"version":1,"rid":"example","issuer":"did:keri:abc123","subject":"did:key:z456","device_public_key":"aabbccdd","identity_signature":"sig1","device_signature":"sig2","revoked":false}'
2037
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
2138
></auths-verify>
22-
23-
<p style="margin-top:24px;font-size:13px;color:#6b7280;">
24-
The widget automatically loads WASM and verifies the attestation on mount.
25-
Check the browser console for events.
39+
<p style="font-size:12px;color:#9ca3af;margin-top:8px;">
40+
Shows "Error" with sample data because the signatures are not cryptographically valid.
41+
Check the browser console for event details.
2642
</p>
2743

28-
<!-- For development: load source directly via Vite -->
2944
<script type="module" src="../src/auths-verify.ts"></script>
30-
31-
<!-- For production: use the built file instead:
32-
<script src="../dist/auths-verify.js"></script>
33-
-->
34-
3545
<script>
36-
document.querySelector('auths-verify').addEventListener('auths-verified', (e) => {
46+
document.getElementById('live').addEventListener('auths-verified', (e) => {
3747
console.log('Verification result:', e.detail);
3848
});
39-
document.querySelector('auths-verify').addEventListener('auths-error', (e) => {
40-
console.log('Verification error:', e.detail);
49+
document.getElementById('live').addEventListener('auths-error', (e) => {
50+
console.log('Verification error (expected with sample data):', e.detail);
4151
});
4252
</script>
4353
</body>

‎examples/detail-mode.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,34 @@
77
<style>
88
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
99
h1 { font-size: 20px; }
10-
.example { margin-top: 24px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
10+
h2 { font-size: 16px; margin-top: 32px; color: #6b7280; }
11+
.example { margin-top: 12px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
1112
p { font-size: 14px; color: #4b5563; }
1213
</style>
1314
</head>
1415
<body>
1516
<h1>Detail Mode</h1>
1617
<p>Click the badge to expand the attestation chain details.</p>
1718

19+
<h2>Visual Demo</h2>
20+
<div class="example">
21+
<auths-verify mode="detail" data-state="verified" auto-verify="false"></auths-verify>
22+
<p style="font-size:12px;color:#9ca3af;margin-top:8px;">Click the badge to toggle the detail panel.</p>
23+
</div>
24+
25+
<h2>Live Verification</h2>
26+
<p>With real attestation data, the detail panel shows each link in the chain with issuer, subject, and validity.</p>
1827
<div class="example">
1928
<auths-verify
2029
mode="detail"
2130
attestations='[{"version":1,"rid":"root-to-device","issuer":"did:keri:root123","subject":"did:key:zDevice1","device_public_key":"aabb","identity_signature":"sig1","device_signature":"sig2","revoked":false},{"version":1,"rid":"device-to-leaf","issuer":"did:key:zDevice1","subject":"did:key:zLeaf1","device_public_key":"ccdd","identity_signature":"sig3","device_signature":"sig4","revoked":false}]'
2231
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
2332
></auths-verify>
33+
<p style="font-size:12px;color:#9ca3af;margin-top:8px;">
34+
Shows "Error" with sample data. Replace with real attestations from <code>auths</code>.
35+
</p>
2436
</div>
2537

26-
<p style="margin-top:24px;font-size:13px;color:#9ca3af;">
27-
The detail panel shows each link in the attestation chain with issuer, subject, and validity status.
28-
</p>
29-
3038
<script type="module" src="../src/auths-verify.ts"></script>
3139
</body>
3240
</html>

‎examples/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>auths-verify Examples</title>
7+
<style>
8+
body { font-family: system-ui, sans-serif; max-width: 480px; margin: 60px auto; padding: 0 20px; }
9+
h1 { font-size: 22px; }
10+
ul { list-style: none; padding: 0; }
11+
li { margin: 8px 0; }
12+
a { color: #2563eb; text-decoration: none; font-size: 16px; }
13+
a:hover { text-decoration: underline; }
14+
</style>
15+
</head>
16+
<body>
17+
<h1>auths-verify Examples</h1>
18+
<ul>
19+
<li><a href="basic.html">Basic</a> — minimal drop-in</li>
20+
<li><a href="detail-mode.html">Detail Mode</a> — expandable chain detail</li>
21+
<li><a href="tooltip-mode.html">Tooltip Mode</a> — hover tooltip</li>
22+
<li><a href="js-api.html">JS API</a> — programmatic usage</li>
23+
</ul>
24+
<h2 style="font-size:16px; margin-top:32px;">Tests</h2>
25+
<ul>
26+
<li><a href="../tests/visual/index.html">Visual Test Page</a> — all states and modes</li>
27+
</ul>
28+
</body>
29+
</html>

‎examples/tooltip-mode.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,43 @@
77
<style>
88
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
99
h1 { font-size: 20px; }
10+
h2 { font-size: 16px; margin-top: 32px; color: #6b7280; }
1011
.commit-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
1112
.commit-msg { font-size: 14px; color: #1f2937; }
1213
.commit-hash { font-size: 12px; color: #9ca3af; font-family: monospace; }
14+
p { font-size: 14px; color: #4b5563; }
1315
</style>
1416
</head>
1517
<body>
1618
<h1>Tooltip Mode</h1>
1719
<p>Hover over the badge to see verification summary in a tooltip.</p>
1820

19-
<div style="margin-top: 24px;">
21+
<h2>Visual Demo</h2>
22+
<p>These use static states — hover to see the tooltip.</p>
23+
<div style="margin-top: 12px;">
2024
<div class="commit-row">
21-
<auths-verify
22-
mode="tooltip"
23-
attestation='{"version":1,"rid":"commit-sign","issuer":"did:keri:abc123","subject":"did:key:z456","device_public_key":"aabb","identity_signature":"sig1","device_signature":"sig2","revoked":false}'
24-
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
25-
></auths-verify>
25+
<auths-verify mode="tooltip" data-state="verified" auto-verify="false"></auths-verify>
2626
<div>
2727
<div class="commit-msg">feat: add decentralized verification badge</div>
2828
<div class="commit-hash">a1b2c3d</div>
2929
</div>
3030
</div>
3131

3232
<div class="commit-row">
33-
<auths-verify
34-
mode="tooltip"
35-
attestation='{"version":1,"rid":"commit-sign-2","issuer":"did:keri:def456","subject":"did:key:z789","device_public_key":"eeff","identity_signature":"sig3","device_signature":"sig4","revoked":false}'
36-
public-key="1122334455667788990011223344556677889900112233445566778899001122"
37-
></auths-verify>
33+
<auths-verify mode="tooltip" data-state="invalid" auto-verify="false"></auths-verify>
3834
<div>
3935
<div class="commit-msg">fix: handle expired attestations gracefully</div>
4036
<div class="commit-hash">d4e5f6g</div>
4137
</div>
4238
</div>
39+
40+
<div class="commit-row">
41+
<auths-verify mode="tooltip" data-state="expired" auto-verify="false"></auths-verify>
42+
<div>
43+
<div class="commit-msg">chore: update dependencies</div>
44+
<div class="commit-hash">e5f6a7b</div>
45+
</div>
46+
</div>
4347
</div>
4448

4549
<script type="module" src="../src/auths-verify.ts"></script>

‎justfile‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Build WASM from auths-verifier crate and start the dev server
2+
demo:
3+
npm run build:wasm
4+
npm run dev

0 commit comments

Comments
 (0)