feat: use customer access tokens for customer logins

.changeset/gorgeous-poets-scream.md

@@ -0,0 +1,6 @@
+---
+"@bigcommerce/catalyst-client": minor
+"@bigcommerce/catalyst-core": minor
+---
+
+Removes all usages of the customer impersonation token. Also updates the docs to correspond with the Storefront API Token.

.changeset/itchy-rice-kiss.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/create-catalyst": minor
+---
+
+Generates a storefront token when using the CLI to init or create a Catalyst storefront.

.changeset/new-icons-arrive.md

@@ -0,0 +1,6 @@
+---
+"@bigcommerce/catalyst-client": minor
+"@bigcommerce/catalyst-core": minor
+---
+
+Allows the ability to consume a [storefront token](https://developer.bigcommerce.com/docs/rest-authentication/tokens#storefront-tokens). This new token will allow Catalyst to create `customerAccessToken`'s whenever a user logs into their account. This change doesn't include consuming the either token, only adding the ability to pass it in.

.changeset/twelve-mangos-pay.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/create-catalyst": minor
+---
+
+Remove generating a customer impersonation token as we are using the API Token + Customer Access Token approach"

.env.example

@@ -2,9 +2,9 @@
 # The control panel URL is of the form `https://store-{hash}.mybigcommerce.com`. 
 BIGCOMMERCE_STORE_HASH=
 
-# A bearer token that authorizes server-to-server requests to the GraphQL Storefront API
-# See https://developer.bigcommerce.com/docs/rest-authentication/tokens/customer-impersonation-token
-BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=
+# A JWT Token for accessing the Storefront API. Enables server-to-server requests if allowed_cors_origins is omitted.
+# See https://developer.bigcommerce.com/docs/rest-authentication/tokens#storefront-tokens
+BIGCOMMERCE_STOREFRONT_TOKEN=
 
 # The Channel ID for the selling channel being serviced by this Catalyst storefront.
 # Channel ID 1 will allow you to load the same data being used on the default Stencil storefront on your store,

.github/workflows/basic.yml

@@ -13,7 +13,7 @@ env:
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
   TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
   BIGCOMMERCE_STORE_HASH: ${{ secrets.BIGCOMMERCE_STORE_HASH }}
-  BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN: ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}
+  BIGCOMMERCE_STOREFRONT_TOKEN: ${{ secrets.BIGCOMMERCE_STOREFRONT_TOKEN }}
   BIGCOMMERCE_CHANNEL_ID: ${{ secrets.BIGCOMMERCE_CHANNEL_ID }}
 
 jobs:

core/.env.example

@@ -2,9 +2,9 @@
 # The control panel URL is of the form `https://store-{hash}.mybigcommerce.com`. 
 BIGCOMMERCE_STORE_HASH=
 
-# A bearer token that authorizes server-to-server requests to the GraphQL Storefront API
-# See https://developer.bigcommerce.com/docs/rest-authentication/tokens/customer-impersonation-token
-BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=
+# A JWT Token for accessing the Storefront API. Enables server-to-server requests if allowed_cors_origins is omitted.
+# See https://developer.bigcommerce.com/docs/rest-authentication/tokens#storefront-tokens
+BIGCOMMERCE_STOREFRONT_TOKEN=
 
 # The Channel ID for the selling channel being serviced by this Catalyst storefront.
 # Channel ID 1 will allow you to load the same data being used on the default Stencil storefront on your store,

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -1,6 +1,6 @@
 import { cache } from 'react';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { FormFieldsFragment } from '~/components/form-fields/fragment';
