@ofidj/generator-fidj 1.4.2 → 1.6.0

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

@@ -407,7 +407,35 @@ function render() {
       config.title,
       config.appId,
       config.ownCredentials ? credentialFields() : "",
+      isFidjItself,
     );
+  // On Fidj itself there is nobody to hand the person to, so the credential
+  // screen is fetched straight away: what they see is the form, or their name.
+  // Once per document, and never once the provider has already answered — a
+  // refusal or a cancellation must not bounce them round again.
+  if (
+    oidc &&
+    isFidjItself &&
+    // Only from the sign-in screen. Without this it fired on every render where
+    // nobody was signed in — including the recovery screens, so a person opening
+    // a password-reset link was handed a sign-in form instead of the reset they
+    // had asked for, and could never finish.
+    element("signin") &&
+    !askedProvider &&
+    !interactionId &&
+    !signedIn &&
+    // Nor when the shell has something to say. A password reset ends on this
+    // screen with "your password has been changed"; leaving for the provider
+    // would swallow the one confirmation the person was waiting for.
+    !message
+  ) {
+    askedProvider = true;
+    void (async () => {
+      if (!(await providerRendersHere())) return;
+      window.location.assign(await oidc.beginLogin());
+    })();
+  }
+
   element("forget-hint")?.addEventListener("click", () => {
     forgetSignIn(config.appId);
     render();
@@ -588,6 +616,36 @@ const refusals: Record<string, string> = {
   refused: "That could not be completed. Please try again.",
 };
 
+// Fidj's own front end, told apart by the one fact it already carries: the
+// dashboard it points people to is itself. "Sign in with Fidj" is the right
+// label on an app that is not Fidj; here it names a provider the person is
+// standing in, and hides the form behind a click that only fetches it.
+let askedProvider = false;
+// Whether the provider renders its sign-in on this front end. A deployment
+// decides that, so the shell asks rather than assumes: hopping to a provider
+// that answers with its own page would land the person on the API's origin,
+// which is the thing this is meant to avoid.
+let signinOnThisUi: boolean | null = null;
+async function providerRendersHere() {
+  if (signinOnThisUi !== null) return signinOnThisUi;
+  try {
+    const response = await fetch(
+      new URL("status", config.apiEndpoint.replace(/\/?$/, "/")).href,
+      {signal: AbortSignal.timeout(5000)},
+    );
+    signinOnThisUi = response.ok && (await response.json()).signin === "fidj-ui";
+  } catch {
+    signinOnThisUi = false;
+  }
+  return signinOnThisUi;
+}
+const isFidjItself = (() => {
+  try {
+    return new URL(config.dashboardUrl).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+})();
 function addressedInteraction() {
   const query = window.location.hash.slice(2).split("?")[1] || "";
   return new URLSearchParams(query).get("interaction") || "";
@@ -636,10 +694,14 @@ function interactionScreen() {
   try {
     typed = sessionStorage.getItem("fidj.interaction.email") || "";
   } catch {}
+  // Fidj signing into Fidj: saying "the account behind fidj" and "fidj never
+  // sees your password" about itself is nonsense in the same family as offering
+  // to sign in with Fidj on Fidj.
+  const itself = details.app.id === config.appId;
   const body =
     details.prompt === "login"
-      ? `<h2>Sign in to continue to ${asking}</h2>
-  <p class="signin-lead">This is Fidj, the account behind ${asking}. One account, and separate choices for every app that uses it — ${asking} never sees your password.</p>
+      ? `<h2>${itself ? "Sign in to Fidj" : "Sign in to continue to " + asking}</h2>
+  <p class="signin-lead">${itself ? "One account across every app that uses Fidj, and a separate set of choices for each one." : `This is Fidj, the account behind ${asking}. One account, and separate choices for every app that uses it — ${asking} never sees your password.`}</p>
   ${notice}
   <form method="post" action="${escape(action)}" id="interaction">
     <input type="hidden" name="csrf" value="${escape(details.csrf)}">
@@ -650,8 +712,8 @@ function interactionScreen() {
     <button class="secondary" type="submit" name="action" value="signup">Create a Fidj account</button>
     <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
   </form>`
-      : `<h2>Continue to ${asking}</h2>
-  <p class="signin-lead">${asking} is asking for the information below. Optional privacy choices stay separate, and you can change them in Fidj at any time.</p>
+      : `<h2>${itself ? "Continue to Fidj" : "Continue to " + asking}</h2>
+  <p class="signin-lead">${itself ? "Fidj is asking for the information below. Optional privacy choices stay separate for every app, including this one." : `${asking} is asking for the information below. Optional privacy choices stay separate, and you can change them in Fidj at any time.`}</p>
   ${notice}
   <ul class="scope-list">${details.scopes
     .filter((scope) => scopeMeaning[scope])

package/generators/app/templates/typescript/src/service-agreement.ts

@@ -108,6 +108,7 @@ export function providerEntry(
   title: string,
   appId: string,
   credentials: string,
+  isFidjItself = false,
 ) {
   const escapeText = (value: unknown) =>
     String(value ?? "").replace(
@@ -123,10 +124,12 @@ export function providerEntry(
     ? `<p class="signin-lead">You signed in here with Fidj before. ${escapeText(title)} accounts are Fidj accounts — continue as yourself, or use another.</p>`
     : both
       ? `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. Sign in below, or let Fidj do it on its own page — where this site never sees your password.</p>`
-      : `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. You will sign in — or create yours — on Fidj's own page, so this site never sees your password.</p>`;
+      : isFidjItself
+        ? `<p class="signin-lead">One account across every app that uses Fidj, and a separate set of choices for each one. Sign in, or create yours, on the next screen.</p>`
+        : `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. You will sign in — or create yours — on Fidj's own page, so this site never sees your password.</p>`;
   const fidj = hint
     ? `<button class="primary" type="submit" name="entry" value="fidj">Continue as ${escapeText(hint)}</button><button type="button" id="forget-hint" class="quiet">Use a different account</button>`
-    : `<button class="${both ? "secondary" : "primary"}" type="submit" name="entry" value="fidj">Sign in with Fidj</button>`;
+    : `<button class="${both ? "secondary" : "primary"}" type="submit" name="entry" value="fidj">${isFidjItself ? "Sign in" : "Sign in with Fidj"}</button>`;
   if (!both) return lead + agreementMarkup() + fidj;
   // Both doors. A remembered address puts Fidj first because it is one tap; no
   // memory puts the form first, because that is what the person came to do.

package/package.json

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