fix(frontend): Fix login/logout actions; update credentials cache on state change (#10017)

- Resolves #10008

### Changes 🏗️

- Update `useSupabase` hook to propagate auth state changes
- Refresh `CredentialsProvider` whenever the user login state changes
- Add `logOut` callback to `useSupabase` hook that handles (client-side)
logout
- Remove server-side `logout` action: the Supabase reference
implementation does it client-side, and doing both causes a race
condition

Refactorings to aid implementation of the above:
- Move `@/hooks/useSupabase` -> `@/lib/supabase/useSupabase`

Other improvements:
- Clean up `login` server action based on reference implementation
- Make `BackendAPI.isAuthenticated()` more efficient and faster
- Remove unused `ProfileDropdown` component
- Improve logic and debug logging in `tests/pages/login.page.ts`
- Improve playwright test output logging

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - Log out from account (A)
  - Log in to other account (B)
- Open builder, add a block for which account B has (multiple)
credentials
  - [x] Credentials for account B are shown
  - [x] Credentials for account A are *not* shown

  **Note: do not reload the page** while going through these steps

Author: Pwuts

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

@@ -8,30 +8,6 @@ import BackendAPI from "@/lib/autogpt-server-api";
 import { loginFormSchema, LoginProvider } from "@/types/auth";
 import { verifyTurnstileToken } from "@/lib/turnstile";
 
-export async function logout() {
-  return await Sentry.withServerActionInstrumentation(
-    "logout",
-    {},
-    async () => {
-      const supabase = getServerSupabase();
-
-      if (!supabase) {
-        redirect("/error");
-      }
-
-      const { error } = await supabase.auth.signOut();
-
-      if (error) {
-        console.error("Error logging out", error);
-        return error.message;
-      }
-
-      revalidatePath("/", "layout");
-      redirect("/login");
-    },
-  );
-}
-
 async function shouldShowOnboarding() {
   const api = new BackendAPI();
   return (
@@ -59,23 +35,21 @@ export async function login(
     }
 
     // We are sure that the values are of the correct type because zod validates the form
-    const { data, error } = await supabase.auth.signInWithPassword(values);
+    const { error } = await supabase.auth.signInWithPassword(values);
 
     if (error) {
-      console.error("Error logging in", error);
+      console.error("Error logging in:", error);
       return error.message;
     }
 
     await api.createUser();
+
     // Don't onboard if disabled or already onboarded
     if (await shouldShowOnboarding()) {
       revalidatePath("/onboarding", "layout");
       redirect("/onboarding");
     }
 
-    if (data.session) {
-      await supabase.auth.setSession(data.session);
-    }
     revalidatePath("/", "layout");
     redirect("/");
   });

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

@@ -15,7 +15,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import LoadingBox from "@/components/ui/loading";
 import {
   AuthCard,
@@ -80,6 +80,7 @@ export default function LoginPage() {
       }
 
       const error = await login(data, turnstile.token as string);
+      await supabase?.auth.refreshSession();
       setIsLoading(false);
       if (error) {
         setFeedback(error);
@@ -89,7 +90,7 @@ export default function LoginPage() {
       }
       setFeedback(null);
     },
-    [form, turnstile],
+    [form, turnstile, supabase],
   );
 
   if (user) {

autogpt_platform/frontend/src/app/(platform)/profile/(user)/dashboard/page.tsx

@@ -11,7 +11,7 @@ import {
   StoreSubmissionsResponse,
   StoreSubmissionRequest,
 } from "@/lib/autogpt-server-api/types";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 
 export default function Page({}: {}) {

autogpt_platform/frontend/src/app/(platform)/profile/(user)/integrations/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useToast } from "@/components/ui/use-toast";
 import { IconKey, IconUser } from "@/components/ui/icons";
 import { Trash2Icon } from "lucide-react";
@@ -26,10 +26,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import LoadingBox from "@/components/ui/loading";
 
-export default function PrivatePage() {
+export default function UserIntegrationsPage() {
   const { supabase, user, isUserLoading } = useSupabase();
   const router = useRouter();
   const providers = useContext(CredentialsProvidersContext);
@@ -122,15 +122,15 @@ export default function PrivatePage() {
     [],
   );
 
+  useEffect(() => {
+    if (isUserLoading) return;
+    if (!user || !supabase) router.push("/login");
+  }, [isUserLoading, user, supabase, router]);
+
   if (isUserLoading) {
     return <LoadingBox className="h-[80vh]" />;
   }
 
-  if (!user || !supabase) {
-    router.push("/login");
-    return null;
-  }
-
   const allCredentials = providers
     ? Object.values(providers).flatMap((provider) =>
         provider.savedCredentials

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

@@ -17,7 +17,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import { sendEmailFormSchema, changePasswordFormSchema } from "@/types/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useState } from "react";

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

@@ -17,7 +17,7 @@ import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { Checkbox } from "@/components/ui/checkbox";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import LoadingBox from "@/components/ui/loading";
 import {
   AuthCard,

autogpt_platform/frontend/src/components/ProfileDropdown.tsx

@@ -1,5 +1,5 @@
 // components/RoleBasedAccess.tsx
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import React from "react";
 
 interface RoleBasedAccessProps {

autogpt_platform/frontend/src/components/RoleBasedAccess.tsx

@@ -9,7 +9,7 @@ import { Button } from "./Button";
 import { IconPersonFill } from "@/components/ui/icons";
 import { ProfileDetails } from "@/lib/autogpt-server-api/types";
 import { Separator } from "@/components/ui/separator";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 
 export const ProfileInfoForm = ({ profile }: { profile: ProfileDetails }) => {

autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx

@@ -1,13 +1,13 @@
 "use client";
-
-import { logout } from "@/app/(platform)/login/actions";
+import useSupabase from "@/lib/supabase/useSupabase";
 import { IconLogOut } from "@/components/ui/icons";
 
 export const ProfilePopoutMenuLogoutButton = () => {
+  const supabase = useSupabase();
   return (
     <div
       className="inline-flex w-full items-center justify-start gap-2.5"
-      onClick={() => logout()}
+      onClick={() => supabase.logOut()}
       role="button"
       tabIndex={0}
     >

autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenuLogoutButton.tsx

@@ -1,3 +1,5 @@
+import { createContext, useCallback, useEffect, useState } from "react";
+import useSupabase from "@/lib/supabase/useSupabase";
 import {
   APIKeyCredentials,
   CredentialsDeleteNeedConfirmationResponse,
@@ -8,7 +10,6 @@ import {
   UserPasswordCredentials,
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import { createContext, useCallback, useEffect, useState } from "react";
 
 // Get keys from CredentialsProviderName type
 const CREDENTIALS_PROVIDER_NAMES = Object.values(
@@ -102,6 +103,7 @@ export default function CredentialsProvider({
 }) {
   const [providers, setProviders] =
     useState<CredentialsProvidersContextType | null>(null);
+  const { isLoggedIn } = useSupabase();
   const api = useBackendAPI();
 
   const addCredentials = useCallback(
@@ -202,48 +204,50 @@ export default function CredentialsProvider({
   );
 
   useEffect(() => {
-    api.isAuthenticated().then((isAuthenticated) => {
-      if (!isAuthenticated) return;
+    if (!isLoggedIn) {
+      if (isLoggedIn == false) setProviders(null);
+      return;
+    }
 
-      api.listCredentials().then((response) => {
-        const credentialsByProvider = response.reduce(
-          (acc, cred) => {
-            if (!acc[cred.provider]) {
-              acc[cred.provider] = [];
-            }
-            acc[cred.provider].push(cred);
-            return acc;
-          },
-          {} as Record<CredentialsProviderName, CredentialsMetaResponse[]>,
-        );
+    api.listCredentials().then((response) => {
+      const credentialsByProvider = response.reduce(
+        (acc, cred) => {
+          if (!acc[cred.provider]) {
+            acc[cred.provider] = [];
+          }
+          acc[cred.provider].push(cred);
+          return acc;
+        },
+        {} as Record<CredentialsProviderName, CredentialsMetaResponse[]>,
+      );
 
-        setProviders((prev) => ({
-          ...prev,
-          ...Object.fromEntries(
-            CREDENTIALS_PROVIDER_NAMES.map((provider) => [
+      setProviders((prev) => ({
+        ...prev,
+        ...Object.fromEntries(
+          CREDENTIALS_PROVIDER_NAMES.map((provider) => [
+            provider,
+            {
               provider,
-              {
-                provider,
-                providerName: providerDisplayNames[provider],
-                savedCredentials: credentialsByProvider[provider] ?? [],
-                oAuthCallback: (code: string, state_token: string) =>
-                  oAuthCallback(provider, code, state_token),
-                createAPIKeyCredentials: (
-                  credentials: APIKeyCredentialsCreatable,
-                ) => createAPIKeyCredentials(provider, credentials),
-                createUserPasswordCredentials: (
-                  credentials: UserPasswordCredentialsCreatable,
-                ) => createUserPasswordCredentials(provider, credentials),
-                deleteCredentials: (id: string, force: boolean = false) =>
-                  deleteCredentials(provider, id, force),
-              } satisfies CredentialsProviderData,
-            ]),
-          ),
-        }));
-      });
+              providerName: providerDisplayNames[provider],
+              savedCredentials: credentialsByProvider[provider] ?? [],
+              oAuthCallback: (code: string, state_token: string) =>
+                oAuthCallback(provider, code, state_token),
+              createAPIKeyCredentials: (
+                credentials: APIKeyCredentialsCreatable,
+              ) => createAPIKeyCredentials(provider, credentials),
+              createUserPasswordCredentials: (
+                credentials: UserPasswordCredentialsCreatable,
+              ) => createUserPasswordCredentials(provider, credentials),
+              deleteCredentials: (id: string, force: boolean = false) =>
+                deleteCredentials(provider, id, force),
+            } satisfies CredentialsProviderData,
+          ]),
+        ),
+      }));
     });
   }, [
     api,
+    isLoggedIn,
     createAPIKeyCredentials,
     createUserPasswordCredentials,
     deleteCredentials,

autogpt_platform/frontend/src/components/integrations/credentials-provider.tsx

@@ -1,5 +1,5 @@
 "use client";
-import useSupabase from "@/hooks/useSupabase";
+import useSupabase from "@/lib/supabase/useSupabase";
 import { OnboardingStep, UserOnboarding } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import { usePathname, useRouter } from "next/navigation";