Include current page's search params when redirecting to login page

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts

@@ -56,9 +56,7 @@ export function useLoggedInUser(): {
     retry: false,
     queryFn: async () => {
       const searchParams = new URLSearchParams();
-      if (pathname) {
-        searchParams.set("pathname", pathname);
-      }
+
       if (connectedAddress) {
         searchParams.set("address", connectedAddress);
       }
@@ -76,10 +74,18 @@ export function useLoggedInUser(): {
   // legit use-case for now
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (query.data?.redirectTo) {
-      router.replace(query.data.redirectTo);
+    if (query.data?.isLoggedIn === false) {
+      // not using useSearchParams hook here to avoid adding Suspense boundaries everywhere this hook is being used
+      const currentHref = new URL(window.location.href);
+      const currentPathname = currentHref.pathname;
+      const currentSearchParams = currentHref.searchParams.toString();
+      router.replace(
+        buildLoginPath(
+          `${currentPathname}${currentSearchParams ? `?${currentSearchParams}` : ""}`,
+        ),
+      );
     }
-  }, [query.data?.redirectTo, router]);
+  }, [query.data?.isLoggedIn, router]);
 
   // if we are "disconnected" we are not logged in
   if (connectionStatus === "disconnected") {
@@ -135,3 +141,7 @@ export function useLoggedInUser(): {
       : null,
   };
 }
+
+function buildLoginPath(pathname: string | undefined): string {
+  return `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`;
+}

apps/dashboard/src/app/api/auth/ensure-login/route.ts

@@ -4,20 +4,13 @@ import { cookies } from "next/headers";
 import { type NextRequest, NextResponse } from "next/server";
 import { getAddress } from "thirdweb/utils";
 
-export type EnsureLoginPayload = {
-  pathname: string;
-  address?: string;
-};
-
 export type EnsureLoginResponse = {
   isLoggedIn: boolean;
   jwt?: string;
-  redirectTo?: string;
 };
 
 export const GET = async (req: NextRequest) => {
   const address = req.nextUrl.searchParams.get("address");
-  const pathname = req.nextUrl.searchParams.get("pathname");
 
   const cookieStore = cookies();
   // if we are "disconnected" we are not logged in, clear the cookie and redirect to login
@@ -34,7 +27,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(COOKIE_ACTIVE_ACCOUNT);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -49,7 +41,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(COOKIE_ACTIVE_ACCOUNT);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -65,7 +56,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(authCookieName);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -87,7 +77,3 @@ export const GET = async (req: NextRequest) => {
   // if everything is good simply return true
   return NextResponse.json({ isLoggedIn: true, jwt: token });
 };
-
-function buildLoginPath(pathname?: string | null): string {
-  return `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`;
-}

apps/dashboard/src/middleware.ts

@@ -32,11 +32,13 @@ export async function middleware(request: NextRequest) {
     // check if the user is logged in (has a valid auth cookie)
 
     if (!authCookie) {
+      const searchParamsString = request.nextUrl.searchParams.toString();
+
       // if not logged in, rewrite to login page
       return redirect(
         request,
         "/login",
-        `next=${encodeURIComponent(pathname)}`,
+        `next=${encodeURIComponent(`${pathname}${searchParamsString ? `?${searchParamsString}` : ""}`)}`,
         false,
       );
     }