@tidecloak/create-nextjs 0.13.30 → 0.13.32

package/README.md

@@ -38,23 +38,22 @@ npm init @tidecloak/nextjs@latest my-app
 
 ```
 my-app/
-├── app
-|   └── api/
+├── app/
+|   ├── api/
 |   │   └── protected/
 |   │       └── route.js            <- A protected API on your NextJS server that verifies the user's access token
 |   ├── auth/
 |   │   └── redirect/
 |   │       └── page.jsx            <- A dedicated page to redirect the user back to once authentication is complete
 |   ├── home/
-|   |   └── page.jsx                <- Your home page the user goes to once autenticated
-|   ├── public/
-│   |   └── silent-check-sso.html
+|   |   └── page.jsx                <- Your home page the user goes to once authenticated
 |   ├── layout.jsx                  <- Entry point of your app before the user sees any actual pages
 |   └── page.jsx                    <- Your login page the user is brought to when they need to authenticate
-|
+├── public/
+│   └── silent-check-sso.html       <- Silent SSO check page served at the site root
 ├── tidecloak.json                  <- Where your Tidecloak configuration sits
-├── next.config.json
-├── middleware.js                   <- Run on each page navigation - this is where the Tideccloak token is verified
+├── next.config.js
+├── middleware.js                   <- Run on each page navigation - this is where the Tidecloak token is verified
 └── package.json
 ```
 
@@ -204,7 +203,8 @@ TideCloak provides server-side route protection for both the **Pages Router** an
 #### Options
 
 * **`config`** (`TidecloakConfig`): Your Tidecloak adapter JSON (downloaded from your TideCloak client settings).
-* **`protectedRoutes`** (`ProtectedRoutesMap`): Map of path patterns to arrays of required roles.
+* **`protectedRoutes`** (`ProtectedRoutesMap`): Map of path patterns to arrays of required roles. A trailing `/*` glob (e.g. `"/admin/*"`) also matches the bare base path (`/admin`).
+* **`cookieName`** (`string`, default `"kcToken"`): Name of the cookie that holds the access token.
 * **`onRequest`**<br>`(ctx: { token: string | null }, req: NextRequest) => NextResponse | void`<br>Hook before auth logic; can short-circuit by returning a `NextResponse`.
 * **`onSuccess`**<br>`(ctx: { payload: Record<string, any> }, req: NextRequest) => NextResponse | void`<br>Hook after successful auth & role checks; override the response by returning one.
 * **`onFailure`**<br>`(ctx: { token: string | null }, req: NextRequest) => NextResponse | void`<br>Hook when auth or role check fails; return a `NextResponse` to override.

package/init/realm.json

