Customer session management is the process of tracking a user’s interaction with an application. It maintains their authenticated state and stores temporary data throughout their visit. Bigcommerce Catalyst uses a customer access token obtained during customer login to identify that customer’s context when making GraphQL Storefront API queries and mutations. Here, we will discuss how to manage and handle customer sessions in BigCommerce Catalyst.
Auth.js
Auth.js is an open-source solution for managing common customer authentication tasks. BigCommerce is naturally the customer authentication provider for Catalyst by default. But Auth.js wraps the simple authentication piece into a reliable system for tracking and managing the customer session. With the default Catalyst configuration, Auth.js tracks a logged-in customer’s session using a JWT cookie. Important files related to the Auth.js integration include:
- auth/index.ts: This file contains the central configuration and exports key components for other code to interact with. This file defines the simple BigCommerce authentication provider here, and exports the getSessionCustomerAccessToken method here. It can be used to easily retrieve the logged-in customer’s token. The storefront’s login and logout operations utilize functions exported from this file as well.
- app/api/auth/[…nextauth]/route.ts: Exports the API endpoints needed by Auth.js.
- middlewares/with-auth.ts: Invokes Auth.js in all requests to ensure the customer session is kept alive.
Session Sync
The GraphQL Storefront API supports syncing a customer’s authenticated session between different front-end applications. In the default Catalyst experience, this is primarily relevant to the Redirected Checkout process, as customers who have logged in on the Catalyst storefront need to remain logged in when they arrive at BigCommerce checkout.
The createCartRedirectUrls GraphQL mutation used to redirect visitors takes the current customer access token into account, and the tokenized redirect URL handles syncing both cart and authenticated status when the visitor arrives at checkout.
See app/[locale]/(default)/cart/redirect-to-checkout.ts for the details of the redirect process.
Single Sign-on
Catalyst uses the URL path /login/token/{token} to log in a customer using a specialized token instead of user-provided credentials. This supports single sign-on scenarios, when a customer’s identity has already been authenticated by an outside application.
This process requires a JSON Web Token (JWT) signed by a registered BigCommerce app and containing a payload identifying the customer to be logged in. See Customer Login API in the BigCommerce developer docs for the details of generating a valid JWT.
See these related files for more details on the Catalyst implementation:
- auth/index.ts – The loginWithCustomerLoginJwt GraphQL mutation used here is responsible for the authentication process.
- app/[locale]/(default)/(auth)/login/token/[token]/route.ts – This route handles the request to /login/token/{token}.
Please contact us at manish@bay20.com or call us at +91-8800519180 / +91-9582784309 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
