diff --git a/frontend/src/LoginGate.css b/frontend/src/LoginGate.css
index aa59c14..bd32c2f 100644
--- a/frontend/src/LoginGate.css
+++ b/frontend/src/LoginGate.css
@@ -11,10 +11,6 @@
   color: #e6e6e6;
 }
 
-.login-gate-error {
-  color: #f87171;
-}
-
 .login-gate-button {
   display: inline-block;
   margin-top: 1rem;
diff --git a/frontend/src/LoginGate.tsx b/frontend/src/LoginGate.tsx
index 52ce90d..ea2e7aa 100644
--- a/frontend/src/LoginGate.tsx
+++ b/frontend/src/LoginGate.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { api, BASE_URL } from "./api/client";
+import { showError } from "./banner";
 import "./LoginGate.css";
 import App from "./App";
 import { OnboardingWizard } from "./OnboardingWizard";
@@ -36,16 +37,24 @@ export function LoginGate() {
       .catch(() => setStatus("unauthenticated"));
   }, []);
 
+  // Keycloak redirects back here with ?auth_error=<code> when the
+  // login-gate's own role check (not Keycloak's own authentication) rejects
+  // a session -- surfaced once, as a banner, the moment this screen is
+  // reached.
+  useEffect(() => {
+    if (status !== "unauthenticated") return;
+    const authError = new URLSearchParams(window.location.search).get("auth_error");
+    if (authError) showError(AUTH_ERROR_MESSAGES[authError] ?? "Login failed, please try again.");
+  }, [status]);
+
   if (status === "loading") {
     return <div className="login-gate-loading">Loading…</div>;
   }
 
   if (status === "unauthenticated") {
-    const authError = new URLSearchParams(window.location.search).get("auth_error");
     return (
       <div className="login-gate">
         <h1>🧞‍♀️ geniusrun</h1>
-        {authError && <p className="login-gate-error">{AUTH_ERROR_MESSAGES[authError] ?? "Login failed, please try again."}</p>}
         <a className="login-gate-button" href={`${BASE_URL}/api/session/login`}>
           Log in
         </a>