fix: review comments

frontend/src/lib/hooks/oidc.ts

@@ -1,64 +1,40 @@
-export type OIDCValues = {
+import { z } from "zod";
-  scope: string;
-  response_type: string;
-  client_id: string;
-  redirect_uri: string;
-  state: string;
-  nonce: string;
-  code_challenge: string;
-  code_challenge_method: string;
-};
 
-interface IuseOIDCParams {
+export const oidcParamsSchema = z.object({
-  values: OIDCValues;
+  scope: z.string().nonempty(),
-  compiled: string;
+  response_type: z.string().nonempty(),
+  client_id: z.string().nonempty(),
+  redirect_uri: z.string().nonempty(),
+  state: z.string().optional(),
+  nonce: z.string().optional(),
+  code_challenge: z.string().optional(),
+  code_challenge_method: z.string().optional(),
+});
+
+export const useOIDCParams = (
+  params: URLSearchParams,
+): {
+  values: z.infer<typeof oidcParamsSchema>;
+  issues: string[];
   isOidc: boolean;
-  missingParams: string[];
+  compiled: string;
-}
+} => {
+  const obj = Object.fromEntries(params.entries());
+  const parsed = oidcParamsSchema.safeParse(obj);
 
-const optionalParams: string[] = [
+  if (parsed.success) {
-  "state",
+    return {
-  "nonce",
+      values: parsed.data,
-  "code_challenge",
+      issues: [],
-  "code_challenge_method",
+      isOidc: true,
-];
+      compiled: new URLSearchParams(parsed.data).toString(),
-
-export function useOIDCParams(params: URLSearchParams): IuseOIDCParams {
-  let compiled: string = "";
-  let isOidc = false;
-  const missingParams: string[] = [];
-
-  const values: OIDCValues = {
-    scope: params.get("scope") ?? "",
-    response_type: params.get("response_type") ?? "",
-    client_id: params.get("client_id") ?? "",
-    redirect_uri: params.get("redirect_uri") ?? "",
-    state: params.get("state") ?? "",
-    nonce: params.get("nonce") ?? "",
-    code_challenge: params.get("code_challenge") ?? "",
-    code_challenge_method: params.get("code_challenge_method") ?? "",
     };
-
-  for (const key of Object.keys(values)) {
-    if (!values[key as keyof OIDCValues]) {
-      if (!optionalParams.includes(key)) {
-        missingParams.push(key);
-      }
-    }
-  }
-
-  if (missingParams.length === 0) {
-    isOidc = true;
-  }
-
-  if (isOidc) {
-    compiled = new URLSearchParams(values).toString();
   }
 
   return {
-    values,
+    issues: parsed.error.issues.map((issue) => issue.path.toString()),
-    compiled,
+    values: {} as z.infer<typeof oidcParamsSchema>,
-    isOidc,
+    isOidc: false,
-    missingParams,
+    compiled: "",
+  };
 };
-}

frontend/src/pages/authorize-page.tsx

@@ -72,36 +72,27 @@ export const AuthorizePage = () => {
   const scopeMap = createScopeMap(t);
 
   const searchParams = new URLSearchParams(search);
-  const {
+  const oidcParams = useOIDCParams(searchParams);
-    values: props,
-    missingParams,
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
-  const scopes = props.scope ? props.scope.split(" ").filter(Boolean) : [];
 
   const getClientInfo = useQuery({
-    queryKey: ["client", props.client_id],
+    queryKey: ["client", oidcParams.values.client_id],
     queryFn: async () => {
-      const res = await fetch(`/api/oidc/clients/${props.client_id}`);
+      const res = await fetch(
+        `/api/oidc/clients/${encodeURIComponent(oidcParams.values.client_id)}`,
+      );
       const data = await getOidcClientInfoSchema.parseAsync(await res.json());
       return data;
     },
-    enabled: isOidc,
+    enabled: oidcParams.isOidc,
   });
 
   const authorizeMutation = useMutation({
     mutationFn: () => {
       return axios.post("/api/oidc/authorize", {
-        scope: props.scope,
+        ...oidcParams.values,
-        response_type: props.response_type,
-        client_id: props.client_id,
-        redirect_uri: props.redirect_uri,
-        state: props.state,
-        nonce: props.nonce,
       });
     },
-    mutationKey: ["authorize", props.client_id],
+    mutationKey: ["authorize", oidcParams.values.client_id],
     onSuccess: (data) => {
       toast.info(t("authorizeSuccessTitle"), {
         description: t("authorizeSuccessSubtitle"),
@@ -115,17 +106,17 @@ export const AuthorizePage = () => {
     },
   });
 
-  if (missingParams.length > 0) {
+  if (oidcParams.issues.length > 0) {
     return (
       <Navigate
-        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: missingParams.join(", ") }))}`}
+        to={`/error?error=${encodeURIComponent(t("authorizeErrorMissingParams", { missingParams: oidcParams.issues.join(", ") }))}`}
         replace
       />
     );
   }
 
   if (!isLoggedIn) {
-    return <Navigate to={`/login?${compiledOIDCParams}`} replace />;
+    return <Navigate to={`/login?${oidcParams.compiled}`} replace />;
   }
 
   if (getClientInfo.isLoading) {
@@ -152,6 +143,9 @@ export const AuthorizePage = () => {
     );
   }
 
+  const scopes =
+    oidcParams.values.scope.split(" ").filter((s) => s.trim() !== "") || [];
+
   return (
     <Card>
       <CardHeader className="mb-2">

frontend/src/pages/login-page.tsx

@@ -51,15 +51,12 @@ export const LoginPage = () => {
   const formId = useId();
 
   const searchParams = new URLSearchParams(search);
-  const {
+  const redirectUri = searchParams.get("redirect_uri") || undefined;
-    values: props,
+  const oidcParams = useOIDCParams(searchParams);
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
 
   const [isOauthAutoRedirect, setIsOauthAutoRedirect] = useState(
     providers.find((provider) => provider.id === oauthAutoRedirect) !==
-      undefined && props.redirect_uri,
+      undefined && redirectUri !== undefined,
   );
 
   const oauthProviders = providers.filter(
@@ -78,7 +75,7 @@ export const LoginPage = () => {
   } = useMutation({
     mutationFn: (provider: string) =>
       axios.get(
-        `/api/oauth/url/${provider}${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
+        `/api/oauth/url/${provider}${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
       ),
     mutationKey: ["oauth"],
     onSuccess: (data) => {
@@ -109,8 +106,12 @@ 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${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
+          `/totp${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
         );
         return;
       }
@@ -120,12 +121,12 @@ export const LoginPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (isOidc) {
+        if (oidcParams.isOidc) {
-          window.location.replace(`/authorize?${compiledOIDCParams}`);
+          window.location.replace(`/authorize?${oidcParams.compiled}`);
           return;
         }
         window.location.replace(
-          `/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
+          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
         );
       }, 500);
     },
@@ -144,7 +145,7 @@ export const LoginPage = () => {
       !isLoggedIn &&
       isOauthAutoRedirect &&
       !hasAutoRedirectedRef.current &&
-      props.redirect_uri
+      redirectUri !== undefined
     ) {
       hasAutoRedirectedRef.current = true;
       oauthMutate(oauthAutoRedirect);
@@ -155,7 +156,7 @@ export const LoginPage = () => {
     hasAutoRedirectedRef,
     oauthAutoRedirect,
     isOauthAutoRedirect,
-    props.redirect_uri,
+    redirectUri,
   ]);
 
   useEffect(() => {
@@ -170,14 +171,14 @@ export const LoginPage = () => {
     };
   }, [redirectTimer, redirectButtonTimer]);
 
-  if (isLoggedIn && isOidc) {
+  if (isLoggedIn && oidcParams.isOidc) {
-    return <Navigate to={`/authorize?${compiledOIDCParams}`} replace />;
+    return <Navigate to={`/authorize?${oidcParams.compiled}`} replace />;
   }
 
-  if (isLoggedIn && props.redirect_uri !== "") {
+  if (isLoggedIn && redirectUri !== undefined) {
     return (
       <Navigate
-        to={`/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`}
+        to={`/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`}
         replace
       />
     );

frontend/src/pages/totp-page.tsx

@@ -27,11 +27,8 @@ export const TotpPage = () => {
   const redirectTimer = useRef<number | null>(null);
 
   const searchParams = new URLSearchParams(search);
-  const {
+  const redirectUri = searchParams.get("redirect_uri") || undefined;
-    values: props,
+  const oidcParams = useOIDCParams(searchParams);
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
 
   const totpMutation = useMutation({
     mutationFn: (values: TotpSchema) => axios.post("/api/user/totp", values),
@@ -42,13 +39,13 @@ export const TotpPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (isOidc) {
+        if (oidcParams.isOidc) {
-          window.location.replace(`/authorize?${compiledOIDCParams}`);
+          window.location.replace(`/authorize?${oidcParams.compiled}`);
           return;
         }
 
         window.location.replace(
-          `/continue${props.redirect_uri ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}` : ""}`,
+          `/continue${redirectUri ? `?redirect_uri=${encodeURIComponent(redirectUri)}` : ""}`,
         );
       }, 500);
     },