console: fix password auth when oidc token expires (#37238)

OIDC auth middleware attaches the cached id_token as a Bearer header on
every API request. Envd reuses the password session cookie only when the
request carries no credentials. When the OIDC token expired, next
request still contained the stale expired token and was rejected with
the "authentication credentials have expired" error. Fixed the
MzOidcUserManager to check the id_token's expiry so it doesn't break
when envd tries validating it

[Fixes
CNS-91](<https://linear.app/materializeinc/issue/CNS-91/fix-expired-oidc-logins-causing-password-auth-to-break>)

## To repro:

* Set the ID token to 60s in the IDP
* Login using SSO
* When SSO expires, user sees this <img
src="https://uploads.linear.app/974a4381-d068-46e0-9fcd-1a1c00168131/1232c1cf-8281-43f6-84f4-1fe7bea8b52b/9369ba86-a002-4fc8-8733-ad0ee5a403af?signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXRoIjoiLzk3NGE0MzgxLWQwNjgtNDZlMC05ZmNkLTFhMWMwMDE2ODEzMS8xMjMyYzFjZi04MjgxLTQzZjYtODRmNC0xZmU3YmVhOGI1MmIvOTM2OWJhODYtYTAwMi00ZmM4LTg3MzMtYWQwZWU1YTQwM2FmIiwiaWF0IjoxNzgyMzE5NTk2LCJleHAiOjE4MTM4OTAxNTZ9.VJokSTNuwum5bN2wCg1Ac4tNkdeQc62AgMp3aMw5Qcs
" alt="image" width="763" data-linear-height="858" />
* Try logging in using password auth, can't log back in using password
auth

### Verification


https://github.com/user-attachments/assets/cabab8f3-8243-4163-a521-e46caae24a29

Author: leedqin

console/src/api/materialize/auth.ts

@@ -61,6 +61,23 @@ export async function loginOrThrow(request: { payload: LoginRequest }) {
   return responseText;
 }
 
+export async function hasActiveSession(): Promise<boolean> {
+  const { authApiBasePath } = getApiClient();
+
+  try {
+    const response = await fetch(`${authApiBasePath}/api/sql`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ queries: [{ query: "SELECT 1", params: [] }] }),
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+
 export async function logout(logoutParams: {
   apiClient: SelfManagedApiClient;
 }) {

console/src/external-library-wrappers/oidc.ts

@@ -21,7 +21,7 @@ export {
 } from "react-oidc-context";
 
 import { useQuery } from "@tanstack/react-query";
-import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+import { User, UserManager, WebStorageStateStore } from "oidc-client-ts";
 
 import { apiClient } from "~/api/apiClient";
 import { useAppConfig } from "~/config/useAppConfig";
@@ -76,7 +76,7 @@ async function fetchOidcConfig(): Promise<OidcConfig> {
  */
 export class MzOidcUserManager {
   #userManager: UserManager;
-  #cachedIdToken: string | undefined;
+  #cachedToken: { value: string; expiresAtMs: number } | undefined;
 
   constructor(config: OidcConfig) {
     this.#userManager = new UserManager({
@@ -91,26 +91,40 @@ export class MzOidcUserManager {
     });
 
     this.#userManager.events.addUserLoaded((user) => {
-      this.#cachedIdToken = user.id_token;
+      this.#setCachedToken(user);
     });
 
     this.#userManager.events.addUserUnloaded(() => {
-      this.#cachedIdToken = undefined;
+      this.#cachedToken = undefined;
     });
 
     // Eagerly populate the cached token from storage so that API requests
     // made immediately after page load can include the Authorization header.
     // The userLoaded event only fires on sign-in/silent-renew, not on
     // loading an existing session from storage.
     this.#userManager.getUser().then((user) => {
-      if (user && !this.#cachedIdToken) {
-        this.#cachedIdToken = user.id_token;
+      if (user && !this.#cachedToken) {
+        this.#setCachedToken(user);
       }
     });
   }
 