@@ -12,12 +12,12 @@
                 "description": "Standard application user"
             },
             {
-                "name": "_tide_dob.selfencrypt",
-                "description": "Tide E2EE self-encrypt DoB data"
+                "name": "_tide_message.selfencrypt",
+                "description": "Tide E2EE self-encrypt message data"
             },
             {
-                "name": "_tide_dob.selfdecrypt",
-                "description": "Tide E2EE self-decrypt DoB data"
+                "name": "_tide_message.selfdecrypt",
+                "description": "Tide E2EE self-decrypt message data"
             },
             {
                 "name": "default-roles-nextjs-test",
@@ -25,8 +25,8 @@
                 "composite": true,
                 "composites": {
                     "realm": [
-                        "_tide_dob.selfencrypt",
-                        "_tide_dob.selfdecrypt",
+                        "_tide_message.selfencrypt",
+                        "_tide_message.selfdecrypt",
                         "appUser"
                     ]
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidecloak/create-nextjs",
-  "version": "0.13.30",
+  "version": "0.13.32",
   "type": "module",
   "description": "Scaffold a TideCloak-ready Next.js app with optional IAM setup and working auth - start building instantly with a live example",
   "bin": {

package/template-js-app/app/home/page.jsx

@@ -5,19 +5,40 @@ import { useTideCloak } from '@tidecloak/nextjs'
 import tcConfig from "../../tidecloak.json"
 
 export default function HomePage() {
-  const { logout, getValueFromIdToken, hasRealmRole, token } = useTideCloak()
+  const { logout, getValueFromIdToken, hasRealmRole, token, doEncrypt, doDecrypt } = useTideCloak()
 
   const [username, setUsername] = useState("")
   const [hasDefaultRole, setHasDefaultRole] = useState(false)
   const [verifyResult, setVerifyResult] = useState(null)
   const [verifying, setVerifying] = useState(false)
 
+  // Self encrypt/decrypt: data is bound to THIS user's identity — only they can
+  // decrypt it. The "message" tag matches the _tide_message.selfencrypt/.selfdecrypt
+  // roles granted to every user in init/realm.json.
+  const TAG = "message"
+  const [text, setText] = useState("")        // always the decrypted value, editable
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState("")
+  const [cryptoErr, setCryptoErr] = useState("")
+
+  // localStorage key for the saved note, namespaced per user (vuid).
+  const storageKey = () => `tide-note:${getValueFromIdToken("vuid")}`
+
   useEffect(() => {
     if (token) {
       const name = getValueFromIdToken("preferred_username")
       const defaultRole = hasRealmRole(`default-roles-${tcConfig["realm"]}`)
       setUsername(name);
       setHasDefaultRole(defaultRole)
+
+      // Restore the saved note. Only the CIPHERTEXT is persisted; we decrypt it
+      // client-side here so the field shows plaintext when you log back in.
+      const stored = typeof window !== "undefined" ? localStorage.getItem(storageKey()) : null
+      if (stored) {
+        doDecrypt([{ encrypted: stored, tags: [TAG] }])
+          .then((res) => setText(String(res[0])))
+          .catch(() => {})
+      }
     }
 
   }, [token])
@@ -48,6 +69,25 @@ export default function HomePage() {
     }
   }, [token])
 
+  // Submit = encrypt the current value, persist the ciphertext, then decrypt it
+  // straight back so the field keeps showing plaintext. We store only the
+  // ciphertext (here in localStorage; in a real app, on your server) — it's
+  // decrypted again when you log back in.
+  const onSubmit = useCallback(async () => {
+    setBusy(true); setCryptoErr(""); setStatus("")
+    try {
+      const [ct] = await doEncrypt([{ data: text, tags: [TAG] }])
+      if (typeof window !== "undefined") localStorage.setItem(storageKey(), ct)
+      const [pt] = await doDecrypt([{ encrypted: ct, tags: [TAG] }])
+      setText(String(pt))
+      setStatus("Message successfully stored")
+    } catch (err) {
+      setCryptoErr(err.message || "Failed")
+    } finally {
+      setBusy(false)
+    }
+  }, [text, doEncrypt, doDecrypt])
+
   return (
     <div style={containerStyle}>
       <div style={cardStyle}>
@@ -75,11 +115,45 @@ export default function HomePage() {
             {verifyResult}
           </p>
         )}
+
+        {/* ── Encrypted note: always shown decrypted; Submit re-encrypts then decrypts ── */}
+        <div style={{ marginTop: '1.5rem', borderTop: '1px solid #eee', paddingTop: '1rem', textAlign: 'left' }}>
+          <h2 style={{ fontSize: '1.1rem', margin: '0 0 0.25rem' }}>Your encrypted note</h2>
+          <p style={{ margin: '0 0 0.5rem', color: '#777', fontSize: '0.85rem' }}>
+            This is an encrypted textbox under your own identity — only you can decrypt it.
+          </p>
+
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Type your note…"
+            style={textareaStyle}
+          />
+          <button onClick={onSubmit} style={buttonStyle} disabled={busy}>
+            {busy ? 'Submitting…' : 'Submit'}
+          </button>
+
+          {status && <p style={{ color: 'green', marginTop: '0.5rem', fontSize: '0.85rem' }}>{status}</p>}
+
+          {cryptoErr && <p style={{ color: 'red', marginTop: '0.5rem' }}>{cryptoErr}</p>}
+        </div>
       </div>
     </div>
   )
 }
 
+const textareaStyle = {
+  width: '100%',
+  minHeight: '64px',
+  padding: '0.5rem',
+  borderRadius: '4px',
+  border: '1px solid #ccc',
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  fontSize: '0.9rem',
+}
+
+
 const containerStyle = {
   minHeight: '100vh',
   display: 'flex',

package/template-js-app/app/tide_dpop/[...path]/route.js

@@ -0,0 +1,35 @@
+import fs from "fs"
+import path from "path"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tide DPoP resource-server endpoint.
+//
+// DPoP is enabled by default, and the SDK's DPoP flow loads this page from your
+// own origin at:
+//   /tide_dpop/iss/<issuer-hex>/aud/<client-hex>/tide_dpop_auth.html
+//
+// This catch-all route serves the single bundled `public/tide_dpop_auth.html`
+// for any such path, with the two response headers Tide requires:
+//   • Content-Security-Policy — the sha256 hashes pin the file's inline
+//     script/style (so only that exact code runs).
+//   • Allow-CSP-From: * — lets the ORK embed this page cross-origin.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const htmlPath = path.join(process.cwd(), "public", "tide_dpop_auth.html")
+
+const CSP =
+  "default-src 'self'; " +
+  "script-src 'self' 'sha256-utc6UrebuHOyLd/2aiMXS/p1EDy9UZBDe/XEMKDw9Mc='; " +
+  "style-src 'self' 'sha256-1tYy8m3c1KLuGI2eID9TfLkc50Y+iSPJMpI7n/apN/w=' 'sha256-F7OJTdJYct4J+cQfuJUoDauitndqt8pAc8EbA8gwDPU='"
+
+export async function GET() {
+  const html = fs.readFileSync(htmlPath, "utf-8")
+  return new Response(html, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/html",
+      "Content-Security-Policy": CSP,
+      "Allow-CSP-From": "*",
+    },
+  })
+}

package/template-js-app/init/realm.json

