feat: support for oidc end session endpoint

frontend/src/lib/hooks/screen-params.ts

@@ -7,6 +7,7 @@ type ScreenParams = {
   oidc_scope?: string;
   oidc_name?: string;
   oidc_prompt?: "none" | "login";
+  logout_reason?: "oidc";
 };
 
 const zodScreenParams = z.object({
@@ -16,6 +17,7 @@ const zodScreenParams = z.object({
   oidc_scope: z.string().optional(),
   oidc_name: z.string().optional(),
   oidc_prompt: z.enum(["none", "login"]).optional(),
+  logout_reason: z.enum(["oidc"]).optional(),
 });
 
 export function useScreenParams(params: URLSearchParams): ScreenParams {

frontend/src/lib/i18n/locales/en-US.json

@@ -30,6 +30,8 @@
   "logoutSuccessTitle": "Logged out",
   "logoutSuccessSubtitle": "You have been logged out",
   "logoutTitle": "Logout",
+  "logoutOidcTitle": "Confirm logout",
+  "logoutOidcSubtitle": "We couldn't verify where to redirect you after logout. Are you sure you want to log out?",
   "logoutUsernameSubtitle": "You are currently logged in as <code>{{username}}</code>. Click the button below to logout.",
   "logoutOauthSubtitle": "You are currently logged in as <code>{{username}}</code> using the {{provider}} OAuth provider. Click the button below to logout.",
   "notFoundTitle": "Page not found",

frontend/src/lib/i18n/locales/en.json

@@ -30,6 +30,8 @@
   "logoutSuccessTitle": "Logged out",
   "logoutSuccessSubtitle": "You have been logged out",
   "logoutTitle": "Logout",
+  "logoutOidcTitle": "Confirm logout",
+  "logoutOidcSubtitle": "We couldn't verify where to redirect you after logout. Are you sure you want to log out?",
   "logoutUsernameSubtitle": "You are currently logged in as <code>{{username}}</code>. Click the button below to logout.",
   "logoutOauthSubtitle": "You are currently logged in as <code>{{username}}</code> using the {{provider}} OAuth provider. Click the button below to logout.",
   "notFoundTitle": "Page not found",

frontend/src/pages/logout-page.tsx

@@ -9,35 +9,61 @@ import {
 import { useUserContext } from "@/context/user-context";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Navigate } from "react-router";
+import { Navigate, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
-import { type UseMutationResult } from "@tanstack/react-query";
-import { type AxiosResponse } from "axios";
-import { useLocation } from "react-router";
 import {
   searchParamsFromObject,
   useScreenParams,
 } from "@/lib/hooks/screen-params";
 
 export const LogoutPage = () => {
-  const { auth, oauth, tailscale } = useUserContext();
+  const { auth } = useUserContext();
   const { t } = useTranslation();
   const { search } = useLocation();
+  const navigate = useNavigate();
+
+  const { logout_reason, ...loginParams } = useScreenParams(
+    new URLSearchParams(search),
+  );
+  const params = searchParamsFromObject(loginParams).toString();
+  const loginUrl = `/login${params ? `?${params}` : ""}`;
+  const { mutate, isPending, isSuccess } = useLogout(loginUrl);
+
+  if (!auth.authenticated) {
+    return <Navigate to={loginUrl} replace />;
+  }
+
+  if (logout_reason === "oidc") {
+    return (
+      <LogoutCard
+        title={t("logoutOidcTitle")}
+        isPending={isPending || isSuccess}
+        onLogout={mutate}
+        onCancel={() => navigate("/", { replace: true })}
+      >
+        {t("logoutOidcSubtitle")}
+      </LogoutCard>
+    );
+  }
 
+  return (
+    <LogoutCard
+      title={t("logoutTitle")}
+      isPending={isPending || isSuccess}
+      onLogout={mutate}
+    >
+      <LogoutDescription />
+    </LogoutCard>
+  );
+};
+
+function useLogout(loginUrl: string) {
+  const { t } = useTranslation();
   const redirectTimer = useRef<number | null>(null);
-  const searchParams = new URLSearchParams(search);
-  const screenParams = useScreenParams(searchParams);
-  const compiledParams = (() => {
-    const params = searchParamsFromObject(screenParams).toString();
-    if (params.length > 0) {
-      return `?${params}`;
-    }
-    return "";
-  })();
 
-  const logoutMutation = useMutation({
+  const mutation = useMutation({
     mutationFn: () => axios.post("/api/user/logout"),
     mutationKey: ["logout"],
     onSuccess: () => {
@@ -46,7 +72,7 @@ export const LogoutPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        window.location.replace(`/login${compiledParams}`);
+        window.location.replace(loginUrl);
       }, 500);
     },
     onError: () => {
@@ -58,99 +84,78 @@ export const LogoutPage = () => {
 
   useEffect(() => {
     return () => {
-      if (redirectTimer.current) {
-        clearTimeout(redirectTimer.current);
+      if (redirectTimer.current !== null) {
+        window.clearTimeout(redirectTimer.current);
       }
     };
-  }, [redirectTimer]);
-
-  if (!auth.authenticated) {
-    return <Navigate to={`/login${compiledParams}`} replace />;
-  }
-
-  if (oauth.active) {
-    return (
-      <LogoutLayout logoutMutation={logoutMutation}>
-        <Trans
-          i18nKey="logoutOauthSubtitle"
-          t={t}
-          components={{
-            code: <code />,
-          }}
-          values={{
-            username: auth.email,
-            provider: oauth.displayName,
-          }}
-          shouldUnescape={true}
-        />
-      </LogoutLayout>
-    );
-  }
-
-  if (auth.providerId === "tailscale") {
-    return (
-      <LogoutLayout logoutMutation={logoutMutation}>
-        <Trans
-          i18nKey="logoutTailscaleSubtitle"
-          t={t}
-          components={{
-            code: <code />,
-          }}
-          values={{
-            deviceName: tailscale.nodeName,
-          }}
-          shouldUnescape={true}
-        />
-      </LogoutLayout>
-    );
-  }
+  }, []);
 
-  return (
-    <LogoutLayout logoutMutation={logoutMutation}>
-      <Trans
-        i18nKey="logoutUsernameSubtitle"
-        t={t}
-        components={{
-          code: <code />,
-        }}
-        values={{
-          username: auth.username,
-        }}
-        shouldUnescape={true}
-      />
-    </LogoutLayout>
-  );
-};
+  return mutation;
+}
 
-interface LogoutLayoutProps {
-  children: React.ReactNode;
-  logoutMutation: UseMutationResult<
-    //eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-empty-object-type
-    AxiosResponse<any, any, {}>,
-    Error,
-    void,
-    unknown
-  >;
+interface LogoutCardProps {
+  title: string;
+  children: ReactNode;
+  isPending?: boolean;
+  onLogout?: () => void;
+  onCancel?: () => void;
 }
 
-function LogoutLayout({ children, logoutMutation }: LogoutLayoutProps) {
+function LogoutCard({
+  title,
+  children,
+  isPending = false,
+  onLogout,
+  onCancel,
+}: LogoutCardProps) {
   const { t } = useTranslation();
+
   return (
-    <Card>
+    <Card aria-live="polite">
       <CardHeader className="gap-1.5">
-        <CardTitle className="text-xl">{t("logoutTitle")}</CardTitle>
+        <CardTitle className="text-xl">{title}</CardTitle>
         <CardDescription>{children}</CardDescription>
       </CardHeader>
-      <CardFooter>
-        <Button
-          className="w-full text-destructive"
-          variant="outline"
-          loading={logoutMutation.isPending}
-          onClick={() => logoutMutation.mutate()}
-        >
-          {t("logoutTitle")}
-        </Button>
-      </CardFooter>
+      {onLogout && (
+        <CardFooter className="flex flex-col items-stretch gap-3">
+          <Button
+            variant="destructive"
+            loading={isPending}
+            onClick={onLogout}
+          >
+            {t("logoutTitle")}
+          </Button>
+          {onCancel && (
+            <Button variant="outline" disabled={isPending} onClick={onCancel}>
+              {t("cancelTitle")}
+            </Button>
+          )}
+        </CardFooter>
+      )}
     </Card>
   );
 }
+
+function LogoutDescription() {
+  const { auth, oauth, tailscale } = useUserContext();
+  const { t } = useTranslation();
+  const subtitle = oauth.active
+    ? "logoutOauthSubtitle"
+    : auth.providerId === "tailscale"
+      ? "logoutTailscaleSubtitle"
+      : "logoutUsernameSubtitle";
+
+  return (
+    <Trans
+      i18nKey={subtitle}
+      t={t}
+      components={{ code: <code /> }}
+      values={{
+        username: oauth.active ? auth.email : auth.username,
+        provider: oauth.displayName,
+        deviceName: tailscale.nodeName,
+      }}
+      shouldUnescape={true}
+    />
+  );
+}