Jun 3, 2025
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
 super(message);
 }
 }

 export const isOIDCSessionExpired = (error: unknown): boolean => {
 if (!isApiError(error)) {
 return false;
 }

 const message = error.response.data.message?.toLowerCase() ?? "";
 const detail = error.response.data.detail?.toLowerCase() ?? "";

 // Check for 401 status and specific OIDC session expiry message patterns
 return (
 error.response.status === 401 &&
 (message.includes("oidc session expired") ||
 message.includes("invalid oidc token") ||
 detail.includes("oidc session"))
 );
 };
diff --git a/site/src/contexts/auth/AuthProvider.tsx b/site/src/contexts/auth/AuthProvider.tsx
 import { isApiError } from "api/errors";
 import { isApiError, isOIDCSessionExpired } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import {
 hasFirstUser,
 import {
 type FC,
 type PropsWithChildren,
 type ReactNode,
 createContext,
 useCallback,
 useContext,
 useEffect,
 } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";

 undefined,
 );

 export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
 export const AuthProvider: FC<PropsWithChildren<{ children: ReactNode }>> = ({ children }) => {
 const { metadata } = useEmbeddedMetadata();
 const userMetadataState = metadata.user;

 const logoutMutation = useMutation(logout(queryClient));
 const updateProfileMutation = useMutation({
 ...updateProfileOptions("me"),
 onSuccess: (user) => {
 onSuccess: (user: User) => {
 queryClient.setQueryData(meOptions.queryKey, user);
 displaySuccess("Updated settings.");
 },
 });

 const isSignedOut =
 userQuery.isError &&
 isApiError(userQuery.error) &&
 userQuery.error.response.status === 401;
 ((isApiError(userQuery.error) &&
 userQuery.error.response.status === 401) ||
 isOIDCSessionExpired(userQuery.error));
 const isSigningOut = logoutMutation.isPending;
 const isLoading =
 userQuery.isLoading ||
 [updateProfileMutation],
 );

 // Add OIDC session expiry handling
 useEffect(() => {
 if (isSignedOut && isOIDCSessionExpired(userQuery.error)) {
 // Redirect to login with a clear message and documentation link
 const loginPath = "/login";
 const message = encodeURIComponent(
 `Your OIDC session has expired. Please sign in again to continue. For more information about OIDC authentication and session management, see our <a href="/docs/admin/auth/oidc" class="link">documentation</a>.`
 );
 window.location.href = `${loginPath}?message=${message}&html=true`;
 }
 }, [isSignedOut, userQuery.error]);

 return (
 <AuthContext.Provider
 value={{
diff --git a/site/src/pages/LoginPage/LoginMessage.tsx b/site/src/pages/LoginPage/LoginMessage.tsx
 import { Alert } from "components/Alert/Alert";
 import { type FC } from "react";
 import { useLocation } from "react-router-dom";

 export const LoginMessage: FC = () => {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const message = params.get("message");
  const isHtml = params.get("html") === "true";

  if (!message) {
    return null;
  }

  return (
    <Alert severity="info">
      {isHtml ? (
        <span
          dangerouslySetInnerHTML={{ __html: decodeURIComponent(message) }}
          css={{
            "& .link": {
              color: "inherit",
              textDecoration: "underline",
              "&:hover": {
                textDecoration: "none",
              },
            },
          }}
        />
      ) : (
        message
      )}
    </Alert>
  );
 };
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
 import { useLocation } from "react-router-dom";
 import { SignInForm } from "./SignInForm";
 import { TermsOfServiceLink } from "./TermsOfServiceLink";
 import { LoginMessage } from "./LoginMessage";

 interface LoginPageViewProps {
 authMethods: AuthMethods | undefined;
 </Button>
 </>
 ) : (
 <SignInForm
 authMethods={authMethods}
 redirectTo={redirectTo}
 isSigningIn={isSigningIn}
 error={error}
 message={message}
 onSubmit={onSignIn}
 />
 <>
 <LoginMessage />
 <SignInForm
 authMethods={authMethods}
 redirectTo={redirectTo}
 isSigningIn={isSigningIn}
 error={error}
 message={message}
 onSubmit={onSignIn}
 />
 </>
 )}
 <footer css={styles.footer}>
 <div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -149,3 +149,20 @@ export class DetailedError extends Error {
		super(message);
		}
		}

		export const isOIDCSessionExpired = (error: unknown): boolean => {
		if (!isApiError(error)) {
		return false;
		}

		const message = error.response.data.message?.toLowerCase() ?? "";
		const detail = error.response.data.detail?.toLowerCase() ?? "";

		// Check for 401 status and specific OIDC session expiry message patterns
		return (
		error.response.status === 401 &&
		(message.includes("oidc session expired") \|\|
		message.includes("invalid oidc token") \|\|
		detail.includes("oidc session"))
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import { isApiError } from "api/errors";
		import { isApiError, isOIDCSessionExpired } from "api/errors";
		import { checkAuthorization } from "api/queries/authCheck";
		import {
		hasFirstUser,
Expand All		@@ -14,9 +14,11 @@ import { type Permissions, permissionChecks } from "modules/permissions";
		import {
		type FC,
		type PropsWithChildren,
		type ReactNode,
		createContext,
		useCallback,
		useContext,
		useEffect,
		} from "react";
		import { useMutation, useQuery, useQueryClient } from "react-query";

Expand All		@@ -41,7 +43,7 @@ export const AuthContext = createContext<AuthContextValue \| undefined>(
		undefined,
		);

		export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
		export const AuthProvider: FC<PropsWithChildren<{ children: ReactNode }>> = ({ children }) => {
		const { metadata } = useEmbeddedMetadata();
		const userMetadataState = metadata.user;

Expand All		@@ -62,16 +64,17 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
		const logoutMutation = useMutation(logout(queryClient));
		const updateProfileMutation = useMutation({
		...updateProfileOptions("me"),
		onSuccess: (user) => {
		onSuccess: (user: User) => {
		queryClient.setQueryData(meOptions.queryKey, user);
		displaySuccess("Updated settings.");
		},
		});

		const isSignedOut =
		userQuery.isError &&
		isApiError(userQuery.error) &&
		userQuery.error.response.status === 401;
		((isApiError(userQuery.error) &&
		userQuery.error.response.status === 401) \|\|
		isOIDCSessionExpired(userQuery.error));
		const isSigningOut = logoutMutation.isPending;
		const isLoading =
		userQuery.isLoading \|\|
Expand DownExpand Up		@@ -101,6 +104,18 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
		[updateProfileMutation],
		);

		// Add OIDC session expiry handling
		useEffect(() => {
		if (isSignedOut && isOIDCSessionExpired(userQuery.error)) {
		// Redirect to login with a clear message and documentation link
		const loginPath = "/login";
		const message = encodeURIComponent(
		`Your OIDC session has expired. Please sign in again to continue. For more information about OIDC authentication and session management, see our <a href="/docs/admin/auth/oidc" class="link">documentation</a>.`
		);
		window.location.href = `${loginPath}?message=${message}&html=true`;
		}
		}, [isSignedOut, userQuery.error]);

		return (
		<AuthContext.Provider
		value={{
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,35 @@
		import { Alert } from "components/Alert/Alert";
		import { type FC } from "react";
		import { useLocation } from "react-router-dom";

		export const LoginMessage: FC = () => {
		const location = useLocation();
		const params = new URLSearchParams(location.search);
		const message = params.get("message");
		const isHtml = params.get("html") === "true";

		if (!message) {
		return null;
		}

		return (
		<Alert severity="info">
		{isHtml ? (
		<span
		dangerouslySetInnerHTML={{ __html: decodeURIComponent(message) }}
		css={{
		"& .link": {
		color: "inherit",
		textDecoration: "underline",
		"&:hover": {
		textDecoration: "none",
		},
		},
		}}
		/>
		) : (
		message
		)}
		</Alert>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,6 +7,7 @@ import { type FC, useState } from "react";
		import { useLocation } from "react-router-dom";
		import { SignInForm } from "./SignInForm";
		import { TermsOfServiceLink } from "./TermsOfServiceLink";
		import { LoginMessage } from "./LoginMessage";

		interface LoginPageViewProps {
		authMethods: AuthMethods \| undefined;
Expand DownExpand Up		@@ -53,14 +54,17 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
		</Button>
		</>
		) : (
		<SignInForm
		authMethods={authMethods}
		redirectTo={redirectTo}
		isSigningIn={isSigningIn}
		error={error}
		message={message}
		onSubmit={onSignIn}
		/>
		<>
		<LoginMessage />
		<SignInForm
		authMethods={authMethods}
		redirectTo={redirectTo}
		isSigningIn={isSigningIn}
		error={error}
		message={message}
		onSubmit={onSignIn}
		/>
		</>
		)}
		<footer css={styles.footer}>
		<div>
Expand Down