[Dashboard] Remove useLoggedInUser and fix login loop (#5695)

Fixes: DASH-577

Author: MananTank

apps/dashboard/src/@/actions/validLogin.ts

@@ -0,0 +1,48 @@
+"use server";
+
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { cookies } from "next/headers";
+import { getAddress } from "thirdweb";
+import { COOKIE_PREFIX_TOKEN } from "../constants/cookie";
+import { API_SERVER_URL } from "../constants/env";
+
+/**
+ * Check that the connected wallet is valid for the current active account
+ */
+export async function isWalletValidForActiveAccount(params: {
+  address: string;
+  account: Account;
+  authToken: string;
+}) {
+  const cookieStore = await cookies();
+  const authCookieNameForAddress =
+    COOKIE_PREFIX_TOKEN + getAddress(params.address);
+
+  // authToken for this wallet address should be present
+  const authTokenForAddress = cookieStore.get(authCookieNameForAddress)?.value;
+  if (!authTokenForAddress) {
+    return false;
+  }
+
+  // this authToken should be same as current active authToken
+  if (authTokenForAddress !== params.authToken) {
+    return false;
+  }
+
+  // authToken should be valid
+  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${authTokenForAddress}`,
+    },
+  });
+
+  if (accountRes.status !== 200) {
+    return false;
+  }
+
+  const account = (await accountRes.json()).data as Account;
+
+  // the current account should match the account fetched for the authToken
+  return account.id === params.account.id;
+}

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
-import { cn } from "@/lib/utils";
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
@@ -18,6 +16,7 @@ import type { Chain } from "thirdweb";
 import {
   ConnectButton,
   type NetworkSelectorProps,
+  useActiveAccount,
   useConnectModal,
 } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button";
@@ -29,16 +28,15 @@ import {
   addRecentlyUsedChainId,
   recentlyUsedChainIdsStore,
 } from "../../../../stores/chainStores";
-import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
 
 export const CustomConnectWallet = (props: {
   loginRequired?: boolean;
   connectButtonClassName?: string;
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
-  loadingButtonClassName?: string;
   chain?: Chain;
+  isLoggedIn: boolean;
 }) => {
   const thirdwebClient = useThirdwebClient();
   const loginRequired =
@@ -120,25 +118,11 @@ export const CustomConnectWallet = (props: {
   ]);
 
   // ensures login status on pages that need it
-  const { isPending, isLoggedIn } = useLoggedInUser();
+  const { isLoggedIn } = props;
   const pathname = usePathname();
+  const account = useActiveAccount();
 
-  if (isPending) {
-    return (
-      <>
-        <div
-          className={cn(
-            "flex h-[48px] w-[144px] items-center justify-center rounded-lg border border-border bg-muted",
-            props.loadingButtonClassName,
-          )}
-        >
-          <Spinner className="size-4" />
-        </div>
-      </>
-    );
-  }
-
-  if (!isLoggedIn && loginRequired) {
+  if ((!isLoggedIn || !account) && loginRequired) {
     return (
       <>
         <Button