console: OIDC login in console (#35440)

Remove these sections if your commit already has a good description!

### Motivation

This PR adds OIDC authentication for self managed console. [Linear
issue:
CNS-25](7127d37#diff-af9c8f7e6f839e4e44fed50cfbe560c70bd845b062b946eaec012d825721f3c6)

### Description
For the console to handle oidc authentication, here are the changes in
this PR:
- Added `oidc-client-ts` and `react-oidc-context` libraries to the
console
- Created an OIDC library wrapper for oidc libary to create a shared
`User Manager` that caches ID token and exports the id token to be
consumed by api client
- Tests that mock the oidc token and functions
- Added "Oidc" to AppConfig so that oidc auth mode can be parsed from
app-config.json
- Created the `OidcProviderWrapper.tsx` to initialize OIDC UserManager
and wrap the children in AuthProvider when authmode === oidc
- In apiClient.ts, when `authMode === oidc`, oidc middleware will add a
`Authorization: Bearer <idToken>` if token exists. If no token, no
header is sent -- session cookie is used implicitly. If a session
expires, 401 redirect would handle expired sessions
- In the websocket, `getWsAuthConfig` returns the ID token if available,
`null` otherwise
- Allow "Oidc" in auth.ts for password auth to work alongside OIDC

- In the Login Box, the password auth option would also render along
with "Use Single Sign on" link


**Auth Flow:**
```
User clicks "Use single sign-on"
           │
           ▼
┌──────────────────────────────────┐
│  Login.tsx: SsoLoginLink         │
│  auth.signinRedirect()           │
└──────────────┬───────────────────┘
               │
               │  oidc-client-ts:
               │  1. Generate code_verifier + code_challenge
               │  2. Store in sessionStorage
               │  3. Redirect browser
               │
               ▼
┌──────────────────────────────────┐
│  Auth0 /authorize                │
│  ?response_type=code             │
│  &client_id=jM1iDueUB3ucXyUgPbsZ│
│  &redirect_uri=.../auth/callback │
│  &scope=openid profile email     │
│  &code_challenge=<hash>          │
│  &code_challenge_method=S256     │
│  &state=<random>                 │
└──────────────┬───────────────────┘
               │
               ▼
┌──────────────────────────────────┐
│  Auth0 login page                │
│  User enters credentials / MFA   │
└──────────────┬───────────────────┘
               │
               │  Auth0 redirects:
               │  /auth/callback?code=<authz_code>&state=<random>
               │
               ▼
┌──────────────────────────────────┐
│  UnauthenticatedRoutes.tsx       │
│  OidcAuthGuard                   │
│                                  │
│  hasAuthParams() → true          │
│  (code + state in URL)           │
│  → render <LoadingScreen />      │
└──────────────┬───────────────────┘
               │
               │  AuthProvider (react-oidc-context)
               │  detects callback params, calls
               │  userManager.signinRedirectCallback()
               │
               ▼
┌──────────────────────────────────┐
│  oidc-client-ts token exchange   │
│                                  │
│  POST Auth0 /oauth/token         │
│  {                               │
│    grant_type: authorization_code│
│    code: <authz_code>            │
│    code_verifier: <from storage> │
│    redirect_uri: .../auth/callback│
│    client_id: jM1iDueUB3ucXyUgPb│
│  }                               │
│                                  │
│  Auth0 responds:                 │
│  { id_token, access_token }      │
└──────────────┬───────────────────┘
               │
               │  oidc-client-ts stores user
               │  in sessionStorage, fires
               │  userLoaded event
               │
               ▼
┌──────────────────────────────────┐
│  oidc.ts                         │
│  userLoaded callback:            │
│  cachedIdToken = user.id_token   │
└──────────────┬───────────────────┘
               │
               │  auth.isLoading → false
               │  auth.isAuthenticated → true
               │  OidcAuthGuard renders children
               │
               ▼
┌──────────────────────────────────┐
│  Authenticated Routes            │
│                                  │
│  Every API call:                 │
│  apiClient.ts oidcAuthMiddleware │
│  → getOidcIdToken() returns token│
│  → Authorization: Bearer <token> │
└──────────────────────────────────┘

```


### Reviewing Tips
- Would recommend reviewing it by commit. First commit sets up the oidc
setup in the app. Second commit focuses on making it work with password
auth




### Verification


https://github.com/user-attachments/assets/49ca70b5-3e0d-48d6-88db-ca4ab20eb263

Author: leedqin

console/package.json

@@ -90,6 +90,7 @@
     "lodash.debounce": "^4.0.8",
     "markdown-table": "^3.0.4",
     "mitt": "^3.0.1",
+    "oidc-client-ts": "^3.4.1",
     "openapi-fetch": "^0.17.0",
     "papaparse": "^5.4.1",
     "pg-error-enum": "^0.7.3",
@@ -98,6 +99,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-intersection-observer": "^9.13.1",
+    "react-oidc-context": "^3.3.0",
     "react-router-dom": "^6.27.0",
     "react-select": "^5.8.3",
     "react-virtualized-auto-sizer": "^1.0.24",

console/src/api/apiClient.test.ts

@@ -296,3 +296,64 @@ describe("SelfManagedApiClient", () => {
     server.resetHandlers();
   });
 });
