Ghost in the Header

Authentication

You signed out, but the header still shows your name while the page says you need to sign in. The chrome and the main view disagree — fix sign-out so the whole app agrees.

After you fix it

After Sign out, the header should show Guest (or no signed-in name).
The main area should show the signed-out state at the same time as the header.
Signing in again should still show the correct name everywhere.

import { useState, useEffect } from "react";

let headerUserCache = null;

export default function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const b = document.body;
    const pb = b.style.background;
    const pm = b.style.margin;
    b.style.background = "#fafafa";
    b.style.margin = "0";
    return () => {
      b.style.background = pb;
      b.style.margin = pm;
    };
  }, []);

  const signIn = () => {
    const user = { name: "Amina Okoye", email: "amina@acme.io" };
    setSession({ token: "demo", user });
    headerUserCache = user;
  };

  const signOut = () => {
    setSession(null);
  };

  const chromeName = headerUserCache?.name;

  return (
    <div style={styles.shell}>
      <header style={styles.header} data-testid="app-header">
        <span style={styles.brand}>Acme Console</span>
        <span data-testid="header-user" style={styles.user}>
          {chromeName || "Guest"}
        </span>
        {session ? (
          <button type="button" data-testid="sign-out-btn" onClick={signOut} style={styles.btnGhost}>
            Sign out
          </button>
        ) : (
          <button type="button" data-testid="sign-in-btn" onClick={signIn} style={styles.btn}>
            Sign in
          </button>
        )}
      </header>
      <main style={styles.main}>
        {session ? (
          <div data-testid="signed-in-view">
            <h1 style={styles.h1}>Projects</h1>
            <p style={styles.sub}>You are signed in as {session.user.email}.</p>
          </div>
        ) : (
          <div data-testid="signed-out-view" style={styles.card}>
            <h1 style={styles.h1}>Sign in required</h1>
            <p style={styles.sub}>Use the header to access your workspace.</p>
          </div>
        )}
      </main>
    </div>
  );
}

const styles = {
  shell: { fontFamily: "'Segoe UI', system-ui, sans-serif" },
  header: { display: "flex", alignItems: "center", gap: 12, padding: "14px 20px", background: "#fff", borderBottom: "1px solid #eee" },
  brand: { fontWeight: 700, fontSize: 14, color: "#1a1a2e", marginRight: "auto" },
  user: { fontSize: 13, color: "#444" },
  main: { padding: "32px 20px", display: "flex", justifyContent: "center" },
  card: { background: "#fff", borderRadius: 12, padding: "28px 32px", boxShadow: "0 1px 3px rgba(0,0,0,0.06)", maxWidth: 360, width: "100%" },
  h1: { margin: "0 0 8px", fontSize: 20, fontWeight: 700 },
  sub: { margin: 0, fontSize: 14, color: "#666" },
  btn: { padding: "8px 14px", fontSize: 13, fontWeight: 600, background: "#4f46e5", color: "#fff", border: "none", borderRadius: 8, cursor: "pointer" },
  btnGhost: { padding: "8px 14px", fontSize: 13, fontWeight: 600, background: "transparent", color: "#444", border: "1px solid #ddd", borderRadius: 8, cursor: "pointer" },
};

Open Sandbox