Changeset 6cbd014 in Klonkt for src/views/pages

Timestamp:

07/21/2026 01:32:23 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

d48ea02

Parents:

d43230f

git-author:

Robin <roboburr@…> (07/21/2026 01:30:40 AM)

git-committer:

Robin <roboburr@…> (07/21/2026 01:32:23 AM)

Message:

Feature: paid posts slice 4, cookie-less per-post unlock

The unlock leg of the paid-posts flow (klonkt-demo-3lz). A supporter who
already made a passkey (slice 3) opens a paid post and unlocks it with a
WebAuthn assertion, no account and no cookie.

• Cookie-less: GET /paid/challenge hands out authentication options plus a short-lived (300s) signed blob carrying the challenge, the post slug and the post's required cents. The client returns both to POST /paid/unlock; nothing is kept between the two requests.
• Discoverable credentials: allowCredentials is empty, so the browser offers the site's passkeys and the visitor stays pseudonymous.
• Gate checks, in order: valid+unexpired entitlement for this passkey and site (else 403 -> the page sends the visitor to /paid/link to register), tier (entitlement cents >= post cents, else 403), then the assertion is verified and the signature counter bumped (clone detection).
• The full post body is returned in that SAME response (renderPostBodyHtml, extracted from the page pipeline so unlocked HTML matches the normal render exactly). No unlock token becomes state.

Note: injected content covers text, images and external embeds; the
own-hosted audio player binds on load and is not re-initialised in
injected HTML yet (follow-up).

Changed files:
src/routes/posts.js

• export renderPostBodyHtml (shared by the page and the unlock route)

src/services/PasskeyService.js

• authenticationOptions, verifyAssertion, bumpCounter

src/routes/paid.js

• GET /paid/challenge, POST /paid/unlock (cookie-less)

src/views/pages/paid-gate.ejs

• Ontgrendel button + vendored SimpleWebAuthnBrowser assertion script; swaps the gate for the post on success, links to Patreon on 403

test/paid-unlock.test.js

• auth options challenge + empty allowCredentials, counter bump, tier gate, expired entitlement not served

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/views/pages/paid-gate.ejs (modified) (3 diffs)

src/views/pages/paid-gate.ejs

@@ -3 +3 @@
 </div>
 
-<article class="pg-page">
+<article class="pg-page" id="pg-page">
   <% if (typeof pgTitle !== 'undefined' && pgTitle) { %><h1 class="pg-title"><%= pgTitle %></h1><% } %>
 
@@ -18 +18 @@
       dan ontgrendel je 'm met je passkey. Geen account, geen cookie.
     </p>
-    <p class="pg-soon">Ontgrendelen met je Patreon-passkey komt eraan.</p>
+    <button type="button" id="pg-unlock" class="pg-btn">Ontgrendelen</button>
+    <p id="pg-status" class="pg-status" hidden></p>
   </section>
 </article>
+
+<script src="/assets/vendor/simplewebauthn-browser.umd.min.js" nonce="<%= cspNonce %>"></script>
+<script nonce="<%= cspNonce %>">
+(function () {
+  var base = "<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase ? siteUrlBase : '') %>";
+  var slug = "<%= pgSlug %>";
+  var btn = document.getElementById('pg-unlock');
+  var status = document.getElementById('pg-status');
+  var page = document.getElementById('pg-page');
+  function say(msg, err) { status.hidden = false; status.textContent = msg; status.classList.toggle('is-err', !!err); }
+  function toLink() { location.href = base + '/paid/link?post=' + encodeURIComponent(slug); }
+
+  if (!window.SimpleWebAuthnBrowser || !window.PublicKeyCredential) { btn.textContent = 'Word supporter'; btn.addEventListener('click', toLink); return; }
+
+  btn.addEventListener('click', function () {
+    btn.disabled = true;
+    say('Bevestig met je passkey…');
+    fetch(base + '/paid/challenge?post=' + encodeURIComponent(slug))
+      .then(function (r) { if (!r.ok) throw { link: true }; return r.json(); })
+      .then(function (data) {
+        return window.SimpleWebAuthnBrowser.startAuthentication({ optionsJSON: data.options })
+          .then(function (response) {
+            return fetch(base + '/paid/unlock', {
+              method: 'POST', headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ response: response, blob: data.blob }),
+            });
+          });
+      })
+      .then(function (r) { return r.json().then(function (j) { return { status: r.status, j: j }; }); })
+      .then(function (res) {
+        if (res.j && res.j.ok) {
+          // Swap the gate for the full post, client-side (no cookie kept).
+          var h = document.createElement('div');
+          h.innerHTML = (res.j.title ? '<h1 class="post-title">' + res.j.title + '</h1>' : '') +
+            '<div class="post-content">' + res.j.html + '</div>';
+          page.replaceWith(h);
+        } else if (res.status === 403) {
+          toLink();   // no valid passkey yet (or lapsed tier): link via Patreon
+        } else {
+          btn.disabled = false; say('Ontgrendelen mislukt. Probeer opnieuw.', true);
+        }
+      })
+      .catch(function (e) {
+        if (e && e.link) { toLink(); return; }
+        if (e && e.name === 'NotAllowedError') { toLink(); return; }   // cancelled / no passkey -> link
+        btn.disabled = false; say('Er ging iets mis. Probeer opnieuw.', true);
+      });
+  });
+})();
+</script>
 
 <style>
@@ -32 +83 @@
   .pg-h2 { font-size: 22px; margin: 0 0 8px; }
   .pg-sub { opacity: .85; line-height: 1.6; margin: 0 auto 12px; max-width: 34em; }
-  .pg-soon { display: inline-block; padding: 10px 18px; border-radius: 10px; font-weight: 600;
-    background: color-mix(in srgb, var(--accent, #6b8f71) 14%, transparent); color: var(--ink, inherit); }
+  .pg-btn { padding: 12px 24px; border: none; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
+    background: var(--accent, #6b8f71); color: #fff; }
+  .pg-btn:disabled { opacity: .6; cursor: default; }
+  .pg-status { margin: 12px 0 0; opacity: .9; }
+  .pg-status.is-err { color: #c0392b; }
 </style>