Update GQL client and auth middleware to handle invalid tokens and invalidate session #2259

jordanarldt · 2025-04-22T21:17:49Z

What/Why?

Update withAuth middleware to redirect protected routes to /login page when user is unauthorized
Add customer access token validation on protected routes
Minor updates to end-user error messages on unauthorized GQL requests to stop returning raw GQL error and use our translated error message instead.
Add onError event to GraphQL client
Use the onError callback to invalidate user session when GQL returns an invalid or missing token error

Testing

Screen.Recording.2025-05-02.at.5.54.09.PM.mov

Migration

Copy all changes from the /core/client directory and the /packages/client directory
Copy logic from withAuth middleware to handle the ?invalidate-session query param
Copy translation values
Copy all changes from the /core/app/[locale]/(default)/account/ directory server actions
Copy all changes from the /core/app/[locale]/(default)/checkout/route.ts file

changeset-bot · 2025-04-22T21:17:53Z

🦋 Changeset detected

Latest commit: 8e7a907

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@bigcommerce/catalyst-client	Patch
@bigcommerce/catalyst-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-04-22T21:17:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-canary	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2025 3:14pm

4 Skipped Deployments

Name	Status	Preview	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)		May 7, 2025 3:14pm
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview	May 7, 2025 3:14pm
catalyst-soul	⬜️ Ignored (Inspect)	Visit Preview	May 7, 2025 3:14pm
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview	May 7, 2025 3:14pm

jordanarldt · 2025-04-22T21:52:32Z

