@ofidj/generator-fidj 1.5.0 → 1.7.0

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

@@ -409,9 +409,44 @@ function render() {
       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());
+    })();
+  }
 
+  // Forgetting the address it remembered and handing the person back to a
+  // session it never ended would recognise them again: the offer has to reach
+  // the provider, not just this browser's memory.
   element("forget-hint")?.addEventListener("click", () => {
     forgetSignIn(config.appId);
+    if (oidc) {
+      void (async () => {
+        window.location.assign(await oidc.beginLogin({prompt: "login"}));
+      })();
+      return;
+    }
     render();
   });
   void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
@@ -594,6 +629,25 @@ const refusals: Record<string, string> = {
 // 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;
@@ -649,10 +703,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)}">
@@ -663,8 +721,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])
@@ -675,6 +733,7 @@ function interactionScreen() {
     <label class="agreement-choice"><input type="checkbox" name="terms" value="true" required><span>I accept ${asking}'s service agreement.</span></label>
     ${details.termsUri ? `<p class="fineprint"><a href="${escape(details.termsUri)}" target="_blank" rel="noopener noreferrer">Service agreement</a>${details.privacyUri ? ` · <a href="${escape(details.privacyUri)}" target="_blank" rel="noopener noreferrer">Privacy notice</a>` : ""}</p>` : ""}
     <button class="primary" type="submit" name="action" value="continue">Allow and continue</button>
+    <button type="button" id="not-me" class="quiet">Not you? Sign in with another account</button>
     <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
   </form>`;
 
@@ -693,6 +752,19 @@ function interactionScreen() {
     field.type = hidden ? "text" : "password";
     button.textContent = hidden ? "Hide" : "Show";
   });
+  // Being recognised is the point, and a dead end when the person is not who
+  // Fidj thinks — a shared computer, a second account, somebody else's tab. So
+  // the screen that recognises them asks again on request, which is what
+  // prompt=login means, rather than merely forgetting a remembered address.
+  element("not-me")?.addEventListener("click", () => {
+    forgetSignIn(config.appId);
+    try {
+      sessionStorage.removeItem("fidj.interaction.email");
+    } catch {}
+    void (async () => {
+      window.location.assign(await oidc!.beginLogin({prompt: "login"}));
+    })();
+  });
   element("interaction")?.addEventListener("submit", () => {
     const address = element<HTMLInputElement>("email")?.value || "";
     try {

package/package.json

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