Skip to content

Commit b618fc4

Browse files
author
Test User
committed
Initial commit: <auths-verify> web component
0 parents  commit b618fc4

22 files changed

Lines changed: 3711 additions & 0 deletions

‎.github/workflows/ci.yml‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
build-and-test:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- name: Checkout widget repo
14+
uses: actions/checkout@v4
15+
16+
- name: Checkout auths repo (for local @auths/verifier dependency)
17+
uses: actions/checkout@v4
18+
with:
19+
repository: bordumb/auths
20+
path: ../auths
21+
22+
- name: Install Rust
23+
uses: dtolnay/rust-toolchain@stable
24+
with:
25+
toolchain: "1.93"
26+
targets: wasm32-unknown-unknown
27+
28+
- name: Install wasm-pack
29+
run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
30+
31+
- name: Setup Node.js
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: 20
35+
cache: npm
36+
37+
- name: Install dependencies
38+
run: npm ci
39+
40+
- name: Build WASM
41+
run: npm run build:wasm
42+
43+
- name: Type check
44+
run: npm run typecheck
45+
46+
- name: Run tests
47+
run: npm run test
48+
49+
- name: Build (full + slim)
50+
run: npm run build
51+
52+
- name: Verify output exists
53+
run: |
54+
test -f dist/auths-verify.js || (echo "Missing dist/auths-verify.js" && exit 1)
55+
echo "Bundle size:"
56+
ls -lh dist/auths-verify.js

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
dist/
3+
wasm/
4+
*.tsbuildinfo
5+
.vite/

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 auths
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎examples/basic.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 — Basic Example</title>
7+
<style>
8+
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
9+
h1 { font-size: 20px; }
10+
code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
11+
</style>
12+
</head>
13+
<body>
14+
<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>
16+
17+
<!-- Single attestation verification -->
18+
<auths-verify
19+
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}'
20+
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
21+
></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.
26+
</p>
27+
28+
<!-- For development: load source directly via Vite -->
29+
<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+
35+
<script>
36+
document.querySelector('auths-verify').addEventListener('auths-verified', (e) => {
37+
console.log('Verification result:', e.detail);
38+
});
39+
document.querySelector('auths-verify').addEventListener('auths-error', (e) => {
40+
console.log('Verification error:', e.detail);
41+
});
42+
</script>
43+
</body>
44+
</html>

‎examples/detail-mode.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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 — Detail Mode</title>
7+
<style>
8+
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
9+
h1 { font-size: 20px; }
10+
.example { margin-top: 24px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
11+
p { font-size: 14px; color: #4b5563; }
12+
</style>
13+
</head>
14+
<body>
15+
<h1>Detail Mode</h1>
16+
<p>Click the badge to expand the attestation chain details.</p>
17+
18+
<div class="example">
19+
<auths-verify
20+
mode="detail"
21+
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}]'
22+
public-key="aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899"
23+
></auths-verify>
24+
</div>
25+
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+
30+
<script type="module" src="../src/auths-verify.ts"></script>
31+
</body>
32+
</html>

‎examples/js-api.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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 — JS API</title>
7+
<style>
8+
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
9+
h1 { font-size: 20px; }
10+
button { padding: 8px 16px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; }
11+
button:hover { background: #f9fafb; }
12+
#log { margin-top: 16px; padding: 12px; background: #1f2937; color: #d1d5db; border-radius: 8px; font-family: monospace; font-size: 12px; white-space: pre-wrap; min-height: 80px; }
13+
.controls { display: flex; gap: 8px; margin-top: 16px; }
14+
</style>
15+
</head>
16+
<body>
17+
<h1>Programmatic JS API</h1>
18+
<p>Use <code>element.verify()</code> and <code>element.getReport()</code> for full control.</p>
19+
20+
<auths-verify id="widget" auto-verify="false"></auths-verify>
21+
22+
<div class="controls">
23+
<button id="btn-verify">verify()</button>
24+
<button id="btn-report">getReport()</button>
25+
<button id="btn-set-data">Set attestation data</button>
26+
</div>
27+
28+
<div id="log">// Output will appear here</div>
29+
30+
<script type="module" src="../src/auths-verify.ts"></script>
31+
<script>
32+
const widget = document.getElementById('widget');
33+
const log = document.getElementById('log');
34+
35+
function appendLog(msg) {
36+
log.textContent += msg + '\n';
37+
}
38+
39+
widget.addEventListener('auths-verified', (e) => {
40+
appendLog('[event] auths-verified: ' + JSON.stringify(e.detail.status));
41+
});
42+
43+
widget.addEventListener('auths-error', (e) => {
44+
appendLog('[event] auths-error: ' + e.detail.error);
45+
});
46+
47+
document.getElementById('btn-set-data').addEventListener('click', () => {
48+
widget.attestation = JSON.stringify({
49+
version: 1,
50+
rid: 'example',
51+
issuer: 'did:keri:abc123',
52+
subject: 'did:key:z456',
53+
device_public_key: 'aabb',
54+
identity_signature: 'sig1',
55+
device_signature: 'sig2',
56+
revoked: false,
57+
});
58+
widget.publicKey = 'aabbccddeeff00112233445566778899aabbccddeeff00112233445566778899';
59+
appendLog('[action] Set attestation data');
60+
});
61+
62+
document.getElementById('btn-verify').addEventListener('click', async () => {
63+
appendLog('[action] Calling verify()...');
64+
await widget.verify();
65+
appendLog('[action] verify() completed');
66+
});
67+
68+
document.getElementById('btn-report').addEventListener('click', () => {
69+
const report = widget.getReport();
70+
appendLog('[action] getReport(): ' + JSON.stringify(report));
71+
});
72+
</script>
73+
</body>
74+
</html>

‎examples/tooltip-mode.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 — Tooltip Mode</title>
7+
<style>
8+
body { font-family: system-ui, sans-serif; max-width: 600px; margin: 60px auto; padding: 0 20px; }
9+
h1 { font-size: 20px; }
10+
.commit-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
11+
.commit-msg { font-size: 14px; color: #1f2937; }
12+
.commit-hash { font-size: 12px; color: #9ca3af; font-family: monospace; }
13+
</style>
14+
</head>
15+
<body>
16+
<h1>Tooltip Mode</h1>
17+
<p>Hover over the badge to see verification summary in a tooltip.</p>
18+
19+
<div style="margin-top: 24px;">
20+
<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>
26+
<div>
27+
<div class="commit-msg">feat: add decentralized verification badge</div>
28+
<div class="commit-hash">a1b2c3d</div>
29+
</div>
30+
</div>
31+
32+
<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>
38+
<div>
39+
<div class="commit-msg">fix: handle expired attestations gracefully</div>
40+
<div class="commit-hash">d4e5f6g</div>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<script type="module" src="../src/auths-verify.ts"></script>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)