Allow setting _osmo_session cookies for local -> prod development (#548)

* Allow setting _osmo_session cookies for local -> prod development

* Format

Author: fernandol-nvidia

src/ui/src/lib/dev/dev-auth.ts

@@ -17,14 +17,19 @@
 /**
  * Dev Auth Helpers
  *
- * Console utilities for managing the _osmo_session cookie in local development.
+ * Console utilities for managing _osmo_session cookies in local development.
  * Auth is handled by Envoy + OAuth2 Proxy in production. For local dev against
- * a real backend, copy the encrypted session cookie from production.
+ * a real backend, copy the encrypted session cookies from Chrome DevTools
+ * (Application > Cookies) since they're HttpOnly and not accessible via JS.
+ *
+ * The session is split across chunked cookies (e.g. _osmo_session_0,
+ * _osmo_session_1) when the encrypted payload exceeds the 4KB cookie limit.
  *
  * Console API:
- *   devAuth.status()  - Check if session cookie is present
- *   devAuth.clear()   - Clear session cookies
- *   devAuth.help()    - Show setup instructions
+ *   devAuth.set(name, value) - Set a session cookie by name and value
+ *   devAuth.status()         - Check if session cookies are present
+ *   devAuth.clear()          - Clear all session cookies
+ *   devAuth.help()           - Show setup instructions
  */
 
 export function hasSessionCookie(): boolean {
@@ -42,19 +47,39 @@ export function clearSessionCookies(): void {
   console.log("Session cookies cleared");
 }
 
+export function setSessionCookie(name: string, value: string): void {
+  if (!name || !value) {
+    console.error("Usage: devAuth.set('_osmo_session_0', 'value')");
+    return;
+  }
+  document.cookie = `${name}=${value};path=/;max-age=604800`;
+  console.log(`%c${name} set successfully.`, "color: #22c55e; font-weight: bold;");
+}
+
 export function printHelp(): void {
   console.log("%c Local Dev Auth", "color: #3b82f6; font-weight: bold; font-size: 14px;");
   console.log("");
   console.log("%cTo authenticate local dev against production:", "font-weight: bold;");
   console.log("");
-  console.log("%c1. Open production app in browser console and run:", "color: #64748b;");
+  console.log("%c1. Open the production app in Chrome DevTools → Application → Cookies", "color: #64748b;");
+  console.log(
+    "%c2. Find the %c_osmo_session_*%c cookies and copy each name + value",
+    "color: #64748b;",
+    "color: #22d3ee; font-family: monospace;",
+    "color: #64748b;",
+  );
+  console.log(
+    "%c   (they're HttpOnly, so they won't appear via document.cookie)",
+    "color: #94a3b8; font-style: italic;",
+  );
+  console.log("%c3. Come back here and run for each cookie:", "color: #64748b;");
   console.log("");
   console.log(
-    `%c${COPY_COOKIES_SNIPPET}`,
+    "%cdevAuth.set('_osmo_session_0', 'value_from_devtools')\ndevAuth.set('_osmo_session_1', 'value_from_devtools')",
     "background: #1e293b; color: #22d3ee; padding: 8px; border-radius: 4px; font-family: monospace;",
   );
   console.log("");
-  console.log("%c2. Come back here and paste the result into this console.", "color: #64748b;");
+  console.log("%c4. Reload the page.", "color: #64748b;");
   console.log("");
   console.log(
     "%cAlternatively, use mock mode: %cpnpm dev:mock",
@@ -63,19 +88,18 @@ export function printHelp(): void {
   );
 }
 
-const COPY_COOKIES_SNIPPET = `copy(document.cookie.split(";").filter(c=>c.trim().startsWith("_osmo_session")).map(c=>{const[k,v]=c.trim().split("=");return\`document.cookie="\${k}=\${v};path=/;max-age=604800";\`}).join("\\n"))`;
-
 export function printStatus(): void {
   const hasSession = hasSessionCookie();
   console.log(`Session cookie present: ${hasSession}`);
   if (!hasSession) {
-    console.log("No _osmo_session cookie. Run devAuth.help() for setup instructions.");
+    console.log("No _osmo_session cookies found. Run devAuth.help() for setup instructions.");
   }
 }
 
 declare global {
   interface Window {
     devAuth?: {
+      set: typeof setSessionCookie;
       status: typeof printStatus;
       clear: typeof clearSessionCookies;
       help: typeof printHelp;
@@ -87,6 +111,7 @@ export function initDevAuth(showInstructions: boolean): void {
   if (typeof window === "undefined") return;
 
   window.devAuth = {
+    set: setSessionCookie,
     status: printStatus,
     clear: clearSessionCookies,
     help: printHelp,