+  // Don't send an expired id_token: the OIDC Bearer header makes environmentd
+  // validate it instead of the password session cookie, breaking password
+  // fallback.
   getIdToken(): string | undefined {
-    return this.#cachedIdToken;
+    if (!this.#cachedToken || this.#cachedToken.expiresAtMs <= Date.now()) {
+      return undefined;
+    }
+    return this.#cachedToken.value;
+  }
+
+  // Extract the id_token and its `exp` (the claim environmentd validates) up
+  // front, so getIdToken() can drop an expired token without decoding the JWT.
+  #setCachedToken(user: User) {
+    this.#cachedToken = user.id_token
+      ? { value: user.id_token, expiresAtMs: user.profile.exp * 1000 }
+      : undefined;
   }
 
   getUserManager(): UserManager {

console/src/hooks/useSelfManagedProfile.ts

@@ -25,13 +25,17 @@ export const useSelfManagedProfile = (
   auth: AuthContextProps | undefined,
 ): SelfManagedProfile => {
   const profile = auth?.user?.profile;
+  const isProfileValid =
+    typeof profile?.exp === "number" && profile.exp * 1000 > Date.now();
+  const oidcProfile = isProfileValid ? profile : undefined;
   const { results: sqlRole, isLoading } = useCurrentUser();
 
-  const oidcName = typeof profile?.name === "string" ? profile.name : undefined;
+  const oidcName =
+    typeof oidcProfile?.name === "string" ? oidcProfile.name : undefined;
   const oidcEmail =
-    typeof profile?.email === "string" ? profile.email : undefined;
+    typeof oidcProfile?.email === "string" ? oidcProfile.email : undefined;
   const oidcPicture =
-    typeof profile?.picture === "string" ? profile.picture : undefined;
+    typeof oidcProfile?.picture === "string" ? oidcProfile.picture : undefined;
 
   return {
     name: oidcName ?? sqlRole,

console/src/platform/UnauthenticatedRoutes.tsx

@@ -7,10 +7,11 @@
 // the Business Source License, use of this software will be governed
 // by the Apache License, Version 2.0.
 
+import { useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Navigate, Route } from "react-router-dom";
 
-import { LOGIN_PATH } from "~/api/materialize/auth";
+import { hasActiveSession, LOGIN_PATH } from "~/api/materialize/auth";
 import { LaunchDarklyProvider } from "~/components/LaunchDarkly";
 import LoadingScreen from "~/components/LoadingScreen";
 import { type SelfManagedAppConfig } from "~/config/AppConfig";
@@ -27,6 +28,26 @@ import { SentryRoutes } from "~/sentry";
 import { Login } from "./auth/Login";
 import { OidcCallback } from "./auth/OidcCallback";
 
+// Redirect already-signed-in users off the login page. The password session
+// cookie is httpOnly, so probe the server; a live OIDC token skips the probe.
+const LoginRoute = () => {
+  const { data: oidcManager } = useOidcManagerQuery();
+  const hasOidcToken = Boolean(oidcManager?.getIdToken());
+
+  const { data: hasCookieSession } = useQuery({
+    queryKey: ["hasActiveSession"],
+    queryFn: hasActiveSession,
+    enabled: !hasOidcToken,
+    staleTime: Infinity,
+    retry: false,
+  });
+
+  if (hasOidcToken || hasCookieSession) {
+    return <Navigate to="/" replace />;
+  }
+  return <Login />;
+};
+
 const OidcAuthGuard = ({ children }: React.PropsWithChildren) => {
   const { isLoading, data: auth } = useOidcManagerQuery();
 
@@ -55,7 +76,7 @@ const SelfManagedRoutes = ({
     <SentryRoutes>
       {(appConfig.authMode === "Password" ||
         appConfig.authMode === "Sasl" ||
-        isOidc) && <Route path={LOGIN_PATH} element={<Login />} />}
+        isOidc) && <Route path={LOGIN_PATH} element={<LoginRoute />} />}
       {isOidc && <Route path="/auth/callback" element={<OidcCallback />} />}
       <Route
         path="*"