refactor: use zod for oidc params (#771)

* refactor: use zod for oidc params

* fix: review comments

* fix: use min instead of nonempty

frontend/src/pages/authorize-page.tsx

@@ -72,36 +72,27 @@ export const AuthorizePage = () => {
   const scopeMap = createScopeMap(t);
 
   const searchParams = new URLSearchParams(search);
-  const {
-    values: props,
-    missingParams,
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
-  const scopes = props.scope ? props.scope.split(" ").filter(Boolean) : [];
+  const oidcParams = useOIDCParams(searchParams);
 
   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,
-        response_type: props.response_type,
-        client_id: props.client_id,
-        redirect_uri: props.redirect_uri,
-        state: props.state,
-        nonce: props.nonce,
+        ...oidcParams.values,
       });
     },
-    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 {
-    values: props,
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
+  const redirectUri = searchParams.get("redirect_uri") || undefined;
+  const oidcParams = useOIDCParams(searchParams);
 
   const [isOauthAutoRedirect, setIsOauthAutoRedirect] = useState(
     providers.find((provider) => provider.id === oauthAutoRedirect) !==
-      undefined && props.redirect_uri,
+      undefined && redirectUri !== undefined,
   );
 
   const oauthProviders = providers.filter(
@@ -77,12 +74,16 @@ export const LoginPage = () => {
     variables: oauthVariables,
   } = useMutation({
     mutationFn: (provider: string) => {
-      const params = isOidc
-        ? `?${compiledOIDCParams}`
-        : props.redirect_uri
-          ? `?redirect_uri=${encodeURIComponent(props.redirect_uri)}`
-          : "";
-      return axios.get(`/api/oauth/url/${provider}${params}`);
+      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()}`);
     },
     mutationKey: ["oauth"],
     onSuccess: (data) => {
@@ -113,8 +114,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;
       }
@@ -124,12 +129,12 @@ export const LoginPage = () => {
       });
 
       redirectTimer.current = window.setTimeout(() => {
-        if (isOidc) {
-          window.location.replace(`/authorize?${compiledOIDCParams}`);
+        if (oidcParams.isOidc) {
+          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);
     },
@@ -148,7 +153,7 @@ export const LoginPage = () => {
       !isLoggedIn &&
       isOauthAutoRedirect &&
       !hasAutoRedirectedRef.current &&
-      props.redirect_uri
+      redirectUri !== undefined
     ) {
       hasAutoRedirectedRef.current = true;
       oauthMutate(oauthAutoRedirect);
@@ -159,7 +164,7 @@ export const LoginPage = () => {
     hasAutoRedirectedRef,
     oauthAutoRedirect,
     isOauthAutoRedirect,
-    props.redirect_uri,
+    redirectUri,
   ]);
 
   useEffect(() => {
@@ -174,14 +179,14 @@ export const LoginPage = () => {
     };
   }, [redirectTimer, redirectButtonTimer]);
 
-  if (isLoggedIn && isOidc) {
-    return <Navigate to={`/authorize?${compiledOIDCParams}`} replace />;
+  if (isLoggedIn && oidcParams.isOidc) {
+    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 {
-    values: props,
-    isOidc,
-    compiled: compiledOIDCParams,
-  } = useOIDCParams(searchParams);
+  const redirectUri = searchParams.get("redirect_uri") || undefined;
+  const oidcParams = 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) {
-          window.location.replace(`/authorize?${compiledOIDCParams}`);
+        if (oidcParams.isOidc) {
+          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);
     },