fix(frontend): redirects improvements...

Author: 0ubbe

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/4-agent/page.tsx

@@ -1,29 +1,30 @@
 "use client";
+import { StoreAgentDetails } from "@/lib/autogpt-server-api";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { isEmptyOrWhitespace } from "@/lib/utils";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useOnboarding } from "../../../../providers/onboarding/onboarding-provider";
+import OnboardingAgentCard from "../components/OnboardingAgentCard";
 import OnboardingButton from "../components/OnboardingButton";
 import {
   OnboardingFooter,
   OnboardingHeader,
   OnboardingStep,
 } from "../components/OnboardingStep";
 import { OnboardingText } from "../components/OnboardingText";
-import OnboardingAgentCard from "../components/OnboardingAgentCard";
-import { useEffect, useState } from "react";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import { StoreAgentDetails } from "@/lib/autogpt-server-api";
-import { isEmptyOrWhitespace } from "@/lib/utils";
-import { useOnboarding } from "../../../../providers/onboarding/onboarding-provider";
-import router from "next/router";
 
 export default function Page() {
   const { state, updateState, completeStep } = useOnboarding(4, "INTEGRATIONS");
   const [agents, setAgents] = useState<StoreAgentDetails[]>([]);
   const api = useBackendAPI();
+  const router = useRouter();
 
   useEffect(() => {
     api.getOnboardingAgents().then((agents) => {
       if (agents.length < 2) {
         completeStep("CONGRATS");
-        router.push("/onboarding");
+        router.replace("/");
       }
       setAgents(agents);
     });

autogpt_platform/frontend/src/app/(no-navbar)/onboarding/page.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export default function OnboardingPage() {
   const router = useRouter();
@@ -14,15 +14,15 @@ export default function OnboardingPage() {
         // Check if onboarding is enabled
         const isEnabled = await api.isOnboardingEnabled();
         if (!isEnabled) {
-          router.push("/");
+          router.replace("/");
           return;
         }
 
         const onboarding = await api.getUserOnboarding();
 
         // Handle completed onboarding
         if (onboarding.completedSteps.includes("GET_RESULTS")) {
-          router.push("/");
+          router.replace("/");
           return;
         }
 
@@ -33,13 +33,13 @@ export default function OnboardingPage() {
               const libraryAgent = await api.addMarketplaceAgentToLibrary(
                 onboarding.selectedStoreListingVersionId,
               );
-              router.push(`/library/agents/${libraryAgent.id}`);
+              router.replace(`/library/agents/${libraryAgent.id}`);
             } catch (error) {
               console.error("Failed to add agent to library:", error);
-              router.push("/library");
+              router.replace("/library");
             }
           } else {
-            router.push("/library");
+            router.replace("/library");
           }
           return;
         }
@@ -79,7 +79,7 @@ export default function OnboardingPage() {
         router.push("/onboarding/1-welcome");
       } catch (error) {
         console.error("Failed to determine onboarding step:", error);
-        router.push("/");
+        router.replace("/");
       }
     }
 

autogpt_platform/frontend/src/app/(platform)/login/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Form, FormField } from "@/components/__legacy__/ui/form";
 import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/atoms/Input/Input";
 import { Link } from "@/components/atoms/Link/Link";
@@ -7,10 +8,9 @@ import AuthFeedback from "@/components/auth/AuthFeedback";
 import { EmailNotAllowedModal } from "@/components/auth/EmailNotAllowedModal";
 import { GoogleOAuthButton } from "@/components/auth/GoogleOAuthButton";
 import Turnstile from "@/components/auth/Turnstile";
-import { Form, FormField } from "@/components/__legacy__/ui/form";
+import { environment } from "@/services/environment";
 import { LoadingLogin } from "./components/LoadingLogin";
 import { useLoginPage } from "./useLoginPage";
-import { environment } from "@/services/environment";
 
 export default function LoginPage() {
   const {
@@ -20,18 +20,16 @@ export default function LoginPage() {
     turnstile,
     captchaKey,
     isLoading,
-    isRedirecting,
     isCloudEnv,
     isUserLoading,
-    isGoogleLoading,
     showNotAllowedModal,
     isSupabaseAvailable,
     handleSubmit,
     handleProviderLogin,
     handleCloseNotAllowedModal,
   } = useLoginPage();
 
-  if (isUserLoading || user || isRedirecting) {
+  if (isUserLoading || user) {
     return <LoadingLogin />;
   }
 
@@ -111,7 +109,7 @@ export default function LoginPage() {
           {isCloudEnv ? (
             <GoogleOAuthButton
               onClick={() => handleProviderLogin("google")}
-              isLoading={isGoogleLoading}
+              isLoading={isLoading}
               disabled={isLoading}
             />
           ) : null}

autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts

@@ -19,9 +19,7 @@ export function useLoginPage() {
   const returnUrl = searchParams.get("returnUrl");
   const { toast } = useToast();
   const [isLoading, setIsLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
   const [showNotAllowedModal, setShowNotAllowedModal] = useState(false);
-  const [isRedirecting, setIsRedirecting] = useState(false);
   const isCloudEnv = environment.isCloud();
   const isVercelPreview = process.env.NEXT_PUBLIC_VERCEL_ENV === "preview";
 
@@ -45,15 +43,15 @@ export function useLoginPage() {
   }, [turnstile]);
 
   async function handleProviderLogin(provider: LoginProvider) {
-    setIsGoogleLoading(true);
+    setIsLoading(true);
 
     if (isCloudEnv && !turnstile.verified && !isVercelPreview) {
       toast({
         title: "Please complete the CAPTCHA challenge.",
         variant: "info",
       });
 
-      setIsGoogleLoading(false);
+      setIsLoading(false);
       resetCaptcha();
       return;
     }
@@ -67,24 +65,14 @@ export function useLoginPage() {
 
       if (!response.ok) {
         const { error } = await response.json();
-        if (error === "not_allowed") {
-          setShowNotAllowedModal(true);
-        } else {
-          setFeedback(error || "Failed to start OAuth flow");
-        }
-        resetCaptcha();
-        setIsGoogleLoading(false);
-        return;
+        throw new Error(error || "Failed to start OAuth flow");
       }
 
       const { url } = await response.json();
-      if (url) {
-        setIsRedirecting(true);
-        window.location.href = url as string;
-      }
+      if (url) window.location.href = url as string;
     } catch (error) {
       resetCaptcha();
-      setIsGoogleLoading(false);
+      setIsLoading(false);
       setFeedback(
         error instanceof Error ? error.message : "Failed to start OAuth flow",
       );
@@ -93,6 +81,7 @@ export function useLoginPage() {
 
   async function handleLogin(data: z.infer<typeof loginFormSchema>) {
     setIsLoading(true);
+
     if (isCloudEnv && !turnstile.verified && !isVercelPreview) {
       toast({
         title: "Please complete the CAPTCHA challenge.",
@@ -129,26 +118,12 @@ export function useLoginPage() {
       const result = await response.json();
 
       if (!response.ok) {
-        toast({
-          title: result?.error || "Login failed",
-          variant: "destructive",
-        });
-        setIsLoading(false);
-        resetCaptcha();
-        turnstile.reset();
-        return;
+        throw new Error(result?.error || "Login failed");
       }
 
-      await supabase?.auth.refreshSession();
-      setIsLoading(false);
-      setFeedback(null);
-
       // Prioritize returnUrl from query params over backend's onboarding logic
       const next = computeReturnURL(returnUrl, result);
-      if (next) {
-        setIsRedirecting(true);
-        router.push(next);
-      }
+      if (next) router.replace(next);
     } catch (error) {
       toast({
         title:
@@ -170,10 +145,8 @@ export function useLoginPage() {
     captchaKey,
     user,
     isLoading,
-    isRedirecting,
     isCloudEnv,
     isUserLoading,
-    isGoogleLoading,
     showNotAllowedModal,
     isSupabaseAvailable: !!supabase,
     handleSubmit: form.handleSubmit(handleLogin),

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -1,5 +1,13 @@
 "use client";
 
+import { Checkbox } from "@/components/__legacy__/ui/checkbox";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/__legacy__/ui/form";
 import { Button } from "@/components/atoms/Button/Button";
 import { Input } from "@/components/atoms/Input/Input";
 import { Link } from "@/components/atoms/Link/Link";
@@ -9,18 +17,10 @@ import AuthFeedback from "@/components/auth/AuthFeedback";
 import { EmailNotAllowedModal } from "@/components/auth/EmailNotAllowedModal";
 import { GoogleOAuthButton } from "@/components/auth/GoogleOAuthButton";
 import Turnstile from "@/components/auth/Turnstile";
-import { Checkbox } from "@/components/__legacy__/ui/checkbox";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/__legacy__/ui/form";
+import { environment } from "@/services/environment";
 import { WarningOctagonIcon } from "@phosphor-icons/react/dist/ssr";
 import { LoadingSignup } from "./components/LoadingSignup";
 import { useSignupPage } from "./useSignupPage";
-import { environment } from "@/services/environment";
 
 export default function SignupPage() {
   const {
@@ -32,16 +32,14 @@ export default function SignupPage() {
     isLoading,
     isCloudEnv,
     isUserLoading,
-    isRedirecting,
-    isGoogleLoading,
     showNotAllowedModal,
     isSupabaseAvailable,
     handleSubmit,
     handleProviderSignup,
     handleCloseNotAllowedModal,
   } = useSignupPage();
 
-  if (isUserLoading || isLoggedIn || isRedirecting) {
+  if (isUserLoading || isLoggedIn) {
     return <LoadingSignup />;
   }
 
@@ -189,7 +187,7 @@ export default function SignupPage() {
         {isCloudEnv ? (
           <GoogleOAuthButton
             onClick={() => handleProviderSignup("google")}
-            isLoading={isGoogleLoading}
+            isLoading={isLoading}
             disabled={isLoading}
           />
         ) : null}