From b8cd2f50cc67e8cc91004f67493ba0c01f01e8c7 Mon Sep 17 00:00:00 2001
From: Steven Le <387282+stevenle@users.noreply.github.com>
Date: Wed, 25 Feb 2026 20:06:48 -0800
Subject: [PATCH 1/2] fix(root-cms): show sign-in secret warning only on dev
 server

---
 packages/root-cms/core/app.tsx             |  6 ++++++
 packages/root-cms/signin/signin.tsx        |  3 +++
 packages/root-cms/signin/styles/signin.css | 11 +++++++++++
 3 files changed, 20 insertions(+)

diff --git a/packages/root-cms/core/app.tsx b/packages/root-cms/core/app.tsx
index 2f7be3895..055f6a4e4 100644
--- a/packages/root-cms/core/app.tsx
+++ b/packages/root-cms/core/app.tsx
@@ -226,9 +226,15 @@ export async function renderSignIn(
   res: Response,
   options: RenderOptions
 ) {
+  const warning =
+    process.env.NODE_ENV === 'development' &&
+    !options.rootConfig.server?.sessionCookieSecret
+      ? 'Dev warning: `server.sessionCookieSecret` is missing in `root.config.ts`. Configure this secret in production to secure CMS sessions.'
+      : '';
   const ctx = {
     name: options.cmsConfig.name || options.cmsConfig.id || '',
     firebaseConfig: options.cmsConfig.firebaseConfig,
+    warning,
   };
   const mainHtml = renderToString(
     <SignIn title="Sign in" ctx={ctx} favicon={options.cmsConfig.favicon} />
diff --git a/packages/root-cms/signin/signin.tsx b/packages/root-cms/signin/signin.tsx
index b97910fb3..f25c870dc 100644
--- a/packages/root-cms/signin/signin.tsx
+++ b/packages/root-cms/signin/signin.tsx
@@ -11,6 +11,7 @@ declare global {
     __ROOT_CTX: {
       name: string;
       firebaseConfig: Record<string, string>;
+      warning: string;
     };
     firebase: {
       app: FirebaseApp;
@@ -22,6 +23,7 @@ declare global {
 function SignIn() {
   const [errorMsg, setErrorMsg] = useState('');
   const title = window.__ROOT_CTX.name;
+  const warning = window.__ROOT_CTX.warning;
 
   function onError(msg: string) {
     setErrorMsg(msg);
@@ -35,6 +37,7 @@ function SignIn() {
           {title ? `Sign in to continue to ${title}` : 'Sign in to continue'}
         </p>
       </div>
+      {warning && <div className="signin__warning">{warning}</div>}
       <SignIn.Button onError={onError} />
       {errorMsg && <p className="signin__error">{errorMsg}</p>}
     </div>
diff --git a/packages/root-cms/signin/styles/signin.css b/packages/root-cms/signin/styles/signin.css
index b197c6d1e..1a4f302fb 100644
--- a/packages/root-cms/signin/styles/signin.css
+++ b/packages/root-cms/signin/styles/signin.css
@@ -43,6 +43,17 @@
   transition: all 0.218s ease;
 }
 
+.signin__warning {
+  margin: 0 0 16px;
+  padding: 12px;
+  border: 1px solid #fbbc04;
+  border-radius: 8px;
+  background: #fff9db;
+  color: #5f370e;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
 .signin__button:hover {
   border-color: #d2e3fc;
   background-color: rgba(66, 133, 244, 0.04);

From 74a5896b727cb77dba05077fd982eed19f357f13 Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Wed, 25 Feb 2026 20:17:49 -0800
Subject: [PATCH 2/2] chore: update styles, show generic warning on prod

---
 packages/root-cms/core/app.tsx             | 25 ++++++++++++++++------
 packages/root-cms/signin/styles/signin.css |  3 ++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/root-cms/core/app.tsx b/packages/root-cms/core/app.tsx
index 055f6a4e4..be0230687 100644
--- a/packages/root-cms/core/app.tsx
+++ b/packages/root-cms/core/app.tsx
@@ -226,16 +226,27 @@ export async function renderSignIn(
   res: Response,
   options: RenderOptions
 ) {
-  const warning =
-    process.env.NODE_ENV === 'development' &&
-    !options.rootConfig.server?.sessionCookieSecret
-      ? 'Dev warning: `server.sessionCookieSecret` is missing in `root.config.ts`. Configure this secret in production to secure CMS sessions.'
-      : '';
-  const ctx = {
+  const ctx: any = {
     name: options.cmsConfig.name || options.cmsConfig.id || '',
     firebaseConfig: options.cmsConfig.firebaseConfig,
-    warning,
   };
+
+  // If the session cookie secret is missing, users will be forced to re-login
+  // whenever a new server spins up or restarts. On dev, show the warning
+  // directly on the sign in page. On prod, suggest the user to check server
+  // logs.
+  if (!options.rootConfig.server?.sessionCookieSecret) {
+    const warning =
+      'Dev warning: `server.sessionCookieSecret` is missing in `root.config.ts`. Configure this secret in production to secure CMS sessions.';
+    console.warn(warning);
+    if (process.env.NODE_ENV === 'development') {
+      ctx.warning = warning;
+    } else {
+      ctx.warning =
+        'Dev warning: Server may be misconfigured. See logs for more information.';
+    }
+  }
+
   const mainHtml = renderToString(
     <SignIn title="Sign in" ctx={ctx} favicon={options.cmsConfig.favicon} />
   );
diff --git a/packages/root-cms/signin/styles/signin.css b/packages/root-cms/signin/styles/signin.css
index 1a4f302fb..e175a85b5 100644
--- a/packages/root-cms/signin/styles/signin.css
+++ b/packages/root-cms/signin/styles/signin.css
@@ -44,7 +44,8 @@
 }
 
 .signin__warning {
-  margin: 0 0 16px;
+  max-width: 520px;
+  margin: 0 auto 40px;
   padding: 12px;
   border: 1px solid #fbbc04;
   border-radius: 8px;