@ofidj/generator-fidj 3.13.0 → 3.15.0

package/README.md

@@ -40,7 +40,7 @@ one.
 
 > Maintainers: `bin/create-fidj.cjs` is the same scaffolder without Yeoman, for
 > tooling that runs from a checkout and cannot install `yo` —
-> `scripts/local-stack.py` and `fidj-app`'s `create:local` use it.
+> fidj-brain's `scripts/local-stack.py` and `fidj-app`'s `create:local` use it.
 > `test/parity.test.cjs` fails if either door ever gains an input the other
 > lacks. It is not an entry point to hand to anyone building an app.
 
@@ -87,14 +87,14 @@ build when one is supplied, the template's `@ofidj/node` range otherwise — and
 written to `APP_VERSION` and `app.config.json`. On Fidj's own apps it also shows
 the version `/v3/status` answers with, so the two can be compared without
 translation. Keep that range on the version this generator releases: the
-workspace's `scripts/check-versions.py` and this package's own suite both refuse
+workspace's `scripts/check-versions.py` (in fidj-brain) and this package's own suite both refuse
 the mismatch.
 
 ## Real validation repository
 
 [mleweb](https://github.com/mlefree/mleweb) is the thin command-line validation fixture whose generated website is mlefree.com. Its `package.json` passes the original Mario GIF, welcome text and About/CV/contact links directly into this generator. No custom downstream renderer is required. GitHub CI runs the same generation/build path on Node 22/24 and uploads artifacts. Publishing the site to gh-pages, which is what mlefree.com serves, is a separate deliberate job: it runs on mleweb's `master` or on an explicit workflow dispatch, never from a version branch.
 
-Run `npm test` for scaffolding/CLI safety tests. Generated projects include TypeScript checking and HTTP integration tests for live authorization and privacy isolation. See the [local acceptance walkthrough](../LOCAL-DEVELOPMENT.md). Follow TDD: add/run a failing generator or generated-app test before implementation, make it green, then refactor and rerun regression checks.
+Run `npm test` for scaffolding/CLI safety tests. Generated projects include TypeScript checking and HTTP integration tests for live authorization and privacy isolation. See the [local acceptance walkthrough](../fidj-brain/LOCAL-DEVELOPMENT.md). Follow TDD: add/run a failing generator or generated-app test before implementation, make it green, then refactor and rerun regression checks.
 
 
 ## Releasing to npm
@@ -178,7 +178,7 @@ A compatible issuer, REST API and registered callback without a fragment are pre
 
 ## Required service agreement
 
-[The workspace README](../README.md#entry-one-flow-the-same-everywhere) defines
+[The workspace README](../fidj-brain/README.md#entry-one-flow-the-same-everywhere) defines
 the flow every Fidj sign-in surface follows, and this generator owns the
 implementation the others render. In short: the first screen asks for an email,
 a password, **Sign in** and **Create an account**, and gates neither; creating an

package/generators/app/templates/typescript/package.json

@@ -15,8 +15,8 @@
     "privacy:rehearse": "npm run build && node --test test/server.test.mjs"
   },
   "dependencies": {
-    "@ofidj/entry": "^3.13.0",
-    "@ofidj/node": "^3.13.0"
+    "@ofidj/entry": "^3.15.0",
+    "@ofidj/node": "^3.15.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

package/generators/app/templates/typescript/scripts/render-content.mjs

@@ -32,6 +32,6 @@ function mountedHead(config) {
 export function renderContent(config) {
   // HTML is supplied by the developer at generation time, never by an app visitor.
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="referrer" content="no-referrer"><title>${escape(config.title)}</title><link rel="icon" href="${escape(config.favicon)}"><link rel="stylesheet" href="./main.css">${mountedHead(config)}</head><body>
-  <header class="topbar"><a class="brand" href="#/content"><img src="${escape(config.logo)}" alt="">${escape(config.title)}</a><nav class="content-nav" id="app-nav" aria-label="App navigation" hidden></nav></header>
+  <header class="topbar"><a class="brand" href="#/content"><img src="${escape(config.logo)}" alt=""><span class="brand-name">${escape(config.title)}</span></a><nav class="content-nav" id="app-nav" aria-label="App navigation" hidden></nav></header>
   <main><template id="public-content"><section class="card public-content"><h1>${escape(config.welcome)}</h1><div>${config.content}</div></section></template><div id="app" aria-live="polite"></div><footer>Built with Fidj · Your choices belong to this app.</footer></main><script type="module" src="./main.js"></script></body></html>`;
 }

package/generators/app/templates/typescript/src/content.ts

@@ -1,5 +1,5 @@
 import {agreementModel, signInErrorMessage, agreementRequired, agreementFromRefusal, verificationPending, pollVerification, rememberSignIn, forgetSignIn, signInHint, type SigninShape} from "@ofidj/entry";
-import {agreementScreen, bindAgreementScreen, bindPasswordReveal, acceptedAgreement, verificationWait, providerEntry, showEmailEntry, showVersionBadge, escape, masthead, highlightCells, badgeStrip, credentialFields, accountForm, returnNotice} from "@ofidj/entry/dom";
+import {agreementScreen, bindAgreementScreen, bindPasswordReveal, acceptedAgreement, verificationWait, providerEntry, showEmailEntry, showVersionBadge, escape, masthead, highlightCells, badgeStrip, credentialFields, accountForm, returnNotice, passkeySupported, passkeyAssertion, walletDoor} from "@ofidj/entry/dom";
 import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "@ofidj/entry/window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
@@ -10,6 +10,11 @@ const oidc = config.oidcIssuer ? new FidjOidcClient({issuer: config.oidcIssuer,
 const root = document.querySelector<HTMLDivElement>("#app")!;
 showVersionBadge(config.releaseVersion, config.title === "Fidj" ? config.apiEndpoint : undefined);
 const appPath = `/me/apps/${encodeURIComponent(config.appId)}`;
+// Passkeys (v3 P1-4): one relying party, Fidj's own domain. Only Fidj's own
+// shell runs the ceremony on its page; every other app reaches the passkey
+// through the Fidj window, like the rest of Fidj's sign-in.
+const passkeyHere = config.title === "Fidj" && passkeySupported();
+let signedInWithPasskey = false;
 let signedIn = false;
 let emailVerified = false;
 let anonymous = false;
@@ -45,7 +50,7 @@ let accountEmail = "";
 // with the agreement unchecked folded the form away and left the complaint
 // floating above a door the person could no longer see.
 let emailEntryOpen = false;
-const accountRoutes = ["forgot", "reset", "verify", "account"];
+const accountRoutes = ["forgot", "reset", "verify", "profile"];
 let linkToken = "";
 let verificationConfirmed = false;
 function currentRoute() {
@@ -88,17 +93,23 @@ function banner() {
 // account, and it lives on that account's screen.
 function appNav(current: "content" | "account") {
   const tab = (id: string, label: string, selected: boolean) =>
-    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}>${label}</button>`;
+    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}><span class="tab-label">${label}</span></button>`;
   const account = signedIn
     ? tab(
         "account-tab",
-        accountEmail ? `Account (${escape(accountEmail)})` : "Account",
+        accountEmail ? `Profile (${escape(accountEmail)})` : "Profile",
         current === "account",
       )
     : tab("account-tab", "Sign in", false);
   return tab("content-tab", "Content", current === "content") + account;
 }
 
+function profileSummary() {
+  const publicUrl = `${config.dashboardUrl}/#/pub/${encodeURIComponent(config.appId)}`;
+  const badgeUrl = `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}/badge`;
+  return `<header class="profile-summary"><div class="profile-summary-copy"><span class="eyebrow">Profile</span><strong>${escape(accountEmail)}</strong><span>${escape(config.title)}</span></div><a class="profile-public" href="${escape(publicUrl)}" target="_blank" rel="noopener"><img src="${escape(badgeUrl)}" alt="${escape(config.title)} public badge" width="133" height="20"></a><button id="exit" class="danger">Sign out</button></header>`;
+}
+
 // The bar belongs to the document, not to the screen being drawn: it survives
 // every route change, so it is filled rather than rebuilt with the page.
 function renderNav(current: "content" | "account") {
@@ -112,7 +123,7 @@ function renderNav(current: "content" | "account") {
 function wireNav() {
   element("content-tab")?.addEventListener("click", () => navigate("content"));
   element("account-tab")?.addEventListener("click", () =>
-    navigate(signedIn ? "account" : "signin"),
+    navigate(signedIn ? "profile" : "signin"),
   );
 }
 
@@ -557,15 +568,15 @@ function render() {
     route = "signin";
   else if (!["signin", "content", "privacy", ...accountRoutes].includes(route))
     route = "content";
-  // The privacy screen and the account screen became one. The address that
+  // The privacy screen and the profile screen became one. The address that
   // named the first still means something to anyone who bookmarked it, so it
   // arrives where that screen went rather than nowhere.
-  if (route === "privacy") route = signedIn ? "account" : "signin";
+  if (route === "privacy") route = signedIn ? "profile" : "signin";
   window.history.replaceState(null, "", "#/" + route);
-  // My account is a signed-in screen and keeps the app's chrome. Recovery and
+  // Profile is a signed-in screen and keeps the app's chrome. Recovery and
   // verification are reached without a session, so they stand alone.
   const standaloneAccount =
-    accountRoutes.includes(route) && !(route === "account" && signedIn);
+    accountRoutes.includes(route) && !(route === "profile" && signedIn);
   document.body.classList.toggle(
     "signin-view",
     route === "signin" || standaloneAccount,
@@ -584,11 +595,11 @@ function render() {
     renderAccount(route);
     return;
   }
-  if (route === "account") {
+  if (route === "profile") {
     // The two ways out, last and together: back to the app, or out of this
     // session. Leaving the app itself is a different decision and stays where
     // the things it erases are listed.
-    root.innerHTML = `<section class="card content-account">${banner()}${accountForm("account", {linkToken, verificationConfirmed, emailVerified, accountEmail})}${privacyBlock()}<div class="account-actions"><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button><button id="exit">Sign out</button></div></section>`;
+    root.innerHTML = `<section class="content-account">${profileSummary()}<div class="card profile-body">${banner()}${accountForm("account", {linkToken, verificationConfirmed, emailVerified, accountEmail}, {compact: true})}${privacyBlock()}</div></section>`;
     renderNav("account");
     wireAccount("account");
     wireSignOut();
@@ -614,8 +625,8 @@ function render() {
   root.innerHTML = `<section class="signin-shell"><div class="signin-intro${config.highlights?.length ? "" : " is-plain"}">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p></div>
   ${highlightCells(config.highlights)}</div>
-  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
-  <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>Your account, with Fidj</strong></p><p>Signing in creates one Fidj account you keep across every app that uses Fidj.</p><p>You choose what this app may store — and can export or erase it at any moment.</p></div></div>
+  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword}, {passkey: passkeyHere})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
+  ${config.title === "Fidj" ? walletDoor() : `<div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>Your account, with Fidj</strong></p><p>Signing in creates one Fidj account you keep across every app that uses Fidj.</p><p>You choose what this app may store — and can export or erase it at any moment.</p></div>`}</div>
   ${badgeStrip(config.badges)}</div></section>`;
   wireNav();
   element("anonymous")?.addEventListener("click", () => {
@@ -636,7 +647,7 @@ function render() {
       config.appId,
       config.signin === "button"
         ? ""
-        : credentialFields({email: signInEmail, password: signInPassword}),
+        : credentialFields({email: signInEmail, password: signInPassword}, {passkey: passkeyHere}),
       isFidjItself,
       config.signin as SigninShape,
     );
@@ -712,10 +723,21 @@ function render() {
       if (!acceptance) return;
       submitter?.setAttribute("data-busy", "true");
       void action(async () => {
-        if (
-          await refusedBeforeSignIn(signInEmail, signInPassword, false, acceptance)
-        )
-          return;
+        // A passkey sign-in has no password to send again: the agreement is
+        // accepted with a second touch of the same passkey.
+        const refused = signedInWithPasskey
+          ? await refusedBeforePasskey(acceptance)
+          : await refusedBeforeSignIn(signInEmail, signInPassword, false, acceptance);
+        if (refused) return;
+        await completeSignIn();
+      });
+      return;
+    }
+    // The first door (v3): the passkey, with nothing typed.
+    if (submitter?.name === "entry" && submitter.value === "passkey") {
+      submitter.setAttribute("data-busy", "true");
+      void action(async () => {
+        if (await refusedBeforePasskey()) return;
         await completeSignIn();
       });
       return;
@@ -758,6 +780,7 @@ async function refusedBeforeSignIn(
   signup: boolean,
   acceptance?: {termsAccepted: boolean; termsVersion: string},
 ): Promise<boolean> {
+  signedInWithPasskey = false;
   try {
     await sdk.login(email, password, {autoSignup: signup, ...acceptance});
     pendingAgreement = null;
@@ -782,6 +805,34 @@ async function refusedBeforeSignIn(
   }
 }
 
+// The same answers as a password sign-in, from a passkey: the browser runs the
+// ceremony against Fidj's challenge, and the SDK trades the answer for tokens.
+async function refusedBeforePasskey(
+  acceptance?: {termsAccepted: boolean; termsVersion: string},
+): Promise<boolean> {
+  signedInWithPasskey = true;
+  try {
+    const {options, ticket} = await sdk.passkeyLoginOptions();
+    const response = await passkeyAssertion(options);
+    await sdk.loginWithPasskey(ticket, response, acceptance);
+    pendingAgreement = null;
+    awaitingVerification = "";
+    return false;
+  } catch (error) {
+    if (agreementRequired(error)) {
+      pendingAgreement = agreementFromRefusal(error) || (await readAgreement());
+      if (!pendingAgreement) {
+        throw new Error("We cannot reach Fidj right now. Please try again.");
+      }
+      return true;
+    }
+    if ((error as any)?.name === "NotAllowedError") {
+      throw new Error("No passkey was used. Try again, or sign in with your email.");
+    }
+    throw new Error(signInErrorMessage(error));
+  }
+}
+
 // An API that refused without saying which agreement it wanted. Older ones
 // cannot say, so the app is asked directly; it is the same agreement unless the
 // owner published between the two calls.

package/generators/app/templates/typescript/src/main.ts

@@ -213,7 +213,7 @@ function render() {
   const canWrite = session?.roles.some((role) =>
     ["Owner", "Editor"].includes(role),
   );
-  root.innerHTML = `<header class="topbar"><a class="brand" href="/"><span class="app-symbol">✳</span>${escape(settings.title)}</a><a class="fidj-brand" href="${escape(settings.dashboardUrl)}" target="_blank" rel="noopener"><img src="/fidj-logo.png" alt="Fidj">Privacy with Fidj ↗</a></header>
+  root.innerHTML = `<header class="topbar"><a class="brand" href="/"><span class="app-symbol">✳</span><span class="brand-name">${escape(settings.title)}</span></a><a class="fidj-brand" href="${escape(settings.dashboardUrl)}" target="_blank" rel="noopener"><img src="/fidj-logo.png" alt="Fidj">Privacy with Fidj ↗</a></header>
   <main>${notice ? `<p class="notice" role="status">${escape(notice)}</p>` : ""}${error ? `<p class="error" role="alert">${escape(error)}</p>` : ""}
   ${
     !session

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "3.13.0",
+  "version": "3.15.0",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {