refactor: move oidc handling to backend and add support for oidc post (#923)

Co-authored-by: Claude <noreply@anthropic.com>

frontend/src/pages/authorize-page.tsx

@@ -1,5 +1,5 @@
 import { useUserContext } from "@/context/user-context";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { Navigate, useNavigate } from "react-router";
 import { useLocation } from "react-router";
 import {
@@ -10,11 +10,9 @@ import {
   CardFooter,
   CardContent,
 } from "@/components/ui/card";
-import { getOidcClientInfoSchema } from "@/schemas/oidc-schemas";
 import { Button } from "@/components/ui/button";
 import axios from "axios";
 import { toast } from "sonner";
-import { useOIDCParams } from "@/lib/hooks/oidc";
 import { useTranslation } from "react-i18next";
 import { TFunction } from "i18next";
 import { Mail, MapPin, Phone, Shield, User, Users } from "lucide-react";
@@ -23,6 +21,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {
+  recompileScreenParams,
+  useScreenParams,
+} from "@/lib/hooks/screen-params";
 
 type Scope = {
   id: string;
@@ -84,27 +86,17 @@ export const AuthorizePage = () => {
   const scopeMap = createScopeMap(t);
 
   const searchParams = new URLSearchParams(search);
-  const oidcParams = useOIDCParams(searchParams);
-
-  const getClientInfo = useQuery({
-    queryKey: ["client", oidcParams.values.client_id],
-    queryFn: async () => {
-      const res = await fetch(
-        `/api/oidc/clients/${encodeURIComponent(oidcParams.values.client_id)}`,
-      );
-      const data = await getOidcClientInfoSchema.parseAsync(await res.json());
-      return data;
-    },
-    enabled: oidcParams.isOidc,
-  });
+  const screenParams = useScreenParams(searchParams);
+  const isOidc = screenParams.login_for === "oidc";
+  const compiledParams = recompileScreenParams(screenParams);
 
   const authorizeMutation = useMutation({
     mutationFn: () => {
-      return axios.post("/api/oidc/authorize", {
-        ...oidcParams.values,
+      return axios.post("/api/oidc/authorize-complete", {
+        ticket: screenParams.oidc_ticket,
       });
     },
-    mutationKey: ["authorize", oidcParams.values.client_id],
+    mutationKey: ["authorize", screenParams.oidc_ticket],
     onSuccess: (data) => {
       toast.info(t("authorizeSuccessTitle"), {
         description: t("authorizeSuccessSubtitle"),
@@ -118,56 +110,32 @@ export const AuthorizePage = () => {
     },
   });
 
-  if (oidcParams.issues.length > 0) {
+  if (!isOidc || !screenParams.oidc_ticket || !screenParams.oidc_scope) {
     return (
       <Navigate
-        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: oidcParams.issues.join(", ") }))}`}
+        to={`/error?error=${encodeURIComponent(t("authorizeErrorInvalidParams"))}`}
         replace
       />
     );
   }
 
   if (!auth.authenticated) {
-    return <Navigate to={`/login?${oidcParams.compiled}`} replace />;
-  }
-
-  if (getClientInfo.isLoading) {
-    return (
-      <Card className="gap-0">
-        <CardHeader>
-          <CardTitle className="text-xl">
-            {t("authorizeLoadingTitle")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <CardDescription>{t("authorizeLoadingSubtitle")}</CardDescription>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (getClientInfo.isError) {
-    return (
-      <Navigate
-        to={`/error?error=${encodeURIComponent(t("authorizeErrorClientInfo"))}`}
-        replace
-      />
-    );
+    return <Navigate to={`/login${compiledParams}`} replace />;
   }
 
   const scopes =
-    oidcParams.values.scope.split(" ").filter((s) => s.trim() !== "") || [];
+    screenParams.oidc_scope.split(" ").filter((s) => s.trim() !== "") || [];
 
   return (
     <Card>
       <CardHeader className="mb-2">
         <div className="flex flex-col gap-3 items-center justify-center text-center">
           <div className="bg-accent-foreground box-content text-muted text-xl font-bold font-sans rounded-lg size-8 p-2 flex items-center justify-center">
-            {getClientInfo.data?.name.slice(0, 1) || "U"}
+            {screenParams.oidc_name ? screenParams.oidc_name.slice(0, 1) : "U"}
           </div>
           <CardTitle className="text-xl">
             {t("authorizeCardTitle", {
-              app: getClientInfo.data?.name || "Unknown",
+              app: screenParams.oidc_name || "Unknown",
             })}
           </CardTitle>
           <CardDescription className="text-sm max-w-sm">
@@ -206,7 +174,7 @@ export const AuthorizePage = () => {
           {t("authorizeTitle")}
         </Button>
         <Button
-          onClick={() => navigate("/")}
+          onClick={() => navigate(`/logout${compiledParams}`)}
           disabled={authorizeMutation.isPending}
           variant="outline"
         >

frontend/src/pages/continue-page.tsx

@@ -12,6 +12,10 @@ import { Trans, useTranslation } from "react-i18next";
 import { Navigate, useLocation, useNavigate } from "react-router";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRedirectUri } from "@/lib/hooks/redirect-uri";
+import {
+  recompileScreenParams,
+  useScreenParams,
+} from "@/lib/hooks/screen-params";
 
 export const ContinuePage = () => {
   const { app, ui } = useAppContext();
@@ -25,7 +29,10 @@ export const ContinuePage = () => {
   const hasRedirected = useRef(false);
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri");
+  const screenParams = useScreenParams(searchParams);
+  const redirectUri = screenParams.redirect_uri;
+  const isAppLogin = screenParams.login_for === "app";
+  const recompiledParams = recompileScreenParams(screenParams);
 
   const { url, valid, trusted, allowedProto, httpsDowngrade } = useRedirectUri(
     redirectUri,
@@ -43,7 +50,8 @@ export const ContinuePage = () => {
     auth.authenticated &&
     hasValidRedirect &&
     !showUntrustedWarning &&
-    !showInsecureWarning;
+    !showInsecureWarning &&
+    isAppLogin;
 
   const redirectToTarget = useCallback(() => {
     if (!urlHref || hasRedirected.current) {
@@ -79,15 +87,10 @@ export const ContinuePage = () => {
   }, [shouldAutoRedirect, redirectToTarget]);
 
   if (!auth.authenticated) {
-    return (
-      <Navigate
-        to={`/login${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`}
-        replace
-      />
-    );
+    return <Navigate to={`/login${recompiledParams}`} replace />;
   }
 
-  if (!hasValidRedirect) {
+  if (!hasValidRedirect || !isAppLogin) {
     return <Navigate to="/logout" replace />;
   }
 

frontend/src/pages/error-page.tsx

@@ -11,7 +11,7 @@ export const ErrorPage = () => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const searchParams = new URLSearchParams(search);
-  const error = searchParams.get("error") ?? "";
+  const error = searchParams.get("error") || "";
 
   return (
     <Card>

frontend/src/pages/forgot-password-page.tsx

@@ -11,12 +11,18 @@ import { useAppContext } from "@/context/app-context";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import { useLocation } from "react-router";
+import {
+  recompileScreenParams,
+  useScreenParams,
+} from "@/lib/hooks/screen-params";
 
 export const ForgotPasswordPage = () => {
   const { ui } = useAppContext();
   const { t } = useTranslation();
   const { search } = useLocation();
   const searchParams = new URLSearchParams(search);
+  const screenParams = useScreenParams(searchParams);
+  const compiledParams = recompileScreenParams(screenParams);
 
   return (
     <Card>
@@ -37,10 +43,7 @@ export const ForgotPasswordPage = () => {
           className="w-full"
           variant="outline"
           onClick={() => {
-            const eparams = searchParams.toString();
-            window.location.replace(
-              `/login${eparams.length > 0 ? `?${eparams}` : ""}`,
-            );
+            window.location.replace(`/login${compiledParams}`);
           }}
         >
           {t("backToLoginButton")}

frontend/src/pages/login-page.tsx

@@ -18,7 +18,6 @@ import { OAuthButton } from "@/components/ui/oauth-button";
 import { SeperatorWithChildren } from "@/components/ui/separator";
 import { useAppContext } from "@/context/app-context";
 import { useUserContext } from "@/context/user-context";
-import { useOIDCParams } from "@/lib/hooks/oidc";
 import { LoginSchema } from "@/schemas/login-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
@@ -26,6 +25,11 @@ import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
+import {
+  recompileScreenParams,
+  useScreenParams,
+} from "@/lib/hooks/screen-params";
+import { useLoginFor } from "@/lib/hooks/login-for";
 
 const iconMap: Record<string, React.ReactNode> = {
   google: <GoogleIcon />,
@@ -46,7 +50,9 @@ export const LoginPage = () => {
   const { t } = useTranslation();
 
   const [showRedirectButton, setShowRedirectButton] = useState(false);
-  const [useTailscale, setUseTailscale] = useState(tailscale.nodeName !== undefined);
+  const [useTailscale, setUseTailscale] = useState(
+    tailscale.nodeName !== undefined,
+  );
 
   const hasAutoRedirectedRef = useRef(false);
 
@@ -56,17 +62,22 @@ export const LoginPage = () => {
   const formId = useId();
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri") || undefined;
-  const oidcParams = useOIDCParams(searchParams);
+  const screenParams = useScreenParams(searchParams);
+  const compiledParams = recompileScreenParams(screenParams);
+  const loginForUrl = useLoginFor({
+    login_for: screenParams.login_for,
+    compiledParams,
+  });
 
   const [isOauthAutoRedirect, setIsOauthAutoRedirect] = useState(
     providers.find((provider) => provider.id === oauth.autoRedirect) !==
-      undefined && redirectUri !== undefined,
+      undefined && screenParams.redirect_uri !== undefined,
   );
 
   const oauthProviders = providers.filter(
     (provider) => provider.id !== "local" && provider.id !== "ldap",
   );
+
   const userAuthConfigured =
     providers.find(
       (provider) => provider.id === "local" || provider.id === "ldap",
@@ -79,16 +90,7 @@ export const LoginPage = () => {
     variables: oauthVariables,
   } = useMutation({
     mutationFn: (provider: string) => {
-      const getParams = function (): string {
-        if (oidcParams.isOidc) {
-          return `?${oidcParams.compiled}`;
-        }
-        if (redirectUri) {
-          return `?redirect_uri=${encodeURIComponent(redirectUri)}`;
-        }
-        return "";
-      };
-      return axios.get(`/api/oauth/url/${provider}${getParams()}`);
+      return axios.get(`/api/oauth/url/${provider}${compiledParams}`);
     },
     mutationKey: ["oauth"],
     onSuccess: (data) => {
@@ -119,13 +121,7 @@ export const LoginPage = () => {
     mutationKey: ["login"],
     onSuccess: (data) => {
       if (data.data.totpPending) {
-        if (oidcParams.isOidc) {
-          window.location.replace(`/totp?${oidcParams.compiled}`);
-          return;
-        }
-        window.location.replace(
-          `/totp${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
-        );
+        window.location.replace(`/totp${compiledParams}`);
         return;
       }
 
@@ -134,13 +130,7 @@ export const LoginPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (oidcParams.isOidc) {
-          window.location.replace(`/authorize?${oidcParams.compiled}`);
-          return;
-        }
-        window.location.replace(
-          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
-        );
+        window.location.replace(loginForUrl);
       }, 500);
     },
     onError: (error: AxiosError) => {
@@ -163,13 +153,7 @@ export const LoginPage = () => {
         });
 
         redirectTimer.current = window.setTimeout(() => {
-          if (oidcParams.isOidc) {
-            window.location.replace(`/authorize?${oidcParams.compiled}`);
-            return;
-          }
-          window.location.replace(
-            `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
-          );
+          window.location.replace(loginForUrl);
         }, 500);
       },
       onError: () => {
@@ -184,7 +168,8 @@ export const LoginPage = () => {
       !auth.authenticated &&
       isOauthAutoRedirect &&
       !hasAutoRedirectedRef.current &&
-      redirectUri !== undefined
+      screenParams.redirect_uri &&
+      screenParams.login_for
     ) {
       hasAutoRedirectedRef.current = true;
       oauthMutate(oauth.autoRedirect);
@@ -195,7 +180,8 @@ export const LoginPage = () => {
     hasAutoRedirectedRef,
     oauth.autoRedirect,
     isOauthAutoRedirect,
-    redirectUri,
+    screenParams.login_for,
+    screenParams.redirect_uri,
   ]);
 
   useEffect(() => {
@@ -210,21 +196,8 @@ export const LoginPage = () => {
     };
   }, [redirectTimer, redirectButtonTimer]);
 
-  if (auth.authenticated && oidcParams.isOidc) {
-    return <Navigate to={`/authorize?${oidcParams.compiled}`} replace />;
-  }
-
-  if (auth.authenticated && redirectUri !== undefined) {
-    return (
-      <Navigate
-        to={`/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`}
-        replace
-      />
-    );
-  }
-
   if (auth.authenticated) {
-    return <Navigate to="/logout" replace />;
+    return <Navigate to={loginForUrl} replace />;
   }
 
   if (isOauthAutoRedirect) {

frontend/src/pages/logout-page.tsx

@@ -15,12 +15,21 @@ import { Navigate } 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 {
+  useScreenParams,
+  recompileScreenParams,
+} from "@/lib/hooks/screen-params";
 
 export const LogoutPage = () => {
   const { auth, oauth, tailscale } = useUserContext();
   const { t } = useTranslation();
+  const { search } = useLocation();
 
   const redirectTimer = useRef<number | null>(null);
+  const searchParams = new URLSearchParams(search);
+  const screenParams = useScreenParams(searchParams);
+  const compiledParams = recompileScreenParams(screenParams);
 
   const logoutMutation = useMutation({
     mutationFn: () => axios.post("/api/user/logout"),
@@ -31,7 +40,7 @@ export const LogoutPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        window.location.replace("/login");
+        window.location.replace(`/login${compiledParams}`);
       }, 500);
     },
     onError: () => {
@@ -50,7 +59,7 @@ export const LogoutPage = () => {
   }, [redirectTimer]);
 
   if (!auth.authenticated) {
-    return <Navigate to="/login" replace />;
+    return <Navigate to={`/login${compiledParams}`} replace />;
   }
 
   if (oauth.active) {

frontend/src/pages/totp-page.tsx

@@ -16,10 +16,14 @@ import { useEffect, useId, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
-import { useOIDCParams } from "@/lib/hooks/oidc";
+import {
+  recompileScreenParams,
+  useScreenParams,
+} from "@/lib/hooks/screen-params";
+import { useLoginFor } from "@/lib/hooks/login-for";
 
 export const TotpPage = () => {
-  const { totp } = useUserContext();
+  const { totp, auth } = useUserContext();
   const { t } = useTranslation();
   const { search } = useLocation();
   const formId = useId();
@@ -27,8 +31,12 @@ export const TotpPage = () => {
   const redirectTimer = useRef<number | null>(null);
 
   const searchParams = new URLSearchParams(search);
-  const redirectUri = searchParams.get("redirect_uri") || undefined;
-  const oidcParams = useOIDCParams(searchParams);
+  const screenParams = useScreenParams(searchParams);
+  const compiledParams = recompileScreenParams(screenParams);
+  const loginForUrl = useLoginFor({
+    login_for: screenParams.login_for,
+    compiledParams,
+  });
 
   const totpMutation = useMutation({
     mutationFn: (values: TotpSchema) => axios.post("/api/user/totp", values),
@@ -39,14 +47,7 @@ export const TotpPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (oidcParams.isOidc) {
-          window.location.replace(`/authorize?${oidcParams.compiled}`);
-          return;
-        }
-
-        window.location.replace(
-          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
-        );
+        window.location.replace(loginForUrl);
       }, 500);
     },
     onError: () => {
@@ -65,7 +66,10 @@ export const TotpPage = () => {
   }, [redirectTimer]);
 
   if (!totp.pending) {
-    return <Navigate to="/" replace />;
+    if (auth.authenticated) {
+      return <Navigate to={loginForUrl} replace />;
+    }
+    return <Navigate to={`/login${compiledParams}`} replace />;
   }
 
   return (