[Dashboard] Login flow improvements

Author: MananTank

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

@@ -150,7 +150,7 @@ export const CustomConnectWallet = (props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign In
+            Connect Wallet
           </Link>
         </Button>
       </>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -146,7 +146,7 @@ export function FaucetButton({
         <Link
           href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
         >
-          Sign In
+          Connect Wallet
         </Link>
       </Button>
     );

apps/dashboard/src/app/login/LoginPage.tsx

@@ -123,11 +123,7 @@ function PageContent(props: {
     | {
         id: "complete";
       }
-  >(
-    props.account
-      ? { id: "onboarding", account: props.account }
-      : { id: "login" },
-  );
+  >({ id: "login" });
 
   const router = useDashboardRouter();
   const connectionStatus = useActiveWalletConnectionStatus();

apps/dashboard/src/app/login/page.tsx

@@ -1,7 +1,5 @@
-import { redirect } from "next/navigation";
 import { getRawAccount } from "../account/settings/getAccount";
 import { LoginAndOnboardingPage } from "./LoginPage";
-import { isOnboardingComplete } from "./onboarding/isOnboardingRequired";
 
 export default async function Page(props: {
   searchParams: Promise<{
@@ -11,13 +9,11 @@ export default async function Page(props: {
   const nextPath = (await props.searchParams).next;
   const account = await getRawAccount();
 
-  if (account && isOnboardingComplete(account)) {
-    if (nextPath) {
-      redirect(nextPath);
-    } else {
-      redirect("/team");
-    }
-  }
+  // don't redirect away from login page if authToken is already present and onboarding is done
+  // so that if user is stuck in a state where cookie is set, account is onboarded but the wallet is connected, they can connect wallet, sign in and continue
+
+  // if the user is already logged in, wallet is connected and onboarding is complete
+  // user will be redirected to the next path on the client side without having to do anything
 
   return <LoginAndOnboardingPage account={account} nextPath={nextPath} />;
 }

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -2,14 +2,19 @@ import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
+import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 
 export default async function TeamLayout(props: {
   children: React.ReactNode;
   params: Promise<{ team_slug: string }>;
 }) {
   const params = await props.params;
-  const teams = await getTeams();
+
+  const [account, teams] = await Promise.all([
+    getValidAccount(`/team/${params.team_slug}`),
+    getTeams(),
+  ]);
 
   if (!teams) {
     redirect("/login");
@@ -37,6 +42,7 @@ export default async function TeamLayout(props: {
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
           currentProject={undefined}
+          account={account}
         />
 
         <TabPathLinks

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -2,6 +2,7 @@ import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
+import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 
 export default async function TeamLayout(props: {
@@ -10,7 +11,10 @@ export default async function TeamLayout(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
   const params = await props.params;
-  const teams = await getTeams();
+  const [teams, account] = await Promise.all([
+    getTeams(),
+    getValidAccount(`/team/${params.team_slug}/${params.project_slug}`),
+  ]);
 
   if (!teams) {
     redirect("/login");
@@ -49,6 +53,7 @@ export default async function TeamLayout(props: {
           currentProject={project}
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
+          account={account}
         />
         <TabPathLinks
           tabContainerClassName="px-4 lg:px-6"

apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx

@@ -35,7 +35,7 @@ export function TeamHeaderLoggedOutDesktopUI(props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign in
+            Connect Wallet
           </Link>
         </Button>
       </div>
@@ -64,7 +64,7 @@ export function TeamHeaderLoggedOutMobileUI(props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign in
+            Connect Wallet
           </Link>
         </Button>
         <MobileBurgerMenuButton type="loggedOut" />

apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -5,7 +5,7 @@ import type { Team } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateAPIKeyDialog } from "../../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
@@ -20,10 +20,10 @@ export function TeamHeaderLoggedIn(props: {
   currentTeam: Team;
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   currentProject: Project | undefined;
+  account: Pick<Account, "email" | "id">;
 }) {
   const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] =
     useState(false);
-  const myAccountQuery = useAccount();
   const activeWallet = useActiveWallet();
   const { disconnect } = useDisconnect();
   const router = useDashboardRouter();
@@ -45,7 +45,7 @@ export function TeamHeaderLoggedIn(props: {
     currentProject: props.currentProject,
     currentTeam: props.currentTeam,
     teamsAndProjects: props.teamsAndProjects,
-    account: myAccountQuery.data,
+    account: props.account,
     logout: logout,
     connectButton: <CustomConnectWallet />,
     createProject: () => setIsCreateProjectDialogOpen(true),

apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx

@@ -1,13 +1,15 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
+import { getRawAccount } from "../../../account/settings/getAccount";
 import { getAuthToken } from "../../../api/lib/getAuthToken";
 import { TeamHeaderLoggedOut } from "./TeamHeaderLoggedOut";
 import { TeamHeaderLoggedIn } from "./team-header-logged-in.client";
 
 export async function TeamHeader() {
-  const authToken = await getAuthToken();
+  await getAuthToken();
+  const account = await getRawAccount();
 
-  if (!authToken) {
+  if (!account) {
     return <TeamHeaderLoggedOut />;
   }
 
@@ -34,6 +36,7 @@ export async function TeamHeader() {
       currentTeam={firstTeam}
       teamsAndProjects={teamsAndProjects}
       currentProject={undefined}
+      account={account}
     />
   );
 }

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -108,7 +108,7 @@ export const MismatchButton = forwardRef<
         <Link
           href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
         >
-          Sign In
+          Connect Wallet
         </Link>
       </Button>
     );