Fixes

examples/customer-api/README.md

@@ -7,16 +7,32 @@ This is an example using the new Shopify [Customer Accounts API](https://shopify
 ## Requirements
 
 1. Hydrogen 2023.7 or later
-2. [Ngrok](https://ngrok.com/) for pointing a public https domain to your local machine
+2. [Ngrok](https://ngrok.com/) for pointing a public https domain to your local machine required for oAuth
+
+## Environment variables
+
+Create a `.env` file at the root of your project
+
+```toml
+PUBLIC_CUSTOMER_ACCOUNT_ID=shp_<your-id>
+PUBLIC_CUSTOMER_ACCOUNT_URL=https://shopify.com/<your-url-id>
+PUBLIC_STOREFRONT_API_TOKEN=<your-storefront-api-token>
+PUBLIC_STORE_DOMAIN=<your-store>.myshopify.com
+SESSION_SECRET=foobar
+```
 
 ## Setup
 
-1. Add the Customer API to your Hydrogen channel within the Shopify admin
-1. Setup an ngrok account and add a permanent domain.
-1. Copy the permanent domain from ngrok and add a callback URI: `https://your-ngrok-domain.app/authorize`
-1. Add a JavaScript origin with your ngrok domain: `https://your-ngrok-domain.app`
-1. Add a logout URI to your ngrok domain: `https://your-ngrok-domain.app`
-1. Copy `env.example` to `.env` and replace the credentials with those from your Hydrogen channel.
-1. Update the `ngrok` script within `package.json` to use your ngrok domain
-1. In a terminal start ngrok with `npm run ngrok`
-1. In another terminal, start hydrogen with `npm run dev`
+1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain.
+2. Add the `Hydrogen` or `Headless` app/channel to your store via the Shopify admin
+3. Create a storefront if one doesn't exist
+4. Access the `Customer Account API` settings via the storefront settings page
+5. Copy the permanent domain from ngrok and add it as a `callback URI`: `https://your-ngrok-domain.app/authorize`
+6. Add a `JavaScript origin` with your ngrok domain: `https://your-ngrok-domain.app`
+7. Add a logout URI to your ngrok domain: `https://your-ngrok-domain.app`
+8. Copy the `Client ID` from the Customer Account API credentials to the `.env` `PUBLIC_CUSTOMER_ACCOUNT_ID` variable
+9. Copy the Customer Account API url to the `.env` `PUBLIC_CUSTOMER_ACCOUNT_URL` variable
+10. Update the ngrok npm script within `package.json` to use your ngrok domain
+11. Install the [ngrok CLI](https://ngrok.com/download)
+12. In a terminal start ngrok with `npm run ngrok`
+13. In another terminal, start hydrogen with `npm run dev`

examples/customer-api/app/routes/_index.tsx

@@ -1,7 +1,7 @@
 import {Form, useLoaderData, useRouteError} from '@remix-run/react';
 import {type LoaderArgs, json} from '@shopify/remix-oxygen';
 
-export async function loader({request, context}: LoaderArgs) {
+export async function loader({context}: LoaderArgs) {
   if (await context.customer.isLoggedIn()) {
     const user = await context.customer.query(`
       {
@@ -63,19 +63,3 @@ export default function () {
     </div>
   );
 }
-
-async function queryCustomerAccounts(query: string) {
-  const {data} = await fetch('https://graphql.myshopify.com/api/graphql', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-Shopify-Storefront-Access-Token':
-        context.env.PUBLIC_STOREFRONT_ACCESS_TOKEN,
-    },
-    body: JSON.stringify({
-      query,
-    }),
-  }).then((response) => response.json());
-
-  return data;
-}

examples/customer-api/app/utils/customer.ts → examples/customer-api/app/utils/customer.server.ts

@@ -1,4 +1,4 @@
-import {LoaderArgs, redirect} from '@shopify/remix-oxygen';
+import {redirect} from '@shopify/remix-oxygen';
 import {HydrogenSession} from 'server';
 
 const userAgent =

examples/customer-api/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "shopify hydrogen build",
     "dev": "shopify hydrogen dev",
-    "ngrok": "ngrok http --domain=stinkbug-upright-illegally.ngrok-free.app 3000",
+    "ngrok": "ngrok http --domain=<your-ngrok-domain> 3000",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit"

examples/customer-api/remix.env.d.ts

@@ -4,7 +4,7 @@
 
 import type {Storefront} from '@shopify/hydrogen';
 import type {HydrogenSession} from './server';
-import type {CustomerClient} from '~/utils/customer';
+import type {CustomerClient} from '~/utils/customer.server';
 
 declare global {
   /**

examples/customer-api/server.ts

@@ -8,7 +8,7 @@ import {
   type SessionStorage,
   type Session,
 } from '@shopify/remix-oxygen';
-import {createCustomerClient} from '~/utils/customer';
+import {createCustomerClient} from '~/utils/customer.server';
 
 /**
  * Export a fetch handler in module format.
@@ -47,6 +47,9 @@ export default {
         storefrontHeaders: getStorefrontHeaders(request),
       });
 
+      /**
+       * Create a customer client for the new customer API.
+       */
       const customer = createCustomerClient({
         request,
         session,