Fix: Ensure exchangeToken is appended correctly to redirect URL

Co-authored-by: facundo.yuffrida <facundo.yuffrida@commerce.com>

Author: cursoragent

src/app/api/app/load/route.ts

@@ -30,12 +30,6 @@ const jwtSchema = z.object({
 });
 
 export async function GET(request: NextRequest) {
-  function appendExchangeToken(url: string, token: string): string {
-    const delimiter = new URL(url, env.APP_ORIGIN).search ? '&' : '?';
-
-    return `${url}${delimiter}exchangeToken=${token}`;
-  }
-
   const parsedParams = queryParamSchema.safeParse(
     Object.fromEntries(request.nextUrl.searchParams)
   );
@@ -65,7 +59,14 @@ export async function GET(request: NextRequest) {
 
   const exchangeToken = await db.saveClientToken(clientToken);
 
-  return NextResponse.redirect(new URL(appendExchangeToken(path, exchangeToken), env.APP_ORIGIN), {
+  // IMPORTANT: product names can contain '#' and BigCommerce may include them in the `url`.
+  // If we append query params by string concatenation, we can accidentally place `exchangeToken`
+  // after the '#' fragment, which browsers do not send to the server. Always mutate `searchParams`
+  // on a URL object so the token is guaranteed to be in the query string.
+  const redirectUrl = new URL(path, env.APP_ORIGIN);
+  redirectUrl.searchParams.set('exchangeToken', exchangeToken);
+
+  return NextResponse.redirect(redirectUrl, {
     status: 302,
     statusText: 'Found',
   });

src/app/productDescription/[productId]/page.tsx

@@ -6,13 +6,20 @@ import { headers } from 'next/headers';
 
 interface PageProps {
   params: { productId: string };
-  searchParams: { product_name: string; exchangeToken: string };
+  searchParams: { product_name?: string; exchangeToken?: string };
 }
 
 export default async function Page(props: PageProps) {
   const { productId } = props.params;
   const { product_name: name, exchangeToken } = props.searchParams;
 
+  if (!exchangeToken) {
+    // This typically happens when a product name contains an unencoded '#', which turns the rest of
+    // the URL into a fragment (not sent to the server). The /api/app/load redirect now ensures the
+    // exchangeToken is always appended before any fragment, but keep this guard to avoid a hard crash.
+    throw new Error('Missing exchange token. Try to re-open the app.');
+  }
+
   const authToken = await db.getClientTokenMaybeAndDelete(exchangeToken) || 'missing';
 
   const authorized = authorize(authToken);