@@ -69,7 +69,7 @@ interface Props {
 }
 
 export const getRegisterCustomerQuery = cache(async ({ address, customer }: Props = {}) => {
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   const response = await client.fetch({
     document: RegisterCustomerQuery,
@@ -80,7 +80,7 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
       customerSortBy: customer?.sortBy,
     },
     fetchOptions: { cache: 'no-store' },
-    customerId,
+    customerAccessToken,
   });
 
   const addressFields = response.data.site.settings?.formFields.shippingAddress;

core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts

@@ -1,6 +1,6 @@
 import { cache } from 'react';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
@@ -31,13 +31,13 @@ const CategoryPageQuery = graphql(
 type Variables = VariablesOf<typeof CategoryPageQuery>;
 
 export const getCategoryPageData = cache(async (variables: Variables) => {
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   const response = await client.fetch({
     document: CategoryPageQuery,
     variables,
-    customerId,
-    fetchOptions: customerId ? { cache: 'no-store' } : { next: { revalidate } },
+    customerAccessToken,
+    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
   });
 
   return response.data.site;

core/app/[locale]/(default)/(faceted)/fetch-faceted-search.ts

@@ -2,7 +2,7 @@ import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { cache } from 'react';
 import { z } from 'zod';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { PaginationFragment } from '~/client/fragments/pagination';
 import { graphql, VariablesOf } from '~/client/graphql';
@@ -167,15 +167,15 @@ interface ProductSearch {
 
 const getProductSearchResults = cache(
   async ({ limit = 9, after, before, sort, filters }: ProductSearch) => {
-    const customerId = await getSessionCustomerId();
+    const customerAccessToken = await getSessionCustomerAccessToken();
     const filterArgs = { filters, sort };
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };
 
     const response = await client.fetch({
       document: GetProductSearchResultsQuery,
       variables: { ...filterArgs, ...paginationArgs },
-      customerId,
-      fetchOptions: customerId ? { cache: 'no-store' } : { next: { revalidate: 300 } },
+      customerAccessToken,
+      fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate: 300 } },
     });
 
     const { site } = response.data;

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

@@ -3,7 +3,7 @@
 import { revalidatePath } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 
@@ -34,13 +34,12 @@ const DeleteCustomerAddressMutation = graphql(`
 
 export const deleteAddress = async (addressId: number): Promise<State> => {
   const t = await getTranslations('Account.Addresses.Delete');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   try {
     const response = await client.fetch({
       document: DeleteCustomerAddressMutation,
-      customerId,
+      customerAccessToken,
       fetchOptions: { cache: 'no-store' },
       variables: {
         input: {

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

@@ -3,7 +3,7 @@
 import { revalidatePath } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields';
@@ -56,8 +56,7 @@ export const addAddress = async ({
   reCaptchaToken?: string;
 }) => {
   const t = await getTranslations('Account.Addresses.Add.Form');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   try {
     const parsed = parseAccountFormData(formData);
@@ -71,7 +70,7 @@ export const addAddress = async ({
 
     const response = await client.fetch({
       document: AddCustomerAddressMutation,
-      customerId,
+      customerAccessToken,
       fetchOptions: { cache: 'no-store' },
       variables: {
         input: parsed,

core/app/[locale]/(default)/account/(tabs)/addresses/add/page.tsx

@@ -1,6 +1,6 @@
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, ResultOf } from '~/client/graphql';
 import { FormFieldsFragment } from '~/components/form-fields/fragment';
@@ -69,12 +69,11 @@ export async function generateMetadata() {
 
 export default async function AddPage() {
   const t = await getTranslations('Account.Addresses.Add');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   const { data } = await client.fetch({
     document: CustomerNewAdressQuery,
-    customerId,
+    customerAccessToken,
     fetchOptions: { cache: 'no-store' },
     variables: {
       shippingSorting: 'SORT_ORDER',

core/app/[locale]/(default)/account/(tabs)/addresses/edit/[slug]/_actions/update-address.ts

@@ -3,7 +3,7 @@
 import { revalidatePath } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields';
@@ -61,8 +61,7 @@ export const updateAddress = async ({
   reCaptchaToken?: string;
 }) => {
   const t = await getTranslations('Account.Addresses.Edit.Form');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   try {
     const parsed = parseAccountFormData(formData);
@@ -76,7 +75,7 @@ export const updateAddress = async ({
 
     const response = await client.fetch({
       document: UpdateCustomerAddressMutation,
-      customerId,
+      customerAccessToken,
       fetchOptions: { cache: 'no-store' },
       variables: {
         input: {

core/app/[locale]/(default)/account/(tabs)/addresses/edit/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { FormFieldValuesFragment } from '~/client/fragments/form-fields-values';
 import { PaginationFragment } from '~/client/fragments/pagination';
@@ -104,12 +104,11 @@ interface Props {
 
 export default async function Edit({ params: { slug } }: Props) {
   const t = await getTranslations('Account.Addresses.Edit');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   const { data } = await client.fetch({
     document: CustomerEditAddressQuery,
-    customerId,
+    customerAccessToken,
     fetchOptions: { cache: 'no-store' },
     variables: {
       countryCode: null,

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

@@ -1,7 +1,7 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { cache } from 'react';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { FormFieldValuesFragment } from '~/client/fragments/form-fields-values';
 import { PaginationFragment } from '~/client/fragments/pagination';
@@ -52,13 +52,13 @@ interface Pagination {
 
 export const getCustomerAddresses = cache(
   async ({ before = '', after = '', limit = 9 }: Pagination) => {
-    const customerId = await getSessionCustomerId();
+    const customerAccessToken = await getSessionCustomerAccessToken();
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };
 
     const response = await client.fetch({
       document: GetCustomerAddressesQuery,
       variables: { ...paginationArgs },
-      customerId,
+      customerAccessToken,
       fetchOptions: { cache: 'no-store' },
     });
 

core/app/[locale]/(default)/account/(tabs)/settings/_actions/update-customer.ts

@@ -3,7 +3,7 @@
 import { revalidatePath } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { parseAccountFormData } from '~/components/form-fields/shared/parse-fields';
@@ -65,8 +65,7 @@ interface UpdateCustomerForm {
 
 export const updateCustomer = async ({ formData, reCaptchaToken }: UpdateCustomerForm) => {
   const t = await getTranslations('Account.Settings.UpdateCustomer');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   formData.delete('g-recaptcha-response');
 
@@ -81,7 +80,7 @@ export const updateCustomer = async ({ formData, reCaptchaToken }: UpdateCustome
 
   const response = await client.fetch({
     document: UpdateCustomerMutation,
-    customerId,
+    customerAccessToken,
     fetchOptions: { cache: 'no-store' },
     variables: {
       input: parsed,

core/app/[locale]/(default)/account/(tabs)/settings/change-password/_actions/change-password.ts

@@ -3,7 +3,7 @@
 import { getTranslations } from 'next-intl/server';
 import { z } from 'zod';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 
@@ -51,8 +51,7 @@ export interface State {
 
 export const changePassword = async (_previousState: unknown, formData: FormData) => {
   const t = await getTranslations('Account.Settings.ChangePassword');
-
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   try {
     const parsedData = CustomerChangePasswordSchema.parse({
@@ -69,7 +68,7 @@ export const changePassword = async (_previousState: unknown, formData: FormData
           newPassword: parsedData.newPassword,
         },
       },
-      customerId,
+      customerAccessToken,
     });
 
     const result = response.data.customer.changePassword;

core/app/[locale]/(default)/account/(tabs)/settings/page-data.tsx

@@ -1,7 +1,7 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { cache } from 'react';
 
-import { getSessionCustomerId } from '~/auth';
+import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { FormFieldValuesFragment } from '~/client/fragments/form-fields-values';
 import { PaginationFragment } from '~/client/fragments/pagination';
@@ -91,7 +91,7 @@ interface Props {
 }
 
 export const getCustomerSettingsQuery = cache(async ({ address, customer }: Props = {}) => {
-  const customerId = await getSessionCustomerId();
+  const customerAccessToken = await getSessionCustomerAccessToken();
 
   const response = await client.fetch({
     document: CustomerSettingsQuery,
@@ -102,7 +102,7 @@ export const getCustomerSettingsQuery = cache(async ({ address, customer }: Prop
       customerSortBy: customer?.sortBy,
     },
     fetchOptions: { cache: 'no-store' },
-    customerId,
+    customerAccessToken,
   });
 
   const addressFields = response.data.site.settings?.formFields.shippingAddress;
@@ -168,13 +168,13 @@ export interface CustomerAddressesArgs {
 
 export const getCustomerAddresses = cache(
   async ({ before = '', after = '', limit = 9 }: CustomerAddressesArgs) => {
-    const customerId = await getSessionCustomerId();
+    const customerAccessToken = await getSessionCustomerAccessToken();
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };
 
     const response = await client.fetch({
       document: GetCustomerAddressesQuery,
       variables: { ...paginationArgs },
-      customerId,
+      customerAccessToken,
       fetchOptions: { cache: 'no-store' },
     });