core/middlewares/with-auth.ts

 export const withAuth: MiddlewareFactory = (next) => {
  return async (request, event) => {
    // @ts-expect-error: The `auth` function doesn't have the correct type to support it as a MiddlewareFactory.
    const authWithCallback = auth(async (req) => {
+      const isProtectedRoute = protectedPathRegExp.test(req.nextUrl.pathname);
+      const isGetRequest = req.method === 'GET';


We only redirect on GET requests to avoid breaking any server actions.

core/middlewares/with-auth.ts

core/app/[locale]/(default)/account/addresses/_actions/create-address.ts

core/middlewares/with-auth.ts

jordanarldt · 2025-05-05T20:19:41Z

core/client/index.ts

+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { redirect } from 'next/navigation';


Using next/navigation here for a few reasons:

For some reason importing ~/i18n/routing breaks this file and the build starts failing. (Module not found error)

We don't need locale info for the session invalidation redirect, as it's just redirecting to the same route with the ?invalidate-session query param.

core/app/[locale]/(default)/account/orders/page-data.ts

jorgemoya · 2025-05-06T00:02:23Z

packages/client/src/client.ts

@@ -74,6 +85,7 @@ class Client<FetcherRequestInit extends RequestInit = RequestInit> {
    fetchOptions?: FetcherRequestInit;
    channelId?: string;
    errorPolicy?: 'none' | 'all' | 'ignore';
+    validateCustomerAccessToken?: boolean;


Is there a reason why this is optional?

@jorgemoya Yep, it's optional so that we don't have to update every single client.fetch in Catalyst to get this behavior. It's optional, but defaults to true, so if we want to override the behavior somewhere, we can.

Yeah I guess my question was more in the sense of why would we want to override it but having the optional override shouldn't hurt.

jorgemoya · 2025-05-06T00:06:42Z

packages/client/src/client.ts

+  onError?: (
+    error: BigCommerceGQLError,
+    queryType: 'query' | 'mutation' | 'subscription',
+  ) => Promise<void> | void;


Is this an existing pattern or something we built for this use case?

It's built for this use-case. As @chanceaclark was saying, we need the auth failure handling to be part of the DAL, which will require having this onError handler built into the client. 👍

core/app/[locale]/(default)/account/wishlists/_actions/change-wishlist-visibility.ts

…validate session

github-actions · 2025-05-07T15:25:52Z

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-canary-et08lsoyd-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category	Score
🟢 Performance	98
🟢 Accessibility	92
🟠 Best practices	78
🟢 SEO	91

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category	Score
🟠 Performance	88
🟢 Accessibility	92
🟠 Best practices	78
🟢 SEO	92

jordanarldt marked this pull request as ready for review April 22, 2025 21:19

jordanarldt requested a review from a team as a code owner April 22, 2025 21:19

jordanarldt commented Apr 22, 2025

View reviewed changes

chanceaclark reviewed Apr 23, 2025

View reviewed changes

core/middlewares/with-auth.ts Outdated Show resolved Hide resolved

core/app/[locale]/(default)/account/addresses/_actions/create-address.ts Outdated Show resolved Hide resolved

core/middlewares/with-auth.ts Outdated Show resolved Hide resolved

jordanarldt changed the title ~~CATALYST-1115: Add token check and /login redirect in auth middleware~~ Add token check and /login redirect in auth middleware Apr 23, 2025

jordanarldt force-pushed the CATALYST-1115 branch from 46ea5c9 to 22d577c Compare April 24, 2025 14:53

vercel bot deployed to Preview – catalyst-canary April 24, 2025 14:56 View deployment

jordanarldt force-pushed the CATALYST-1115 branch from 22d577c to 1225853 Compare April 30, 2025 18:36

vercel bot deployed to Preview – catalyst-canary April 30, 2025 18:38 View deployment

jordanarldt force-pushed the CATALYST-1115 branch from 1225853 to 502f5db Compare May 2, 2025 22:50

jordanarldt changed the title ~~Add token check and /login redirect in auth middleware~~ Update GQL client and auth middleware to handle invalid tokens and invalidate session May 2, 2025

vercel bot deployed to Preview – catalyst-canary May 2, 2025 22:52 View deployment

jordanarldt force-pushed the CATALYST-1115 branch from 502f5db to 2f1d218 Compare May 5, 2025 20:13

vercel bot deployed to Preview – catalyst-canary May 5, 2025 20:14 View deployment

jordanarldt commented May 5, 2025

View reviewed changes

jordanarldt force-pushed the CATALYST-1115 branch from 2f1d218 to 7e09886 Compare May 5, 2025 23:02

vercel bot deployed to Preview – catalyst-canary May 5, 2025 23:03 View deployment

jordanarldt force-pushed the CATALYST-1115 branch from 7e09886 to c1566ca Compare May 5, 2025 23:05

vercel bot deployed to Preview – catalyst-canary May 5, 2025 23:06 View deployment

jordanarldt force-pushed the CATALYST-1115 branch from c1566ca to e1b371b Compare May 5, 2025 23:07

vercel bot deployed to Preview – catalyst-canary May 5, 2025 23:09 View deployment

jorgemoya reviewed May 6, 2025

View reviewed changes

jordanarldt force-pushed the CATALYST-1115 branch from e1b371b to 34f0448 Compare May 6, 2025 17:50

vercel bot deployed to Preview – catalyst-canary May 6, 2025 17:51 View deployment

jordanarldt force-pushed the CATALYST-1115 branch 2 times, most recently from f5c42c1 to 648cfac Compare May 6, 2025 17:55

vercel bot deployed to Preview – catalyst-canary May 6, 2025 17:56 View deployment

jorgemoya approved these changes May 6, 2025

View reviewed changes

Update GQL client and auth middleware to handle invalid tokens and in…

36f47a8

…validate session

jordanarldt force-pushed the CATALYST-1115 branch from 648cfac to 36f47a8 Compare May 7, 2025 14:52

vercel bot deployed to Preview – catalyst-canary May 7, 2025 14:54 View deployment

vercel bot deployed to Preview – catalyst-canary May 7, 2025 15:01 View deployment

jordanarldt force-pushed the CATALYST-1115 branch 2 times, most recently from 90cd2da to 0152752 Compare May 7, 2025 15:05

vercel bot deployed to Preview – catalyst-canary May 7, 2025 15:07 View deployment

Add changeset

8e7a907

jordanarldt force-pushed the CATALYST-1115 branch from 0152752 to 8e7a907 Compare May 7, 2025 15:13

vercel bot deployed to Preview – catalyst-canary May 7, 2025 15:14 View deployment

jordanarldt added this pull request to the merge queue May 7, 2025

Merged via the queue into canary with commit 67715bf May 7, 2025
9 checks passed

jordanarldt deleted the CATALYST-1115 branch May 7, 2025 15:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update GQL client and auth middleware to handle invalid tokens and invalidate session #2259

Update GQL client and auth middleware to handle invalid tokens and invalidate session #2259

Uh oh!

jordanarldt commented Apr 22, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 22, 2025 •

edited

Loading

Uh oh!

vercel bot commented Apr 22, 2025 •

edited

Loading

Uh oh!

jordanarldt Apr 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jordanarldt May 5, 2025 •

edited

Loading

Uh oh!

Uh oh!

jorgemoya May 6, 2025

Uh oh!

jordanarldt May 6, 2025

Uh oh!

jorgemoya May 6, 2025

Uh oh!

jorgemoya May 6, 2025

Uh oh!

jordanarldt May 6, 2025

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 7, 2025

Uh oh!

Uh oh!

		// eslint-disable-next-line @typescript-eslint/no-restricted-imports
		import { redirect } from 'next/navigation';

Update GQL client and auth middleware to handle invalid tokens and invalidate session #2259

Update GQL client and auth middleware to handle invalid tokens and invalidate session #2259

Uh oh!

Conversation

jordanarldt commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What/Why?

Testing

Migration

Uh oh!

changeset-bot bot commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jordanarldt Apr 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jordanarldt May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jorgemoya May 6, 2025

Choose a reason for hiding this comment

Uh oh!

jordanarldt May 6, 2025

Choose a reason for hiding this comment

Uh oh!

jorgemoya May 6, 2025

Choose a reason for hiding this comment

Uh oh!

jorgemoya May 6, 2025

Choose a reason for hiding this comment

Uh oh!

jordanarldt May 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 7, 2025

⚡️🏠 Lighthouse report

🖥️ Desktop

📱 Mobile

Uh oh!

Uh oh!

jordanarldt commented Apr 22, 2025 •

edited

Loading

changeset-bot bot commented Apr 22, 2025 •

edited

Loading

vercel bot commented Apr 22, 2025 •

edited

Loading

jordanarldt May 5, 2025 •

edited

Loading