@tidecloak/create-nextjs 0.13.30 → 0.13.31

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.31",
   "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/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.31"
   }
 }

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/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.31"
   },
   "devDependencies": {
     "@types/node": "24.0.13",