fix(core): TRAC-293 pass customer token through routes and webpages (#3013)

Customer-only webpages were inaccessible and missing from navigation
when logged in. The with-routes proxy and the normal/contact webpage
page-data queries resolved routes anonymously, so the Storefront API
hid customer-restricted content from authenticated users.

- Wrap the with-routes proxy handler in auth() and thread the customer
  access token into getRoute and getRawWebPageContent
- Bypass the KV route cache when a customer access token is present;
  the cache key isn't namespaced by customer identity, so reading or
  writing it for authenticated requests could leak customer-specific
  route resolutions across users
- Pass the customer access token into normal and contact webpage
  page-data queries, switching to a no-store fetch when authenticated so
  cached anonymous responses are not served to logged-in customers
- Leave getStoreStatus unchanged (does not depend on customer identity)

Refs TRAC-293

Co-authored-by: Claude <noreply@anthropic.com>

Author: 2 people

.changeset/fix-customer-restricted-routes.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Pass the customer access token through route resolution and the normal/contact webpage queries so customer-restricted web pages are accessible (and appear in navigation) for authenticated customers. The `with-routes` proxy is now wrapped in `auth()`, and webpage `page-data` queries switch to an uncached fetch when a customer token is present.

core/app/[locale]/(default)/webpages/[id]/contact/page-data.ts

@@ -31,11 +31,12 @@ const ContactPageQuery = graphql(
 
 type Variables = VariablesOf<typeof ContactPageQuery>;
 
-export const getWebpageData = cache(async (variables: Variables) => {
+export const getWebpageData = cache(async (variables: Variables, customerAccessToken?: string) => {
   const { data } = await client.fetch({
     document: ContactPageQuery,
     variables,
-    fetchOptions: { next: { revalidate } },
+    customerAccessToken,
+    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
   });
 
   return data;

core/app/[locale]/(default)/webpages/[id]/contact/page.tsx

@@ -8,6 +8,7 @@ import type { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
 import { Streamable } from '@/vibes/soul/lib/streamable';
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
 import { Breadcrumb } from '@/vibes/soul/sections/breadcrumbs';
+import { getSessionCustomerAccessToken } from '~/auth';
 import {
   breadcrumbsTransformer,
   truncateBreadcrumbs,
@@ -41,8 +42,8 @@ const fieldMapping = {
 
 type ContactField = keyof typeof fieldMapping;
 
-const getWebPage = cache(async (id: string): Promise<ContactPage> => {
-  const data = await getWebpageData({ id: decodeURIComponent(id) });
+const getWebPage = cache(async (id: string, customerAccessToken?: string): Promise<ContactPage> => {
+  const data = await getWebpageData({ id: decodeURIComponent(id) }, customerAccessToken);
   const webpage = data.node?.__typename === 'ContactPage' ? data.node : null;
 
   if (!webpage) {
@@ -62,10 +63,13 @@ const getWebPage = cache(async (id: string): Promise<ContactPage> => {
   };
 });
 
-async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
+async function getWebPageBreadcrumbs(
+  id: string,
+  customerAccessToken?: string,
+): Promise<Breadcrumb[]> {
   const t = await getTranslations('WebPages.ContactUs');
 
-  const webpage = await getWebPage(id);
+  const webpage = await getWebPage(id, customerAccessToken);
   const [, ...rest] = webpage.breadcrumbs.reverse();
   const breadcrumbs = [
     {
@@ -82,18 +86,22 @@ async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
   return truncateBreadcrumbs(breadcrumbs, 5);
 }
 
-async function getWebPageWithSuccessContent(id: string, message: string) {
-  const webpage = await getWebPage(id);
+async function getWebPageWithSuccessContent(
+  id: string,
+  message: string,
+  customerAccessToken?: string,
+) {
+  const webpage = await getWebPage(id, customerAccessToken);
 
   return {
     ...webpage,
     content: message,
   };
 }
 
-async function getContactFields(id: string) {
+async function getContactFields(id: string, customerAccessToken?: string) {
   const t = await getTranslations('WebPages.ContactUs.Form');
-  const { entityId, path, contactFields } = await getWebPage(id);
+  const { entityId, path, contactFields } = await getWebPage(id, customerAccessToken);
   const toGroupsOfTwo = (fields: Field[]) =>
     fields.reduce<Array<FieldGroup<Field>>>((acc, _, i) => {
       if (i % 2 === 0) {
@@ -156,7 +164,8 @@ async function getContactFields(id: string) {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { id, locale } = await params;
-  const webpage = await getWebPage(id);
+  const customerAccessToken = await getSessionCustomerAccessToken();
+  const webpage = await getWebPage(id, customerAccessToken);
   const { pageTitle, metaDescription, metaKeywords } = webpage.seo;
 
   return {
@@ -172,6 +181,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function ContactPage({ params, searchParams }: Props) {
   const { id, locale } = await params;
   const { success } = await searchParams;
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   setRequestLocale(locale);
 
@@ -180,8 +190,10 @@ export default async function ContactPage({ params, searchParams }: Props) {
   if (success === 'true') {
     return (
       <WebPageContent
-        breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
-        webPage={Streamable.from(() => getWebPageWithSuccessContent(id, t('success')))}
+        breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id, customerAccessToken))}
+        webPage={Streamable.from(() =>
+          getWebPageWithSuccessContent(id, t('success'), customerAccessToken),
+        )}
       >
         <ButtonLink
           className="mt-8 @2xl:mt-12 @4xl:mt-16"
@@ -200,13 +212,13 @@ export default async function ContactPage({ params, searchParams }: Props) {
 
   return (
     <WebPageContent
-      breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
-      webPage={Streamable.from(() => getWebPage(id))}
+      breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id, customerAccessToken))}
+      webPage={Streamable.from(() => getWebPage(id, customerAccessToken))}
     >
       <div className="mt-8 @2xl:mt-12 @4xl:mt-16">
         <DynamicForm
           action={submitContactForm}
-          fields={await getContactFields(id)}
+          fields={await getContactFields(id, customerAccessToken)}
           recaptchaSiteKey={recaptchaSiteKey}
           submitLabel={t('cta')}
         />

core/app/[locale]/(default)/webpages/[id]/normal/page-data.ts

@@ -29,11 +29,12 @@ const NormalPageQuery = graphql(
 
 type Variables = VariablesOf<typeof NormalPageQuery>;
 
-export const getWebpageData = cache(async (variables: Variables) => {
+export const getWebpageData = cache(async (variables: Variables, customerAccessToken?: string) => {
   const { data } = await client.fetch({
     document: NormalPageQuery,
     variables,
-    fetchOptions: { next: { revalidate } },
+    customerAccessToken,
+    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
   });
 
   return data;

core/app/[locale]/(default)/webpages/[id]/normal/page.tsx

@@ -5,6 +5,7 @@ import { cache } from 'react';
 
 import { Streamable } from '@/vibes/soul/lib/streamable';
 import { Breadcrumb } from '@/vibes/soul/sections/breadcrumbs';
+import { getSessionCustomerAccessToken } from '~/auth';
 import {
   breadcrumbsTransformer,
   truncateBreadcrumbs,
@@ -19,8 +20,8 @@ interface Props {
   params: Promise<{ locale: string; id: string }>;
 }
 
-const getWebPage = cache(async (id: string): Promise<WebPageData> => {
-  const data = await getWebpageData({ id: decodeURIComponent(id) });
+const getWebPage = cache(async (id: string, customerAccessToken?: string): Promise<WebPageData> => {
+  const data = await getWebpageData({ id: decodeURIComponent(id) }, customerAccessToken);
   const webpage = data.node?.__typename === 'NormalPage' ? data.node : null;
 
   if (!webpage) {
@@ -37,10 +38,13 @@ const getWebPage = cache(async (id: string): Promise<WebPageData> => {
   };
 });
 
-async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
+async function getWebPageBreadcrumbs(
+  id: string,
+  customerAccessToken?: string,
+): Promise<Breadcrumb[]> {
   const t = await getTranslations('WebPages.Normal');
 
-  const webpage = await getWebPage(id);
+  const webpage = await getWebPage(id, customerAccessToken);
   const [, ...rest] = webpage.breadcrumbs.reverse();
   const breadcrumbs = [
     {
@@ -59,7 +63,8 @@ async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { id, locale } = await params;
-  const webpage = await getWebPage(id);
+  const customerAccessToken = await getSessionCustomerAccessToken();
+  const webpage = await getWebPage(id, customerAccessToken);
   const { pageTitle, metaDescription, metaKeywords } = webpage.seo;
 
   // Get the path from the last breadcrumb
@@ -75,13 +80,14 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function WebPage({ params }: Props) {
   const { locale, id } = await params;
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   setRequestLocale(locale);
 
   return (
     <WebPageContent
-      breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
-      webPage={Streamable.from(() => getWebPage(id))}
+      breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id, customerAccessToken))}
+      webPage={Streamable.from(() => getWebPage(id, customerAccessToken))}
     />
   );
 }