passing customer login to checkout fix

packages/hydrogen/src/customer/auth.helpers.ts

@@ -191,7 +191,7 @@ export async function checkExpires({
         throw new BadRequest(
           'Unauthorized',
           'Login before querying the Customer Account API.',
-        );
+        ).headers.set('Set-Cookie', await session.commit());
       }
     }
   }

packages/hydrogen/src/customer/customer.ts

@@ -151,7 +151,12 @@ export function createCustomerAccountClient({
       if (response.status === 401) {
         // clear session because current access token is invalid
         clearSession(session);
-        throw authStatusHandler();
+
+        const authFailResponse = authStatusHandler();
+        if (authFailResponse instanceof Response) {
+          authFailResponse.headers.set('Set-Cookie', await session.commit());
+        }
+        throw authFailResponse;
       }
 
       /**
@@ -302,18 +307,20 @@ export function createCustomerAccountClient({
 
       if (!code || !state) {
         clearSession(session);
+
         throw new BadRequest(
           'Unauthorized',
           'No code or state parameter found in the redirect URL.',
-        );
+        ).headers.set('Set-Cookie', await session.commit());
       }
 
       if (session.get(CUSTOMER_ACCOUNT_SESSION_KEY)?.state !== state) {
         clearSession(session);
+
         throw new BadRequest(
           'Unauthorized',
           'The session state does not match the state parameter. Make sure that the session is configured correctly and passed to `createCustomerAccountClient`.',
-        );
+        ).headers.set('Set-Cookie', await session.commit());
       }
 
       const clientId = customerAccountId;

templates/skeleton/README.md

@@ -41,6 +41,10 @@ npm run dev
 
 ## Setup for using Customer Account API (`/account` section)
 
+### Enabled new Customer Account Experience
+
+1. Go to your Shopify admin => Settings => Customer accounts => New customer account
+
 ### Setup public domain using ngrok
 
 1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).

templates/skeleton/app/lib/fragments.ts

@@ -58,18 +58,6 @@ export const CART_QUERY_FRAGMENT = `#graphql
     id
     checkoutUrl
     totalQuantity
-    buyerIdentity {
-      countryCode
-      customer {
-        id
-        email
-        firstName
-        lastName
-        displayName
-      }
-      email
-      phone
-    }
     lines(first: $numCartLines) {
       nodes {
         ...CartLine

templates/skeleton/app/root.tsx

@@ -75,7 +75,20 @@ export async function loader({context}: LoaderFunctionArgs) {
   const isLoggedInPromise = customerAccount.isLoggedIn();
 
   // defer the cart query by not awaiting it
-  const cartPromise = cart.get();
+  const cartPromise = (async function () {
+    const [isLoggedIn, cartResult] = await Promise.all([
+      isLoggedInPromise,
+      cart.get(),
+    ]);
+
+    if (isLoggedIn && cartResult && cartResult.checkoutUrl) {
+      const finalCheckoutUrl = new URL(cartResult.checkoutUrl);
+      finalCheckoutUrl.searchParams.set('logged_in', 'true');
+      cartResult.checkoutUrl = finalCheckoutUrl.toString();
+    }
+
+    return cartResult;
+  })();
 
   // defer the footer query (below the fold)
   const footerPromise = storefront.query(FOOTER_QUERY, {

templates/skeleton/app/routes/cart.tsx

@@ -13,10 +13,7 @@ export const meta: MetaFunction = () => {
 export async function action({request, context}: ActionFunctionArgs) {
   const {cart} = context;
 
-  const [formData, customerAccessToken] = await Promise.all([
-    request.formData(),
-    await context.customerAccount.getAccessToken(),
-  ]);
+  const formData = await request.formData();
 
   const {action, inputs} = CartForm.getFormInput(formData);
 
@@ -51,13 +48,6 @@ export async function action({request, context}: ActionFunctionArgs) {
       result = await cart.updateDiscountCodes(discountCodes);
       break;
     }
-    case CartForm.ACTIONS.BuyerIdentityUpdate: {
-      result = await cart.updateBuyerIdentity({
-        ...inputs.buyerIdentity,
-        customerAccessToken,
-      });
-      break;
-    }
     default:
       throw new Error(`${action} cart action is not defined`);
   }

templates/skeleton/storefrontapi.generated.d.ts

@@ -42,17 +42,6 @@ export type CartApiQueryFragment = Pick<
   StorefrontAPI.Cart,
   'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
 > & {
-  buyerIdentity: Pick<
-    StorefrontAPI.CartBuyerIdentity,
-    'countryCode' | 'email' | 'phone'
-  > & {
-    customer?: StorefrontAPI.Maybe<
-      Pick<
-        StorefrontAPI.Customer,
-        'id' | 'email' | 'firstName' | 'lastName' | 'displayName'
-      >
-    >;
-  };
   lines: {
     nodes: Array<
       Pick<StorefrontAPI.CartLine, 'id' | 'quantity'> & {