feat: add session-sync endpoint

Author: chanceaclark

.changeset/lazy-plants-listen.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Adds a session sync endpoint to help sync customer sessions between hosts. The primary use-case is syncing the session between redirected checkout and Catalyst.

core/.eslintrc.cjs

@@ -1,8 +1,5 @@
 // @ts-check
 
-// eslint-disable-next-line import/no-extraneous-dependencies
-require('@bigcommerce/eslint-config/patch');
-
 /** @type {import('eslint').Linter.Config} */
 const config = {
   root: true,

core/app/[locale]/(default)/(auth)/login/page.tsx

@@ -41,6 +41,9 @@ export default async function Login() {
           <ButtonLink href="/register" variant="secondary">
             {t('CreateAccount.createLink')}
           </ButtonLink>
+          <ButtonLink className="ms-4" href="https://session-sync-example.vercel.app/">
+            Go to checkout
+          </ButtonLink>
         </div>
       </SignInSection>
     </>

core/app/[locale]/layout.tsx

@@ -11,14 +11,13 @@ import { PropsWithChildren } from 'react';
 import '../globals.css';
 
 import { fonts } from '~/app/fonts';
+import { CookieNotifications } from '~/app/notifications';
+import { Providers } from '~/app/providers';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { routing } from '~/i18n/routing';
-
-import { getToastNotification } from '../../lib/server-toast';
-import { CookieNotifications } from '../notifications';
-import { Providers } from '../providers';
+import { getToastNotification } from '~/lib/server-toast';
 
 const RootLayoutMetadataQuery = graphql(`
   query RootLayoutMetadataQuery {

core/app/api/session-sync/[jwt]/route.ts

@@ -0,0 +1,117 @@
+import { revalidatePath } from 'next/cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+import { signIn, signOut } from '~/auth';
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { clearCartId, setCartId } from '~/lib/cart';
+
+const VerifySessionSyncJwtMutation = graphql(`
+  mutation VerifySessionSyncJwt($jwt: String!) {
+    validateSessionSyncJwt(jwt: $jwt) {
+      content {
+        redirectTo
+        customer {
+          entityId
+          firstName
+          lastName
+          email
+        }
+        customerAccessToken {
+          value
+          expiresAt
+        }
+        cart {
+          entityId
+        }
+      }
+      errors {
+        __typename
+        ... on InvalidSessionSyncJwtError {
+          errorType
+          message
+        }
+        ... on JwtTokenExpiredError {
+          message
+        }
+      }
+    }
+  }
+`);
+
+export const GET = async (
+  request: NextRequest,
+  { params }: { params: Promise<{ jwt: string }> },
+) => {
+  const { jwt } = await params;
+  const query = request.nextUrl.searchParams;
+
+  const { data, errors } = await client.fetch({
+    document: VerifySessionSyncJwtMutation,
+    variables: { jwt },
+    fetchOptions: { cache: 'no-store' },
+  });
+
+  // Handle any API Errors
+  if (errors?.length) {
+    return new NextResponse('', { status: 500, statusText: 'Server error' });
+  }
+
+  const { content, errors: validationErrors } = data.validateSessionSyncJwt;
+
+  // Handle any validation errors or if the content is null
+  if (validationErrors.length || content === null) {
+    const error = validationErrors.at(0);
+
+    switch (error?.__typename) {
+      case 'InvalidSessionSyncJwtError':
+        return new NextResponse(null, { status: 400, statusText: 'Bad request' });
+
+      case 'JwtTokenExpiredError':
+        return NextResponse.redirect(request.referrer);
+
+      default:
+        return new NextResponse(null, { status: 500, statusText: 'Server error' });
+    }
+  }
+
+  // Update the cart id if it exists regardless of if the customer is logged in or not
+  if (content.cart?.entityId) {
+    await setCartId(content.cart.entityId);
+  } else {
+    await clearCartId();
+  }
+
+  // Soon there will always be a session, whether guest or logged in.
+  // We will need to remove this check once that work is complete. We can just
+  // update the session in that case.
+  if (content.customer && content.customerAccessToken) {
+    await signIn('session-sync', {
+      name: `${content.customer.firstName} ${content.customer.lastName}`,
+      email: content.customer.email,
+      customerAccessToken: content.customerAccessToken.value,
+      redirect: false,
+    });
+  } else {
+    await signOut({ redirect: false });
+  }
+
+  // We want to revalidate all the data as we are either logged in or out.
+  revalidatePath('/', 'layout');
+
+  if (query.get('redirect') === 'false') {
+    return new NextResponse(null, {
+      status: 204,
+      headers: {
+        'Access-Control-Allow-Origin': 'https://session-sync-example.vercel.app',
+        'Access-Control-Allow-Credentials': 'true',
+      },
+    });
+  }
+
+  // Note: redirectTo is going to include the full url, not a partial path
+  return NextResponse.redirect(content.redirectTo);
+};
+
+export const runtime = 'edge';
+export const dynamic = 'force-dynamic';

core/app/providers.tsx

@@ -4,11 +4,13 @@ import { PropsWithChildren } from 'react';
 
 import { Toaster } from '@/vibes/soul/primitives/toaster';
 import { CartProvider } from '~/components/header/cart-provider';
+import { SessionSyncProvider } from '~/components/session-sync/provider';
 
 export function Providers({ children }: PropsWithChildren) {
   return (
     <>
       <Toaster position="top-right" />
+      <SessionSyncProvider />
       <CartProvider>{children}</CartProvider>
     </>
   );

core/auth/index.ts

@@ -77,6 +77,12 @@ const SessionUpdate = z.object({
   }),
 });
 
+const SessionSyncCredentials = z.object({
+  name: z.string(),
+  email: z.string().email(),
+  customerAccessToken: z.string(),
+});
+
 async function handleLoginCart(guestCartId?: string, loginResultCartId?: string) {
   const t = await getTranslations('Cart');
 
@@ -168,6 +174,10 @@ function loginWithAnonymous(credentials: unknown): User | null {
   };
 }
 
+function loginWithSessionSync(credentials: unknown): User {
+  return SessionSyncCredentials.parse(credentials);
+}
+
 const config = {
   // Explicitly setting this value to be undefined. We want the library to handle CSRF checks when taking sensitive actions.
   // When handling sensitive actions like sign in, sign out, etc., the library will automatically check for CSRF tokens.
@@ -181,6 +191,19 @@ const config = {
   },
   pages: {
     signIn: '/login',
+    signOut: '/logout',
+  },
+  cookies: {
+    callbackUrl: {
+      options: {
+        sameSite: 'none',
+      },
+    },
+    sessionToken: {
+      options: {
+        sameSite: 'none',
+      },
+    },
   },
   callbacks: {
     jwt: ({ token, user, session, trigger }) => {
@@ -276,6 +299,13 @@ const config = {
       },
       authorize: loginWithJwt,
     }),
+    CredentialsProvider({
+      id: 'session-sync',
+      credentials: {
+        jwt: { label: 'JWT', type: 'text' },
+      },
+      authorize: loginWithSessionSync,
+    }),
   ],
 } satisfies NextAuthConfig;
 

core/components/session-sync/provider.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useCallback, useEffect } from 'react';
+
+export const SessionSyncProvider = () => {
+  const handleBrowserBackButtonEvent = useCallback((event: PageTransitionEvent) => {
+    if (event.persisted) {
+      window.location.reload();
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('pageshow', handleBrowserBackButtonEvent);
+
+    return () => {
+      window.removeEventListener('pageshow', handleBrowserBackButtonEvent);
+    };
+  }, [handleBrowserBackButtonEvent]);
+
+  return null;
+};

core/middlewares/with-auth.ts

@@ -8,8 +8,6 @@ export const withAuth: MiddlewareFactory = (next) => {
     const authWithCallback = auth(async (req) => {
       if (!req.auth) {
         await signIn('anonymous', { redirect: false });
-
-        return next(req, event);
       }
 
       // Continue the middleware chain

core/package.json

@@ -94,7 +94,7 @@
     "dotenv": "^16.4.7",
     "dotenv-cli": "^8.0.0",
     "eslint": "^8.57.1",
-    "eslint-config-next": "15.2.3",
+    "eslint-config-next": "15.2.4",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",

packages/eslint-config-catalyst/base.js

@@ -1,3 +1,5 @@
+require("@bigcommerce/eslint-config/patch");
+
 /** @type {import("eslint").Linter.Config} */
 const config = {
   extends: ['@bigcommerce/eslint-config/configs/base', 'prettier'],

packages/eslint-config-catalyst/package.json

@@ -10,10 +10,10 @@
   ],
   "dependencies": {
     "@bigcommerce/eslint-config": "^2.11.0",
-    "@next/eslint-plugin-next": "^15.2.3",
+    "@next/eslint-plugin-next": "^15.2.4",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-check-file": "^2.8.0",
-    "eslint-plugin-prettier": "^5.2.4"
+    "eslint-plugin-prettier": "^5.2.5"
   },
   "peerDependencies": {
     "eslint": "^8.0.0",