chore: show warning on sign in page when sessionCookieSecret is missing

packages/root-cms/core/app.tsx

@@ -226,10 +226,27 @@ export async function renderSignIn(
   res: Response,
   options: RenderOptions
 ) {
-  const ctx = {
+  const ctx: any = {
     name: options.cmsConfig.name || options.cmsConfig.id || '',
     firebaseConfig: options.cmsConfig.firebaseConfig,
   };
+
+  // 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} />
   );

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>

packages/root-cms/signin/styles/signin.css

@@ -43,6 +43,18 @@
   transition: all 0.218s ease;
 }
 
+.signin__warning {
+  max-width: 520px;
+  margin: 0 auto 40px;
+  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);