From 19788260748432e78d5dbc9c8fef668876ebc42e Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 08:39:00 +0200
Subject: [PATCH] feat: ship a tiny sign-in app at /signin.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the "Sign in → /idp → 'go find a Solid app'" detour with a
real OIDC client baked into jspod. Welcome page's Sign in button now
points at /signin.html.

What signin.html does:
- Imports solid-oidc (zero-dep, AGPL, same JavaScriptSolidServer
  org as JSS and jspod) from a version-pinned jsdelivr URL
- On fresh visit: tries to restore prior session; if none, calls
  session.login(thisPod, /signin.html). solid-oidc handles dynamic
  client registration, PKCE, DPoP. Browser is redirected to JSS's
  /idp/auth with OAuth params — at which point JSS renders its
  real Passkey / Schnorr / username+password form
- On return (?code= present): session.handleRedirectFromLogin()
  exchanges code for DPoP-bound tokens, stores them in IndexedDB,
  redirects user back to the pod root

Collapses ~6 context switches (welcome → /idp message → Pilot →
type pod URL → /idp form → me/me → back) down to 2 (welcome →
/idp form → me/me → back).

ACL: signin.html ships with a sibling signin.html.acl giving
public read (mirrors JSS's index.html.acl pattern), so the page
is reachable before any session exists.

Implementation:
- signin.html (~4 KB) — single-file static page
- signin.html.acl — public-read for the page itself
- welcome.html — Sign in href changes from ./idp to ./signin.html
- index.js — always-overwrite copy alongside welcome.html
- package.json — files whitelist + 0.0.17 bump

Known follow-up (not in this PR): after sign-in, the welcome
page's locked-tile probe still uses plain fetch and so the tiles
stay dimmed. Auth-aware probes need solid-oidc on welcome.html
too, OR a separate /account.html dashboard. Tracking as next step.

Refs #1
---
 index.js        | 11 ++++++
 package.json    |  4 +-
 signin.html     | 99 +++++++++++++++++++++++++++++++++++++++++++++++++
 signin.html.acl | 23 ++++++++++++
 welcome.html    |  2 +-
 5 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 signin.html
 create mode 100644 signin.html.acl

diff --git a/index.js b/index.js
index 65e075f..dc326bd 100755
--- a/index.js
+++ b/index.js
@@ -473,6 +473,17 @@ ready.then((ok) => {
     const indexDst = join(options.root, 'index.html');
     if (existsSync(indexSrc)) copyFileSync(indexSrc, indexDst);
 
+    // signin.html is a jspod-owned static page; always-overwrite so
+    // upgrades to the sign-in flow ship immediately. Pair with a .acl
+    // granting public read so unauthenticated visitors can reach it
+    // (mirrors JSS's index.html.acl pattern).
+    const signinSrc = join(__dirname, 'signin.html');
+    const signinDst = join(options.root, 'signin.html');
+    if (existsSync(signinSrc)) copyFileSync(signinSrc, signinDst);
+    const signinAclSrc = join(__dirname, 'signin.html.acl');
+    const signinAclDst = join(options.root, 'signin.html.acl');
+    if (existsSync(signinAclSrc)) copyFileSync(signinAclSrc, signinAclDst);
+
     const linksSrc = join(__dirname, 'links.jsonld');
     const linksDst = join(options.root, 'public', 'links.jsonld');
     if (existsSync(linksSrc) && !existsSync(linksDst)) {
diff --git a/package.json b/package.json
index 21f4e49..99480a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jspod",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "JavaScript Solid Pod - Just works, batteries included",
   "type": "module",
   "main": "index.js",
@@ -12,6 +12,8 @@
     "data-browser.js",
     "data-browser.css",
     "welcome.html",
+    "signin.html",
+    "signin.html.acl",
     "links.jsonld"
   ],
   "scripts": {
diff --git a/signin.html b/signin.html
new file mode 100644
index 0000000..f0eb80c
--- /dev/null
+++ b/signin.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Sign in — Solid pod</title>
+<style>
+body{font:14px/1.6 system-ui,-apple-system,sans-serif;color:#222;background:#f3eee5;max-width:560px;margin:2em auto;padding:0 1em}
+.card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:1.5em 2em}
+h1{margin:0 0 .5em;font-weight:500;font-size:1.6em}
+.lede{color:#555;margin:0 0 1em}
+.creds{background:#f3eee5;padding:.8em 1em;border-radius:8px;margin:1em 0;font-family:"SFMono-Regular",Consolas,monospace}
+.creds .label{font-family:system-ui,sans-serif;color:#555;margin-right:.5em}
+.error{background:#fff0f0;color:#a00;padding:.8em 1em;border-radius:8px;margin:1em 0;display:none;font-family:"SFMono-Regular",Consolas,monospace;font-size:.9em;word-break:break-word}
+.error.show{display:block}
+a{color:#0a66c2;text-decoration:none}
+a:hover{text-decoration:underline}
+.btn{display:inline-block;padding:.6em 1.2em;border-radius:6px;text-decoration:none;font-size:.95em;background:#0a66c2;color:#fff;border:1px solid transparent;cursor:pointer}
+.btn:hover{background:#084e96;text-decoration:none}
+.btn-secondary{background:#fff;color:#222;border-color:#ddd}
+.btn-secondary:hover{background:#f0efeb}
+footer{margin-top:1.5em;padding-top:1em;border-top:1px solid #eee;color:#888;font-size:.85em;text-align:center}
+</style>
+</head>
+<body>
+<div class="card">
+<h1 id="title">Signing in…</h1>
+<p class="lede" id="lede">Starting Solid-OIDC handshake with <strong id="pod-url">this pod</strong>.</p>
+<div class="creds">
+<span class="label">Default sign-in:</span> me <span class="label">/</span> me
+</div>
+<div class="error" id="error"></div>
+<p id="retry" style="display:none"><a href="./signin.html" class="btn">Try again</a> <a href="./" class="btn btn-secondary">Back to pod</a></p>
+<footer>Powered by <a href="https://github.com/JavaScriptSolidServer/jspod">jspod</a> · <a href="https://github.com/JavaScriptSolidServer/solid-oidc">solid-oidc</a></footer>
+</div>
+<script type="module">
+// Tiny sign-in client. Uses solid-oidc (zero-dep, AGPL, same org).
+// Flow:
+//   1. Fresh visit  → try restore; if active, redirect to /. Else call
+//      session.login(idp, redirectUri) which bounces to /idp with OAuth
+//      params; JSS renders its real login form there.
+//   2. Return visit (?code= present) → handleRedirectFromLogin, then
+//      redirect home.
+import Session from 'https://cdn.jsdelivr.net/npm/solid-oidc@0.0.8/solid-oidc.js';
+
+const idp = new URL('./', window.location.href).href;
+const redirectUri = new URL('./signin.html', window.location.href).href;
+
+document.getElementById('pod-url').textContent = idp;
+
+const titleEl = document.getElementById('title');
+const ledeEl = document.getElementById('lede');
+const errorEl = document.getElementById('error');
+const retryEl = document.getElementById('retry');
+
+function fail(msg) {
+  titleEl.textContent = 'Sign-in failed';
+  ledeEl.style.display = 'none';
+  errorEl.textContent = msg;
+  errorEl.classList.add('show');
+  retryEl.style.display = 'block';
+}
+
+try {
+  const session = new Session();
+  const params = new URLSearchParams(window.location.search);
+
+  if (params.get('code')) {
+    titleEl.textContent = 'Completing sign-in…';
+    ledeEl.textContent = 'Exchanging the authorization code for a token.';
+    await session.handleRedirectFromLogin();
+    titleEl.textContent = 'Signed in';
+    ledeEl.textContent = 'WebID: ' + (session.webId || '(none)') + '. Redirecting…';
+    setTimeout(() => { window.location.href = './'; }, 800);
+  } else {
+    // Try to restore a prior session. solid-oidc throws "Missing
+    // refresh data" on a clean first visit — that's fine, it just
+    // means there's no session yet and we should kick off login.
+    let restored = false;
+    try {
+      await session.restore();
+      restored = session.isActive;
+    } catch {
+      restored = false;
+    }
+    if (restored) {
+      titleEl.textContent = 'Already signed in';
+      ledeEl.textContent = 'WebID: ' + session.webId + '. Redirecting…';
+      setTimeout(() => { window.location.href = './'; }, 400);
+    } else {
+      await session.login(idp, redirectUri);
+    }
+  }
+} catch (e) {
+  fail(e && e.message ? e.message : String(e));
+}
+</script>
+</body>
+</html>
diff --git a/signin.html.acl b/signin.html.acl
new file mode 100644
index 0000000..c0f3d58
--- /dev/null
+++ b/signin.html.acl
@@ -0,0 +1,23 @@
+{
+  "@context": {
+    "acl": "http://www.w3.org/ns/auth/acl#",
+    "foaf": "http://xmlns.com/foaf/0.1/"
+  },
+  "@graph": [
+    {
+      "@id": "#public",
+      "@type": "acl:Authorization",
+      "acl:agentClass": {
+        "@id": "foaf:Agent"
+      },
+      "acl:accessTo": {
+        "@id": "./signin.html"
+      },
+      "acl:mode": [
+        {
+          "@id": "acl:Read"
+        }
+      ]
+    }
+  ]
+}
diff --git a/welcome.html b/welcome.html
index 962def2..889c8eb 100644
--- a/welcome.html
+++ b/welcome.html
@@ -35,7 +35,7 @@ <h1>Your Solid pod</h1>
 <p class="lede">Running at <a id="server-url" href="./">this server</a>.</p>
 
 <div class="actions">
-<a href="./idp" class="btn btn-primary" data-cond="login" hidden>Sign in</a>
+<a href="./signin.html" class="btn btn-primary" data-cond="login" hidden>Sign in</a>
 <a href="./idp/register" class="btn btn-secondary" data-cond="register" hidden>Sign up</a>
 </div>