+
+const MOCK_OIDC_CONFIG = {
+  ...MOCK_SELF_MANAGED_CONFIG,
+  authMode: "Oidc" as const,
+} as SelfManagedAppConfig;
+
+describe("SelfManagedApiClient (Oidc)", () => {
+  it("should send Bearer header and return token ws config when OIDC token exists", async () => {
+    const MOCK_TOKEN = "test-oidc-id-token";
+    const client = new SelfManagedApiClient({
+      appConfig: MOCK_OIDC_CONFIG,
+    });
+    await client.oidcManagerInitializationPromise;
+    client.oidcManager = { getIdToken: () => MOCK_TOKEN } as any;
+
+    const TEST_URL = "https://oidc.example.com";
+    let headers: Headers | null = null;
+    server.use(
+      http.get(TEST_URL, ({ request }) => {
+        headers = request.headers;
+        return HttpResponse.json({});
+      }),
+    );
+
+    await client.mzApiFetch(TEST_URL);
+    expect(headers!.get("Authorization")).toBe(`Bearer ${MOCK_TOKEN}`);
+    expect(client.getWsAuthConfig()).toEqual({ token: MOCK_TOKEN });
+    server.resetHandlers();
+  });
+
+  it("should skip Bearer header, return null ws config, and redirect on 401 when no OIDC token", async () => {
+    const client = new SelfManagedApiClient({
+      appConfig: MOCK_OIDC_CONFIG,
+    });
+    client.oidcManager = { getIdToken: () => undefined } as any;
+
+    expect(client.getWsAuthConfig()).toBeNull();
+
+    const TEST_URL = "https://oidc-no-token.example.com";
+    let headers: Headers | null = null;
+    const logoutSpy = vi.fn();
+    server.use(
+      http.get(TEST_URL, ({ request }) => {
+        headers = request.headers;
+        return new HttpResponse(null, { status: 401 });
+      }),
+      http.post(`${client.authApiBasePath}/api/logout`, () => {
+        logoutSpy();
+        return new HttpResponse(null, { status: 200 });
+      }),
+    );
+
+    await client.mzApiFetch(TEST_URL);
+    expect(headers!.get("Authorization")).toBeNull();
+    await vi.waitFor(() => {
+      expect(logoutSpy).toHaveBeenCalled();
+    });
+
+    server.resetHandlers();
+  });
+});

console/src/api/apiClient.ts

@@ -19,6 +19,7 @@ import {
   SelfManagedAuthMode,
 } from "~/config/AppConfig";
 import { ContextHolder } from "~/external-library-wrappers/frontegg";