@@ -12,12 +12,12 @@
                 "description": "Standard application user"
             },
             {
-                "name": "_tide_dob.selfencrypt",
-                "description": "Tide E2EE self-encrypt DoB data"
+                "name": "_tide_message.selfencrypt",
+                "description": "Tide E2EE self-encrypt message data"
             },
             {
-                "name": "_tide_dob.selfdecrypt",
-                "description": "Tide E2EE self-decrypt DoB data"
+                "name": "_tide_message.selfdecrypt",
+                "description": "Tide E2EE self-decrypt message data"
             },
             {
                 "name": "default-roles-nextjs-test",
@@ -25,8 +25,8 @@
                 "composite": true,
                 "composites": {
                     "realm": [
-                        "_tide_dob.selfencrypt",
-                        "_tide_dob.selfdecrypt",
+                        "_tide_message.selfencrypt",
+                        "_tide_message.selfdecrypt",
                         "appUser"
                     ]
                 }

package/template-js-app/init/tcinit.sh

@@ -135,7 +135,7 @@ echo "🔐 Initializing Tide realm + IGA..."
 curl -s -X POST "${TIDECLOAK_LOCAL_URL}/admin/realms/${REALM_NAME}/vendorResources/setUpTideRealm" \
   -H "Authorization: Bearer ${TOKEN}" \
   -H "Content-Type: application/x-www-form-urlencoded" \
-  --data-urlencode "email=email@tide.org" >/dev/null
+  --data-urlencode "email=${SUBSCRIPTION_EMAIL:-test@demo.org}" >/dev/null
 
 curl -s -X POST "${TIDECLOAK_LOCAL_URL}/admin/realms/${REALM_NAME}/tide-admin/toggle-iga" \
      -H "Authorization: Bearer ${TOKEN}" \

package/template-js-app/middleware.js

@@ -7,6 +7,9 @@ import tcConfig from "./tidecloak.json";
 export default createTideCloakMiddleware({
   config: tcConfig,
   protectedRoutes:{
+    // "offline_access" is granted to every authenticated user, so this protects
+    // the route for "any logged-in user". Swap it for a real realm/client role
+    // (e.g. "appUser") to demonstrate role-based access control.
     "/protected": ["offline_access"]
   },
   onFailure: (ctx, req) => {
@@ -19,13 +22,14 @@ export default createTideCloakMiddleware({
   onSuccess: (ctx, req) => {
     return NextResponse.next();
   },
-  onError: (ctx, req) => {
+  // Note: onError receives (err, req) - the error is the first argument.
+  onError: (err, req) => {
     console.error("[Middleware] ", err);
     return NextResponse.redirect(new URL("/auth/redirect", req.url));
   }
 })
 
-//Which routes the middleware should run on:
+//Which routes the middleware should run on (include the bare path and subpaths):
 export const config = {
-  matcher: ["/protected/:path*"],
+  matcher: ["/protected", "/protected/:path*"],
 };

package/template-js-app/package.json

@@ -12,6 +12,6 @@
     "next": "16.x",
     "react": "19.x",
     "react-dom": "19.x",
-    "@tidecloak/nextjs": "^0.13.30"
+    "@tidecloak/nextjs": "^0.13.32"
   }
 }

package/template-js-app/public/tide_dpop_auth.html

@@ -0,0 +1,238 @@
+<html>
+
+<head>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: #f6f6f7;
+            font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+
+        .status {
+            text-align: center;
+            opacity: 0;
+        }
+
+        .status.visible {
+            opacity: 1;
+        }
+
+        .checkmark-circle {
+            width: 72px;
+            height: 72px;
+            margin: 0 auto 16px;
+        }
+
+        .checkmark-circle circle {
+            fill: none;
+            stroke: #039855;
+            stroke-width: 3;
+            stroke-dasharray: 201;
+            stroke-dashoffset: 201;
+        }
+
+        .checkmark-circle path {
+            fill: none;
+            stroke: #039855;
+            stroke-width: 3;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-dasharray: 50;
+            stroke-dashoffset: 50;
+        }
+
+        .status.visible .checkmark-circle circle {
+            animation: circle-draw 0.5s ease forwards;
+        }
+
+        .status.visible .checkmark-circle path {
+            animation: check-draw 0.3s 0.4s ease forwards;
+        }
+
+        .status.visible .status-text {
+            animation: fade-in 0.3s 0.6s ease forwards;
+        }
+
+        .status-text {
+            font-size: 15px;
+            color: #464647;
+            margin: 0;
+            opacity: 0;
+        }
+
+        @keyframes circle-draw {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        @keyframes check-draw {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        @keyframes fade-in {
+            to {
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="status" id="status">
+        <svg class="checkmark-circle" viewBox="0 0 72 72">
+            <circle cx="36" cy="36" r="32" />
+            <path d="M22 36 l10 10 l18 -20" />
+        </svg>
+        <p class="status-text">Session verified</p>
+    </div>
+    <script>
+        const thisVersion = 1;
+
+        const hexToStr = (hex) => {
+            if (!hex || hex.length % 2 !== 0 || !/^[0-9a-fA-F]+$/.test(hex)) throw Error("Invalid hex string");
+            const bytes = new Uint8Array(hex.length / 2);
+            for (let i = 0; i < bytes.length; i++) bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
+            return new TextDecoder().decode(bytes);
+        };
+
+        const createDbName = async (issuer, clientId) => {
+            const encoder = new TextEncoder();
+            const issuerHash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', encoder.encode(issuer))).slice(0, 8))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
+            const clientHash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', encoder.encode(clientId))).slice(0, 8))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
+            return `dpop:${issuerHash}:${clientHash}`;
+        };
+
+        // Determine target window: popup has window.opener, iframe has window.parent
+        const isPopup = !!window.opener;
+        const targetWindow = window.opener || window.parent;
+
+        if (!targetWindow || targetWindow === window) {
+            document.body.textContent = "Error: No parent or opener window found.";
+            throw Error("No target window available for postMessage");
+        }
+
+        const urlParams = new URL(window.location.href).searchParams;
+        const enclaveVersion = urlParams.get("version");
+        if (!enclaveVersion) throw Error("No enclave version provided in url");
+        let openerOrigin = urlParams.get("openerOrigin");
+        if (!openerOrigin) throw Error("No opener origin provided in url");
+        openerOrigin = new URL(decodeURIComponent(openerOrigin)).origin;
+
+        const showSuccess = () => {
+            document.getElementById('status').classList.add('visible');
+        };
+
+        const version1Flow = async () => {
+            const paths = new URL(window.location.href).pathname.split("/");
+            const iss = hexToStr(paths[paths.indexOf("iss") + 1]);
+            const aud = hexToStr(paths[paths.indexOf("aud") + 1]);
+            const dbname = await createDbName(iss, aud);
+            let dpopKey;
+            try {
+                // Chrome 125+: requestStorageAccess({ indexedDB: true }) returns a handle
+                // whose .indexedDB factory points directly at the unpartitioned bucket.
+                // If permission was already granted (within 30 days) this resolves
+                // automatically with no prompt.
+                //
+                // In popup mode we have first-party context so we can access IndexedDB directly.
+                let idbFactory;
+                if (isPopup) {
+                    idbFactory = window.indexedDB;
+                } else {
+                    const handle = await document.requestStorageAccess({ indexedDB: true });
+                    idbFactory = handle.indexedDB;
+                }
+
+                const db = await new Promise((resolve, reject) => {
+                    const req = idbFactory.open(dbname);
+                    req.onsuccess = () => resolve(req.result);
+                    req.onerror = () => reject(req.error);
+                });
+                dpopKey = await new Promise((resolve, reject) => {
+                    const tx = db.transaction("main", "readonly");
+                    const store = tx.objectStore("main");
+                    const req = store.get("dpopState");
+                    req.onsuccess = () => resolve(req.result);
+                    req.onerror = () => reject(req.error);
+                });
+                db.close();
+                if (!dpopKey || !dpopKey.keys) throw Error("No DPoP key found in IndexedDB");
+            } catch (ex) {
+                const isStorageBlocked =
+                    ex?.name === "NotAllowedError" ||
+                    (ex instanceof DOMException && (
+                        ex.name === "SecurityError" ||
+                        ex.name === "UnknownError" ||
+                        ex.message?.includes("not a known object store name")
+                    ));
+                const detail = isStorageBlocked
+                    ? "Browser is blocking third-party storage. Please allow storage access or disable strict tracking protection."
+                    : "Failed to access DPoP key from IndexedDB.";
+                targetWindow.postMessage({ type: "error", message: "db failed", detail }, openerOrigin);
+                document.body.textContent = detail;
+                throw ex;
+            }
+
+            const challenge = () => new Promise((resolve) => {
+                const handler = (event) => {
+                    if (event.origin !== openerOrigin) return;
+                    if (event.data.type === "challenge") {
+                        resolve(event.data.challenge);
+                        window.removeEventListener("message", handler);
+                    }
+                };
+                window.addEventListener("message", handler, false);
+            });
+
+            const pre_challenge = challenge();
+
+            targetWindow.postMessage({ type: "pageLoaded", message: "yay" }, openerOrigin);
+
+            const challengeResp = await pre_challenge;
+            if (typeof challengeResp !== "string" || challengeResp?.length != 64) throw Error("Unexpect challenge format");
+
+            const te = new TextEncoder();
+            const signatureInput = te.encode("dpop-auth-challenge:" + challengeResp);
+            const algName = dpopKey.keys.privateKey.algorithm.name;
+            const signParams = algName === "ECDSA"
+                ? { name: "ECDSA", hash: { "P-256": "SHA-256", "P-384": "SHA-384", "P-521": "SHA-512" }[dpopKey.keys.privateKey.algorithm.namedCurve] }
+                : { name: algName };
+            const signature = await crypto.subtle.sign(signParams, dpopKey.keys.privateKey, signatureInput);
+
+            const publicJwk = await crypto.subtle.exportKey("jwk", dpopKey.keys.publicKey);
+
+            targetWindow.postMessage({
+                type: "challenge response",
+                message: {
+                    dpop_public: JSON.stringify({ crv: publicJwk.crv, kty: publicJwk.kty, x: publicJwk.x, y: publicJwk.y }),
+                    signature: btoa(String.fromCharCode(...new Uint8Array(signature)))
+                }
+            }, openerOrigin);
+
+            showSuccess();
+        };
+
+        const versionFlows = new Map([[1, version1Flow]]);
+        const latestFlow = version1Flow;
+
+        (async () => {
+            if (Number(enclaveVersion) >= thisVersion) await latestFlow();
+            else {
+                const flow = versionFlows.get(Number(enclaveVersion));
+                if (!flow) throw Error("Cannot find supported enclave version: " + enclaveVersion);
+                await flow();
+            }
+        })();
+    </script>
+</body>
+
+</html>

package/template-ts-app/app/api/protected/route.ts

@@ -16,7 +16,7 @@ export async function GET(request: NextRequest): Promise<NextResponse> {
   const token = authHeader.split(' ')[1]
 
   try {
-    const user = await verifyTideCloakToken(tcConfig, token, [ALLOWED_ROLE])
+    const user = await verifyTideCloakToken(tcConfig, token, [ALLOWED_ROLE]) as Record<string, any>
 
     if (!user) {
       return NextResponse.json(

package/template-ts-app/app/home/page.tsx

@@ -6,19 +6,40 @@ import tcConfig from "../../tidecloak.json"
 
 
 export default function HomePage() {
-  const { logout, getValueFromIdToken, hasRealmRole, token } = useTideCloak()
+  const { logout, getValueFromIdToken, hasRealmRole, token, doEncrypt, doDecrypt } = useTideCloak()
 
   const [username, setUsername] = useState("")
   const [hasDefaultRole, setHasDefaultRole] = useState(false)
   const [verifyResult, setVerifyResult] = useState<string | null>(null)
   const [verifying, setVerifying] = useState(false)
 
-    useEffect(() => {
+  // Self encrypt/decrypt: data is bound to THIS user's identity — only they can
+  // decrypt it. The "message" tag matches the _tide_message.selfencrypt/.selfdecrypt
+  // roles granted to every user in init/realm.json.
+  const TAG = "message"
+  const [text, setText] = useState("")        // always the decrypted value, editable
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState("")
+  const [cryptoErr, setCryptoErr] = useState("")
+
+  // localStorage key for the saved note, namespaced per user (vuid).
+  const storageKey = () => `tide-note:${getValueFromIdToken("vuid")}`
+
+  useEffect(() => {
     if (token) {
       const name = getValueFromIdToken("preferred_username")
       const defaultRole = hasRealmRole(`default-roles-${tcConfig["realm"]}`)
       setUsername(name);
       setHasDefaultRole(defaultRole)
+
+      // Restore the saved note. Only the CIPHERTEXT is persisted; we decrypt it
+      // client-side here so the field shows plaintext when you log back in.
+      const stored = typeof window !== "undefined" ? localStorage.getItem(storageKey()) : null
+      if (stored) {
+        doDecrypt([{ encrypted: stored, tags: [TAG] }])
+          .then((res) => setText(String(res[0])))
+          .catch(() => {})
+      }
     }
 
   }, [token])
@@ -50,6 +71,25 @@ export default function HomePage() {
     }
   }, [token])
 
+  // Submit = encrypt the current value, persist the ciphertext, then decrypt it
+  // straight back so the field keeps showing plaintext. We store only the
+  // ciphertext (here in localStorage; in a real app, on your server) — it's
+  // decrypted again when you log back in.
+  const onSubmit = useCallback(async () => {
+    setBusy(true); setCryptoErr(""); setStatus("")
+    try {
+      const [ct] = await doEncrypt([{ data: text, tags: [TAG] }])
+      if (typeof window !== "undefined") localStorage.setItem(storageKey(), ct)
+      const [pt] = await doDecrypt([{ encrypted: ct, tags: [TAG] }])
+      setText(String(pt))
+      setStatus("Message successfully stored")
+    } catch (err: any) {
+      setCryptoErr(err.message || "Failed")
+    } finally {
+      setBusy(false)
+    }
+  }, [text, doEncrypt, doDecrypt])
+
   return (
     <div style={containerStyle}>
       <div style={cardStyle}>
@@ -75,11 +115,45 @@ export default function HomePage() {
             {verifyResult}
           </p>
         )}
+
+        {/* ── Encrypted note: always shown decrypted; Submit re-encrypts then decrypts ── */}
+        <div style={{ marginTop: '1.5rem', borderTop: '1px solid #eee', paddingTop: '1rem', textAlign: 'left' }}>
+          <h2 style={{ fontSize: '1.1rem', margin: '0 0 0.25rem' }}>Your encrypted note</h2>
+          <p style={{ margin: '0 0 0.5rem', color: '#777', fontSize: '0.85rem' }}>
+            This is an encrypted textbox under your own identity — only you can decrypt it.
+          </p>
+
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder="Type your note…"
+            style={textareaStyle}
+          />
+          <button onClick={onSubmit} style={buttonStyle} disabled={busy}>
+            {busy ? 'Submitting…' : 'Submit'}
+          </button>
+
+          {status && <p style={{ color: 'green', marginTop: '0.5rem', fontSize: '0.85rem' }}>{status}</p>}
+
+          {cryptoErr && <p style={{ color: 'red', marginTop: '0.5rem' }}>{cryptoErr}</p>}
+        </div>
       </div>
     </div>
   )
 }
 
+const textareaStyle: React.CSSProperties = {
+  width: '100%',
+  minHeight: '64px',
+  padding: '0.5rem',
+  borderRadius: '4px',
+  border: '1px solid #ccc',
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  fontSize: '0.9rem',
+}
+
+
 const containerStyle: React.CSSProperties = {
   minHeight: '100vh',
   display: 'flex',

package/template-ts-app/app/page.tsx

@@ -35,7 +35,7 @@ const buttonStyle: CSSProperties = {
   cursor: 'pointer',
 }
 
-export default function LoginPage(): JSX.Element {
+export default function LoginPage() {
   const { login, authenticated } = useTideCloak()
   const router = useRouter()
 

package/template-ts-app/app/tide_dpop/[...path]/route.ts

@@ -0,0 +1,35 @@
+import fs from "fs"
+import path from "path"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tide DPoP resource-server endpoint.
+//
+// DPoP is enabled by default, and the SDK's DPoP flow loads this page from your
+// own origin at:
+//   /tide_dpop/iss/<issuer-hex>/aud/<client-hex>/tide_dpop_auth.html
+//
+// This catch-all route serves the single bundled `public/tide_dpop_auth.html`
+// for any such path, with the two response headers Tide requires:
+//   • Content-Security-Policy — the sha256 hashes pin the file's inline
+//     script/style (so only that exact code runs).
+//   • Allow-CSP-From: * — lets the ORK embed this page cross-origin.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const htmlPath = path.join(process.cwd(), "public", "tide_dpop_auth.html")
+
+const CSP =
+  "default-src 'self'; " +
+  "script-src 'self' 'sha256-utc6UrebuHOyLd/2aiMXS/p1EDy9UZBDe/XEMKDw9Mc='; " +
+  "style-src 'self' 'sha256-1tYy8m3c1KLuGI2eID9TfLkc50Y+iSPJMpI7n/apN/w=' 'sha256-F7OJTdJYct4J+cQfuJUoDauitndqt8pAc8EbA8gwDPU='"
+
+export async function GET(): Promise<Response> {
+  const html = fs.readFileSync(htmlPath, "utf-8")
+  return new Response(html, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/html",
+      "Content-Security-Policy": CSP,
+      "Allow-CSP-From": "*",
+    },
+  })
+}

package/template-ts-app/init/realm.json

@@ -12,12 +12,12 @@
                 "description": "Standard application user"
             },
             {
-                "name": "_tide_dob.selfencrypt",
-                "description": "Tide E2EE self-encrypt DoB data"
+                "name": "_tide_message.selfencrypt",
+                "description": "Tide E2EE self-encrypt message data"
             },
             {
-                "name": "_tide_dob.selfdecrypt",
-                "description": "Tide E2EE self-decrypt DoB data"
+                "name": "_tide_message.selfdecrypt",
+                "description": "Tide E2EE self-decrypt message data"
             },
             {
                 "name": "default-roles-nextjs-test",
@@ -25,8 +25,8 @@
                 "composite": true,
                 "composites": {
                     "realm": [
-                        "_tide_dob.selfencrypt",
-                        "_tide_dob.selfdecrypt",
+                        "_tide_message.selfencrypt",
+                        "_tide_message.selfdecrypt",
                         "appUser"
                     ]
                 }

package/template-ts-app/init/tcinit.sh

@@ -135,7 +135,7 @@ echo "🔐 Initializing Tide realm + IGA..."
 curl -s -X POST "${TIDECLOAK_LOCAL_URL}/admin/realms/${REALM_NAME}/vendorResources/setUpTideRealm" \
   -H "Authorization: Bearer ${TOKEN}" \
   -H "Content-Type: application/x-www-form-urlencoded" \
-  --data-urlencode "email=email@tide.org" >/dev/null
+  --data-urlencode "email=${SUBSCRIPTION_EMAIL:-test@demo.org}" >/dev/null
 
 curl -s -X POST "${TIDECLOAK_LOCAL_URL}/admin/realms/${REALM_NAME}/tide-admin/toggle-iga" \
      -H "Authorization: Bearer ${TOKEN}" \

package/template-ts-app/middleware.ts

@@ -1,44 +1,40 @@
-// an example nextJS middleware router that does server-side validation on all traffic to secure pages
-import type { NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-import {
-  createTideCloakMiddleware,
-  type TideCloakContext,
-} from "@tidecloak/nextjs/server";
-import tcConfig from "./tidecloak.json";
-
-export default createTideCloakMiddleware({
-  config: tcConfig,
-  protectedRoutes: {
-    // list each protected route and the roles allowed to access it
-    "/protected": ["offline_access"],
-  },
-  onFailure: (ctx: TideCloakContext, req: NextRequest) => {
-    console.debug("Token verification failed", {
-      path: req.nextUrl.pathname,
-      ctx,
-    });
-    return NextResponse.json(
-      { error: "Access forbidden: invalid token" },
-      { status: 403 }
-    );
-  },
-  onSuccess: (ctx: TideCloakContext, req: NextRequest) => {
-    return NextResponse.next();
-  },
-  onError: (
-    ctx: TideCloakContext,
-    req: NextRequest,
-    err: unknown
-  ) => {
-    console.error("[Middleware] error verifying token for", req.nextUrl.pathname, err);
-    // if something unexpected happens, redirect to your auth flow
-    const redirectUrl = new URL("/auth/redirect", req.url);
-    return NextResponse.redirect(redirectUrl);
-  },
-});
-
-// Tell Next.js which paths to apply this middleware to
-export const config = {
-  matcher: ["/protected/:path*"],
-};
+// an example nextJS middleware router that does server-side validation on all traffic to secure pages
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { createTideCloakMiddleware } from "@tidecloak/nextjs/server";
+import tcConfig from "./tidecloak.json";
+
+export default createTideCloakMiddleware({
+  config: tcConfig,
+  protectedRoutes: {
+    // "offline_access" is granted to every authenticated user, so this protects
+    // the route for "any logged-in user". Swap it for a real realm/client role
+    // (e.g. "appUser") to demonstrate role-based access control.
+    "/protected": ["offline_access"],
+  },
+  onFailure: (ctx: { token: string | null }, req: NextRequest) => {
+    console.debug("Token verification failed", {
+      path: req.nextUrl.pathname,
+      ctx,
+    });
+    return NextResponse.json(
+      { error: "Access forbidden: invalid token" },
+      { status: 403 }
+    );
+  },
+  onSuccess: (ctx: { payload: Record<string, any> }, req: NextRequest) => {
+    return NextResponse.next();
+  },
+  // Note: onError receives (err, req) - the error is the first argument.
+  onError: (err: unknown, req: NextRequest) => {
+    console.error("[Middleware] error verifying token for", req.nextUrl.pathname, err);
+    // if something unexpected happens, redirect to your auth flow
+    const redirectUrl = new URL("/auth/redirect", req.url);
+    return NextResponse.redirect(redirectUrl);
+  },
+});
+
+// Tell Next.js which paths to apply this middleware to (bare path and subpaths)
+export const config = {
+  matcher: ["/protected", "/protected/:path*"],
+};

package/template-ts-app/next.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+
+}
+module.exports = nextConfig

package/template-ts-app/package.json

@@ -12,7 +12,7 @@
     "next": "16.x",
     "react": "19.x",
     "react-dom": "19.x",
-    "@tidecloak/nextjs": "^0.13.30"
+    "@tidecloak/nextjs": "^0.13.32"
   },
   "devDependencies": {
     "@types/node": "24.0.13",

package/template-ts-app/public/tide_dpop_auth.html

@@ -0,0 +1,238 @@
+<html>
+
+<head>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: #f6f6f7;
+            font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+
+        .status {
+            text-align: center;
+            opacity: 0;
+        }
+
+        .status.visible {
+            opacity: 1;
+        }
+
+        .checkmark-circle {
+            width: 72px;
+            height: 72px;
+            margin: 0 auto 16px;
+        }
+
+        .checkmark-circle circle {
+            fill: none;
+            stroke: #039855;
+            stroke-width: 3;
+            stroke-dasharray: 201;
+            stroke-dashoffset: 201;
+        }
+
+        .checkmark-circle path {
+            fill: none;
+            stroke: #039855;
+            stroke-width: 3;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-dasharray: 50;
+            stroke-dashoffset: 50;
+        }
+
+        .status.visible .checkmark-circle circle {
+            animation: circle-draw 0.5s ease forwards;
+        }
+
+        .status.visible .checkmark-circle path {
+            animation: check-draw 0.3s 0.4s ease forwards;
+        }
+
+        .status.visible .status-text {
+            animation: fade-in 0.3s 0.6s ease forwards;
+        }
+
+        .status-text {
+            font-size: 15px;
+            color: #464647;
+            margin: 0;
+            opacity: 0;
+        }
+
+        @keyframes circle-draw {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        @keyframes check-draw {
+            to {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        @keyframes fade-in {
+            to {
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="status" id="status">
+        <svg class="checkmark-circle" viewBox="0 0 72 72">
+            <circle cx="36" cy="36" r="32" />
+            <path d="M22 36 l10 10 l18 -20" />
+        </svg>
+        <p class="status-text">Session verified</p>
+    </div>
+    <script>
+        const thisVersion = 1;
+
+        const hexToStr = (hex) => {
+            if (!hex || hex.length % 2 !== 0 || !/^[0-9a-fA-F]+$/.test(hex)) throw Error("Invalid hex string");
+            const bytes = new Uint8Array(hex.length / 2);
+            for (let i = 0; i < bytes.length; i++) bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
+            return new TextDecoder().decode(bytes);
+        };
+
+        const createDbName = async (issuer, clientId) => {
+            const encoder = new TextEncoder();
+            const issuerHash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', encoder.encode(issuer))).slice(0, 8))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
+            const clientHash = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', encoder.encode(clientId))).slice(0, 8))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
+            return `dpop:${issuerHash}:${clientHash}`;
+        };
+
+        // Determine target window: popup has window.opener, iframe has window.parent
+        const isPopup = !!window.opener;
+        const targetWindow = window.opener || window.parent;
+
+        if (!targetWindow || targetWindow === window) {
+            document.body.textContent = "Error: No parent or opener window found.";
+            throw Error("No target window available for postMessage");
+        }
+
+        const urlParams = new URL(window.location.href).searchParams;
+        const enclaveVersion = urlParams.get("version");
+        if (!enclaveVersion) throw Error("No enclave version provided in url");
+        let openerOrigin = urlParams.get("openerOrigin");
+        if (!openerOrigin) throw Error("No opener origin provided in url");
+        openerOrigin = new URL(decodeURIComponent(openerOrigin)).origin;
+
+        const showSuccess = () => {
+            document.getElementById('status').classList.add('visible');
+        };
+
+        const version1Flow = async () => {
+            const paths = new URL(window.location.href).pathname.split("/");
+            const iss = hexToStr(paths[paths.indexOf("iss") + 1]);
+            const aud = hexToStr(paths[paths.indexOf("aud") + 1]);
+            const dbname = await createDbName(iss, aud);
+            let dpopKey;
+            try {
+                // Chrome 125+: requestStorageAccess({ indexedDB: true }) returns a handle
+                // whose .indexedDB factory points directly at the unpartitioned bucket.
+                // If permission was already granted (within 30 days) this resolves
+                // automatically with no prompt.
+                //
+                // In popup mode we have first-party context so we can access IndexedDB directly.
+                let idbFactory;
+                if (isPopup) {
+                    idbFactory = window.indexedDB;
+                } else {
+                    const handle = await document.requestStorageAccess({ indexedDB: true });
+                    idbFactory = handle.indexedDB;
+                }
+
+                const db = await new Promise((resolve, reject) => {
+                    const req = idbFactory.open(dbname);
+                    req.onsuccess = () => resolve(req.result);
+                    req.onerror = () => reject(req.error);
+                });
+                dpopKey = await new Promise((resolve, reject) => {
+                    const tx = db.transaction("main", "readonly");
+                    const store = tx.objectStore("main");
+                    const req = store.get("dpopState");
+                    req.onsuccess = () => resolve(req.result);
+                    req.onerror = () => reject(req.error);
+                });
+                db.close();
+                if (!dpopKey || !dpopKey.keys) throw Error("No DPoP key found in IndexedDB");
+            } catch (ex) {
+                const isStorageBlocked =
+                    ex?.name === "NotAllowedError" ||
+                    (ex instanceof DOMException && (
+                        ex.name === "SecurityError" ||
+                        ex.name === "UnknownError" ||
+                        ex.message?.includes("not a known object store name")
+                    ));
+                const detail = isStorageBlocked
+                    ? "Browser is blocking third-party storage. Please allow storage access or disable strict tracking protection."
+                    : "Failed to access DPoP key from IndexedDB.";
+                targetWindow.postMessage({ type: "error", message: "db failed", detail }, openerOrigin);
+                document.body.textContent = detail;
+                throw ex;
+            }
+
+            const challenge = () => new Promise((resolve) => {
+                const handler = (event) => {
+                    if (event.origin !== openerOrigin) return;
+                    if (event.data.type === "challenge") {
+                        resolve(event.data.challenge);
+                        window.removeEventListener("message", handler);
+                    }
+                };
+                window.addEventListener("message", handler, false);
+            });
+
+            const pre_challenge = challenge();
+
+            targetWindow.postMessage({ type: "pageLoaded", message: "yay" }, openerOrigin);
+
+            const challengeResp = await pre_challenge;
+            if (typeof challengeResp !== "string" || challengeResp?.length != 64) throw Error("Unexpect challenge format");
+
+            const te = new TextEncoder();
+            const signatureInput = te.encode("dpop-auth-challenge:" + challengeResp);
+            const algName = dpopKey.keys.privateKey.algorithm.name;
+            const signParams = algName === "ECDSA"
+                ? { name: "ECDSA", hash: { "P-256": "SHA-256", "P-384": "SHA-384", "P-521": "SHA-512" }[dpopKey.keys.privateKey.algorithm.namedCurve] }
+                : { name: algName };
+            const signature = await crypto.subtle.sign(signParams, dpopKey.keys.privateKey, signatureInput);
+
+            const publicJwk = await crypto.subtle.exportKey("jwk", dpopKey.keys.publicKey);
+
+            targetWindow.postMessage({
+                type: "challenge response",
+                message: {
+                    dpop_public: JSON.stringify({ crv: publicJwk.crv, kty: publicJwk.kty, x: publicJwk.x, y: publicJwk.y }),
+                    signature: btoa(String.fromCharCode(...new Uint8Array(signature)))
+                }
+            }, openerOrigin);
+
+            showSuccess();
+        };
+
+        const versionFlows = new Map([[1, version1Flow]]);
+        const latestFlow = version1Flow;
+
+        (async () => {
+            if (Number(enclaveVersion) >= thisVersion) await latestFlow();
+            else {
+                const flow = versionFlows.get(Number(enclaveVersion));
+                if (!flow) throw Error("Cannot find supported enclave version: " + enclaveVersion);
+                await flow();
+            }
+        })();
+    </script>
+</body>
+
+</html>