+import { MzOidcUserManager } from "~/external-library-wrappers/oidc";
 
 import { logoutAndRedirect } from "./materialize/auth";
 import {
@@ -162,6 +163,10 @@ export class SelfManagedApiClient
   implements IApiClientBase, ISelfManagedApiClient
 {
   #appConfig: Readonly<SelfManagedAppConfig>;
+  /** Resolved manager; read synchronously by the auth middleware and WebSocket config. */
+  oidcManager?: MzOidcUserManager;
+  /** In-flight init promise; awaited by OidcProviderWrapper to gate rendering. */
+  oidcManagerInitializationPromise?: Promise<MzOidcUserManager>;
   authMode: SelfManagedAuthMode;
   authApiBasePath: string;
   mzHttpUrlScheme: HttpScheme;
@@ -179,17 +184,59 @@ export class SelfManagedApiClient
     return response;
   };
 
+  #oidcAuthMiddleware: Middleware = (next) => {
+    return async (...fetchArgs) => {
+      const [input, options = {}] = fetchArgs;
+      const idToken = this.oidcManager?.getIdToken();
+
+      const headers = copyHeaders(fetchArgs);
+      if (idToken) {
+        headers.set("Authorization", `Bearer ${idToken}`);
+      }
+
+      const request = new Request(input, { ...options, headers });
+      return next(request);
+    };
+  };
+
   constructor({ appConfig }: { appConfig: Readonly<SelfManagedAppConfig> }) {
     this.#appConfig = appConfig;
     this.mzHttpUrlScheme = this.#appConfig.environmentdScheme;
     this.mzWebsocketUrlScheme = this.#appConfig.environmentdWebsocketScheme;
     this.authApiBasePath = `${this.#appConfig.environmentdScheme}://${this.#appConfig.environmentdConfig.environmentdHttpAddress}`;
     this.authMode = this.#appConfig.authMode;
 
-    this.mzApiFetch =
-      this.authMode === "None" ? globalFetch : this.#mzApiWithAuthRedirect;
+    if (this.authMode === "Oidc") {
+      this.oidcManagerInitializationPromise = MzOidcUserManager.create().then(
+        (manager) => {
+          this.oidcManager = manager;
+          return manager;
+        },
+      );
+      // When OIDC is configured, users can authenticate via either OIDC or
+      // password. The OIDC middleware adds a Bearer token if one exists;
+      // otherwise no auth header is sent and the session cookie is used
+      // implicitly. The 401 redirect handles expired/missing sessions.
+      this.mzApiFetch = withMiddleware(
+        this.#mzApiWithAuthRedirect,
+        this.#oidcAuthMiddleware,
+      );
+    } else if (this.authMode === "None") {
+      this.mzApiFetch = globalFetch;
+    } else {
+      this.mzApiFetch = this.#mzApiWithAuthRedirect;
+    }
 
     this.getWsAuthConfig = () => {
+      if (this.authMode === "Oidc") {
+        const idToken = this.oidcManager?.getIdToken();
+        if (idToken) {
+          return buildTokenAuthConfig(idToken);
+        }
+        // No OIDC token — user authenticated via password, session cookie
+        // is sent implicitly so no explicit auth config is needed.
+        return null;
+      }
       // Unintuitively, we return an auth config when authMode is "None". This is because
       // the authenticated websocket API gets the necessary information via the http-only cookie
       // and errors if you try to send a websocket message with the auth config.

console/src/api/materialize/auth.ts

@@ -19,7 +19,9 @@ interface LoginRequest {
 const getApiClient = () => {
   if (
     apiClient.type !== "self-managed" ||
-    (apiClient.authMode !== "Password" && apiClient.authMode !== "Sasl")
+    (apiClient.authMode !== "Password" &&
+      apiClient.authMode !== "Sasl" &&
+      apiClient.authMode !== "Oidc")
   ) {
     throw new Error(NOT_SUPPORTED_MESSAGE);
   }

console/src/components/OidcProviderWrapper.tsx

@@ -0,0 +1,82 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// As of the Change Date specified in that file, in accordance with
+// 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, { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { apiClient } from "~/api/apiClient";
+import Alert from "~/components/Alert";
+import LoadingScreen from "~/components/LoadingScreen";
+import { useAppConfig } from "~/config/useAppConfig";
+import { AuthProvider } from "~/external-library-wrappers/oidc";
+
+export const OidcProviderWrapper = ({ children }: React.PropsWithChildren) => {
+  const navigate = useNavigate();
+  const appConfig = useAppConfig();
+
+  const isOidc =
+    appConfig.mode === "self-managed" && appConfig.authMode === "Oidc";
+
+  // Not a typical data fetch — using React Query to get loading/error
+  // state without wiring up useState + useEffect manually.
+  const {
+    data: oidcManager,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["oidc-manager"],
+    queryFn: () => {
+      if (
+        apiClient.type !== "self-managed" ||
+        !apiClient.oidcManagerInitializationPromise
+      ) {
+        return null;
+      }
+      return apiClient.oidcManagerInitializationPromise;
+    },
+    enabled: isOidc,
+    staleTime: Infinity,
+    retry: false,
+  });
+
+  const onSigninCallback = useCallback(() => {
+    navigate("/", { replace: true });
+  }, [navigate]);
+
+  if (!isOidc) {
+    return children;
+  }
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (error) {
+    return (
+      <Alert
+        variant="error"
+        message={`Failed to initialize OIDC: ${error.message}`}
+      />
+    );
+  }
+
+  if (!oidcManager) {
+    return children;
+  }
+
+  return (
+    <AuthProvider
+      userManager={oidcManager.getUserManager()}
+      onSigninCallback={onSigninCallback}
+    >
+      {children}
+    </AuthProvider>
+  );
+};

console/src/config/AppConfig.ts

@@ -68,17 +68,20 @@ type FronteggAuthMode = "Frontegg";
 type PasswordAuthMode = "Password";
 type NoneAuthMode = "None";
 type SaslAuthMode = "Sasl";
+type OidcAuthMode = "Oidc";
 type CloudAuthMode = FronteggAuthMode;
 export type SelfManagedAuthMode =
   | PasswordAuthMode
   | NoneAuthMode
-  | SaslAuthMode;
+  | SaslAuthMode
+  | OidcAuthMode;
 
 type AuthMode =
   | FronteggAuthMode
   | PasswordAuthMode
   | NoneAuthMode
-  | SaslAuthMode;
+  | SaslAuthMode
+  | OidcAuthMode;
 
 interface IBaseAppConfig {
   // Discriminant for the type of app config.

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

@@ -0,0 +1,28 @@
+// Copyright Materialize, Inc. and contributors. All rights reserved.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0.
+
+export const useAuth = vi.fn(() => ({
+  isAuthenticated: false,
+  isLoading: false,
+  user: null,
+  signinRedirect: vi.fn(),
+  signoutRedirect: vi.fn(),
+}));
+
+export const AuthProvider = ({ children }: React.PropsWithChildren) => children;
+
+export const hasAuthParams = vi.fn(() => false);
+
+export class MzOidcUserManager {
+  getIdToken = vi.fn(() => undefined);
+  getUserManager = vi.fn();
+  signoutRedirect = vi.fn();
+
+  static create = vi.fn(() => Promise.resolve(new MzOidcUserManager()));
+}