Merge pull request #4 from Car-Part-Planet/CPP-153

Add Customer Authentication and Order Details

lib/shopify/auth.ts

@@ -0,0 +1,508 @@
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const CUSTOMER_API_URL = process.env.SHOPIFY_CUSTOMER_ACCOUNT_API_URL!;
+export const CUSTOMER_API_CLIENT_ID = process.env.SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID || '';
+export const ORIGIN_URL = process.env.SHOPIFY_ORIGIN_URL || '';
+export const USER_AGENT = '*';
+
+export async function generateCodeVerifier() {
+  const randomCode = generateRandomCode();
+  return base64UrlEncode(randomCode);
+}
+
+export async function generateCodeChallenge(codeVerifier: string) {
+  const digestOp = await crypto.subtle.digest(
+    { name: 'SHA-256' },
+    new TextEncoder().encode(codeVerifier)
+  );
+  const hash = convertBufferToString(digestOp);
+  return base64UrlEncode(hash);
+}
+
+function generateRandomCode() {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return String.fromCharCode.apply(null, Array.from(array));
+}
+
+function base64UrlEncode(str: string) {
+  const base64 = btoa(str);
+  // This is to ensure that the encoding does not have +, /, or = characters in it.
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function convertBufferToString(hash: ArrayBuffer) {
+  const uintArray = new Uint8Array(hash);
+  const numberArray = Array.from(uintArray);
+  return String.fromCharCode(...numberArray);
+}
+
+export async function generateRandomString() {
+  const timestamp = Date.now().toString();
+  const randomString = Math.random().toString(36).substring(2);
+  return timestamp + randomString;
+}
+
+export async function getNonce(token: string) {
+  const [header, payload, signature] = token.split('.');
+  const decodedHeader = JSON.parse(atob(header || ''));
+  const decodedPayload = JSON.parse(atob(payload || ''));
+  return {
+    header: decodedHeader,
+    payload: decodedPayload,
+    signature
+  };
+}
+
+export async function initialAccessToken(
+  request: NextRequest,
+  newOrigin: string,
+  customerAccountApiUrl: string,
+  clientId: string
+) {
+  const code = request.nextUrl.searchParams.get('code');
+  const state = request.nextUrl.searchParams.get('state');
+  /*
+  STEP 1: Check for all necessary cookies and other information
+  */
+  if (!code) {
+    console.log('Error: No Code Auth');
+    return { success: false, message: `No Code` };
+  }
+  if (!state) {
+    console.log('Error: No State Auth');
+    return { success: false, message: `No State` };
+  }
+  const shopState = request.cookies.get('shop_state');
+  const shopStateValue = shopState?.value;
+  if (!shopStateValue) {
+    console.log('Error: No Shop State Value');
+    return { success: false, message: `No Shop State` };
+  }
+  if (state !== shopStateValue) {
+    console.log('Error: Shop state mismatch');
+    return { success: false, message: `No Shop State Mismatch` };
+  }
+  const codeVerifier = request.cookies.get('shop_verifier');
+  const codeVerifierValue = codeVerifier?.value;
+  if (!codeVerifierValue) {
+    console.log('No Code Verifier');
+    return { success: false, message: `No Code Verifier` };
+  }
+  /*
+  STEP 2: GET ACCESS TOKEN
+  */
+  const body = new URLSearchParams();
+  body.append('grant_type', 'authorization_code');
+  body.append('client_id', clientId);
+  body.append('redirect_uri', `${newOrigin}/authorize`);
+  body.append('code', code);
+  body.append('code_verifier', codeVerifier?.value);
+  const userAgent = '*';
+  const headersNew = new Headers();
+  headersNew.append('Content-Type', 'application/x-www-form-urlencoded');
+  headersNew.append('User-Agent', userAgent);
+  headersNew.append('Origin', newOrigin || '');
+  const tokenRequestUrl = `${customerAccountApiUrl}/auth/oauth/token`;
+
+  const response = await fetch(tokenRequestUrl, {
+    method: 'POST',
+    headers: headersNew,
+    body
+  });
+
+  if (!response.ok) {
+    const error = await response.text();
+    console.log('data response error auth', error);
+    console.log('response auth', response.status);
+    return { success: false, message: `Response error auth` };
+  }
+  const data = await response.json();
+  if (data?.errors) {
+    const errorMessage = data?.errors?.[0]?.message ?? 'Unknown error auth';
+    return { success: false, message: `${errorMessage}` };
+  }
+  const nonce = await getNonce(data?.id_token || '');
+  const nonceValue = nonce.payload.nonce;
+  const shopNonce = request.cookies.get('shop_nonce');
+  const shopNonceValue = shopNonce?.value;
+  if (nonceValue !== shopNonceValue) {
+    console.log('Error nonce match');
+    return { success: false, message: `Error: Nonce mismatch` };
+  }
+  return { success: true, data };
+}
+
+export async function exchangeAccessToken(
+  token: string,
+  customerAccountId: string,
+  customerAccountApiUrl: string,
+  origin: string
+) {
+  const clientId = customerAccountId;
+  //this is a constant - see the docs. https://shopify.dev/docs/api/customer#useaccesstoken-propertydetail-audience
+  const customerApiClientId = '30243aa5-17c1-465a-8493-944bcc4e88aa';
+  const accessToken = token;
+  const body = new URLSearchParams();
+  body.append('grant_type', 'urn:ietf:params:oauth:grant-type:token-exchange');
+  body.append('client_id', clientId);
+  body.append('audience', customerApiClientId);
+  body.append('subject_token', accessToken);
+  body.append('subject_token_type', 'urn:ietf:params:oauth:token-type:access_token');
+  body.append('scopes', 'https://api.customers.com/auth/customer.graphql');
+
+  const userAgent = '*';
+
+  const headers = new Headers();
+  headers.append('Content-Type', 'application/x-www-form-urlencoded');
+  headers.append('User-Agent', userAgent);
+  headers.append('Origin', origin);
+
+  // Token Endpoint goes here
+  const response = await fetch(`${customerAccountApiUrl}/auth/oauth/token`, {
+    method: 'POST',
+    headers,
+    body
+  });
+
+  const data = await response.json();
+  if (data.error) {
+    return { success: false, data: data?.error_description };
+  }
+  return { success: true, data };
+}
+
+export async function refreshToken({ request, origin }: { request: NextRequest; origin: string }) {
+  const newBody = new URLSearchParams();
+  const refreshToken = request.cookies.get('shop_refresh_token');
+  const refreshTokenValue = refreshToken?.value;
+  if (!refreshTokenValue) {
+    console.log('Error: No Refresh Token');
+    return { success: false, message: `no_refresh_token` };
+  }
+  const clientId = CUSTOMER_API_CLIENT_ID;
+  newBody.append('grant_type', 'refresh_token');
+  newBody.append('refresh_token', refreshTokenValue);
+  newBody.append('client_id', clientId);
+  const headers = {
+    'content-type': 'application/x-www-form-urlencoded',
+    'User-Agent': USER_AGENT,
+    Origin: origin
+  };
+  const tokenRequestUrl = `${CUSTOMER_API_URL}/auth/oauth/token`;
+  const response = await fetch(tokenRequestUrl, {
+    method: 'POST',
+    headers,
+    body: newBody
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    console.log('response error in refresh token', text);
+    return { success: false, message: `no_refresh_token` };
+  }
+  const data = await response.json();
+  console.log('data response from initial fetch to refresh', data);
+  const { access_token, expires_in, refresh_token } = data;
+
+  const customerAccessToken = await exchangeAccessToken(
+    access_token,
+    clientId,
+    CUSTOMER_API_URL,
+    origin
+  );
+  // console.log("Customer Access Token in refresh request", customerAccessToken)
+  if (!customerAccessToken.success) {
+    return { success: false, message: `no_refresh_token` };
+  }
+
+  //const expiresAt = new Date(new Date().getTime() + (expires_in - 120) * 1000).getTime() + ''
+  //const idToken = id_token
+
+  return {
+    success: true,
+    data: { customerAccessToken: customerAccessToken.data.access_token, expires_in, refresh_token }
+  };
+}
+
+export async function checkExpires({
+  request,
+  expiresAt,
+  origin
+}: {
+  request: NextRequest;
+  expiresAt: string;
+  origin: string;
+}) {
+  let isExpired = false;
+  if (parseInt(expiresAt, 10) - 1000 < new Date().getTime()) {
+    isExpired = true;
+    console.log('Isexpired is true, we are running refresh token!');
+    const refresh = await refreshToken({ request, origin });
+    console.log('refresh', refresh);
+    //this will return success: true or success: false - depending on result of refresh
+    return { ranRefresh: isExpired, refresh };
+  }
+  console.log('is expired is false - just sending back success', isExpired);
+  return { ranRefresh: isExpired, success: true };
+}
+
+export function removeAllCookies(response: NextResponse) {
+  //response.cookies.delete('shop_auth_token') //never set. We don't use it anywhere.
+  response.cookies.delete('shop_customer_token');
+  response.cookies.delete('shop_refresh_token');
+  response.cookies.delete('shop_id_token');
+  response.cookies.delete('shop_state');
+  response.cookies.delete('shop_nonce');
+  response.cookies.delete('shop_verifier');
+  response.cookies.delete('shop_expires_at');
+  return response;
+}
+
+export async function removeAllCookiesServerAction() {
+  cookies().delete('shop_customer_token');
+  cookies().delete('shop_refresh_token');
+  cookies().delete('shop_id_token');
+  cookies().delete('shop_state');
+  cookies().delete('shop_nonce');
+  cookies().delete('shop_verifier');
+  cookies().delete('shop_expires_at');
+  return { success: true };
+}
+
+export async function createAllCookies({
+  response,
+  customerAccessToken,
+  expires_in,
+  refresh_token,
+  expiresAt,
+  id_token
+}: {
+  response: NextResponse;
+  customerAccessToken: string;
+  expires_in: number;
+  refresh_token: string;
+  expiresAt: string;
+  id_token?: string;
+}) {
+  response.cookies.set('shop_customer_token', customerAccessToken, {
+    httpOnly: true, //if true can only read the cookie in server
+    sameSite: 'lax',
+    secure: true,
+    path: '/',
+    maxAge: expires_in //value from shopify, seems like this is 2 hours
+  });
+
+  //you need to set an expiration here, because otherwise its a sessions cookie
+  //and will disappear after the user closes the browser and then we can never refresh - same with expires at below
+  response.cookies.set('shop_refresh_token', refresh_token, {
+    httpOnly: true, //if true can only read the cookie in server
+    sameSite: 'lax',
+    secure: true,
+    path: '/',
+    maxAge: 604800 //one week
+  });
+
+  //you need to set an expiration here, because otherwise its a sessions cookie
+  //and will disappear after the user closes the browser and then we can never refresh
+  response.cookies.set('shop_expires_at', expiresAt, {
+    httpOnly: true, //if true can only read the cookie in server
+    sameSite: 'lax',
+    secure: true,
+    path: '/',
+    maxAge: 604800 //one week
+  });
+
+  //required for logout - this must be the same as the original expires - it;s long lived so they can logout, otherwise it will expire
+  //because that's how we got the token, if this is different, it won't work
+  //we don't always send in id_token here. For example, on refresh it's not available, it's only sent in on the initial authorization
+  if (id_token) {
+    response.cookies.set('shop_id_token', id_token, {
+      httpOnly: true, //if true can only read the cookie in server
+      sameSite: 'lax', //should be lax???
+      secure: true,
+      path: '/',
+      maxAge: 604800 //one week
+    });
+  }
+
+  return response;
+}
+export async function isLoggedIn(request: NextRequest, origin: string) {
+  const customerToken = request.cookies.get('shop_customer_token');
+  const customerTokenValue = customerToken?.value;
+  const refreshToken = request.cookies.get('shop_refresh_token');
+  const refreshTokenValue = refreshToken?.value;
+
+  const newHeaders = new Headers(request.headers);
+  if (!customerTokenValue && !refreshTokenValue) {
+    const redirectUrl = new URL(`${origin}`);
+    const response = NextResponse.redirect(`${redirectUrl}`);
+    return removeAllCookies(response);
+  }
+
+  const expiresToken = request.cookies.get('shop_expires_at');
+  const expiresTokenValue = expiresToken?.value;
+  if (!expiresTokenValue) {
+    const redirectUrl = new URL(`${origin}`);
+    const response = NextResponse.redirect(`${redirectUrl}`);
+    return removeAllCookies(response);
+    //return { success: false, message: `no_expires_at` }
+  }
+  const isExpired = await checkExpires({
+    request: request,
+    expiresAt: expiresTokenValue,
+    origin: origin
+  });
+  console.log('is Expired?', isExpired);
+  //only execute the code below to reset the cookies if it was expired!
+  if (isExpired.ranRefresh) {
+    const isSuccess = isExpired?.refresh?.success;
+    if (!isSuccess) {
+      const redirectUrl = new URL(`${origin}`);
+      const response = NextResponse.redirect(`${redirectUrl}`);
+      return removeAllCookies(response);
+      //return { success: false, message: `no_refresh_token` }
+    } else {
+      const refreshData = isExpired?.refresh?.data;
+      //console.log ("refresh data", refreshData)
+      console.log('We used the refresh token, so now going to reset the token and cookies');
+      const newCustomerAccessToken = refreshData?.customerAccessToken;
+      const expires_in = refreshData?.expires_in;
+      //const test_expires_in = 180 //to test to see if it expires in 60 seconds!
+      const expiresAt = new Date(new Date().getTime() + (expires_in! - 120) * 1000).getTime() + '';
+      newHeaders.set('x-shop-customer-token', `${newCustomerAccessToken}`);
+      const resetCookieResponse = NextResponse.next({
+        request: {
+          // New request headers
+          headers: newHeaders
+        }
+      });
+      return await createAllCookies({
+        response: resetCookieResponse,
+        customerAccessToken: newCustomerAccessToken,
+        expires_in,
+        refresh_token: refreshData?.refresh_token,
+        expiresAt
+      });
+    }
+  }
+
+  newHeaders.set('x-shop-customer-token', `${customerTokenValue}`);
+  return NextResponse.next({
+    request: {
+      // New request headers
+      headers: newHeaders
+    }
+  });
+}
+
+//when we are running on the production website we just get the origin from the request.nextUrl
+export function getOrigin(request: NextRequest) {
+  const nextOrigin = request.nextUrl.origin;
+  console.log('Current Origin', nextOrigin);
+  //when running localhost, we want to use fake origin otherwise we use the real origin
+  let newOrigin = nextOrigin;
+  if (nextOrigin === 'https://localhost:3000' || nextOrigin === 'http://localhost:3000') {
+    newOrigin = ORIGIN_URL;
+  } else {
+    newOrigin = nextOrigin;
+  }
+  console.log('New Origin', newOrigin);
+  return newOrigin;
+}
+
+export async function authorize(request: NextRequest, origin: string) {
+  const clientId = CUSTOMER_API_CLIENT_ID;
+  const newHeaders = new Headers(request.headers);
+  /***
+  STEP 1: Get the initial access token or deny access
+  ****/
+  const dataInitialToken = await initialAccessToken(request, origin, CUSTOMER_API_URL, clientId);
+  console.log('data initial token', dataInitialToken);
+  if (!dataInitialToken.success) {
+    console.log('Error: Access Denied. Check logs', dataInitialToken.message);
+    newHeaders.set('x-shop-access', 'denied');
+    return NextResponse.next({
+      request: {
+        // New request headers
+        headers: newHeaders
+      }
+    });
+  }
+  const { access_token, expires_in, id_token, refresh_token } = dataInitialToken.data;
+  /***
+  STEP 2: Get a Customer Access Token
+  ****/
+  const customerAccessToken = await exchangeAccessToken(
+    access_token,
+    clientId,
+    CUSTOMER_API_URL,
+    origin || ''
+  );
+  console.log('customer access token', customerAccessToken);
+  if (!customerAccessToken.success) {
+    console.log('Error: Customer Access Token');
+    newHeaders.set('x-shop-access', 'denied');
+    return NextResponse.next({
+      request: {
+        // New request headers
+        headers: newHeaders
+      }
+    });
+  }
+  //console.log("customer access Token", customerAccessToken.data.access_token)
+  /**STEP 3: Set Customer Access Token cookies
+  We are setting the cookies here b/c if we set it on the request, and then redirect
+  it doesn't see to set sometimes
+  **/
+  newHeaders.set('x-shop-access', 'allowed');
+  /*
+  const authResponse = NextResponse.next({
+    request: {
+      // New request headers
+      headers: newHeaders,
+    },
+  })
+  */
+  const accountUrl = new URL(`${origin}/account`);
+  const authResponse = NextResponse.redirect(`${accountUrl}`);
+
+  //sets an expires time 2 minutes before expiration which we can use in refresh strategy
+  //const test_expires_in = 180 //to test to see if it expires in 60 seconds!
+  const expiresAt = new Date(new Date().getTime() + (expires_in! - 120) * 1000).getTime() + '';
+  console.log('expires at', expiresAt);
+
+  return await createAllCookies({
+    response: authResponse,
+    customerAccessToken: customerAccessToken?.data?.access_token,
+    expires_in,
+    refresh_token,
+    expiresAt,
+    id_token
+  });
+}
+
+export async function logout(request: NextRequest, origin: string) {
+  //console.log("New Origin", newOrigin)
+  const idToken = request.cookies.get('shop_id_token');
+  const idTokenValue = idToken?.value;
+  //revalidateTag(TAGS.customer); //this causes some strange error in Nextjs about invariant, so removing for now
+
+  //if there is no idToken, then sending to logout url will redirect shopify, so just
+  //redirect to login here and delete cookies (presumably they don't even exist)
+  if (!idTokenValue) {
+    const logoutUrl = new URL(`${origin}`);
+    const response = NextResponse.redirect(`${logoutUrl}`);
+    return removeAllCookies(response);
+  }
+
+  //console.log ("id toke value", idTokenValue)
+  const logoutUrl = new URL(
+    `${CUSTOMER_API_URL}/auth/logout?id_token_hint=${idTokenValue}&post_logout_redirect_uri=${origin}`
+  );
+  //console.log ("logout url", logoutUrl)
+  const logoutResponse = NextResponse.redirect(logoutUrl);
+  return removeAllCookies(logoutResponse);
+}

lib/shopify/fragments/customer-address.ts

@@ -0,0 +1,18 @@
+const customerAddress = /* GraphQL */ `
+  fragment CustomerAddress on CustomerAddress {
+    id
+    formatted
+    firstName
+    lastName
+    company
+    address1
+    address2
+    territoryCode
+    zoneCode
+    city
+    zip
+    phoneNumber
+  }
+`;
+
+export default customerAddress;

lib/shopify/fragments/customer-details.ts

@@ -0,0 +1,36 @@
+import customerAddress from './customer-address';
+import orderCard from './order-card';
+
+const customerDetailsFragment = /* GraphQL */ `
+  ${customerAddress}
+  ${orderCard}
+
+  fragment CustomerDetails on Customer {
+    firstName
+    lastName
+    phoneNumber {
+      phoneNumber
+    }
+    emailAddress {
+      emailAddress
+    }
+    defaultAddress {
+      ...CustomerAddress
+    }
+    addresses(first: 6) {
+      edges {
+        node {
+          ...CustomerAddress
+        }
+      }
+    }
+    orders(first: 20, sortKey: PROCESSED_AT, reverse: true) {
+      edges {
+        node {
+          ...OrderCard
+        }
+      }
+    }
+  }
+`;
+export default customerDetailsFragment;

lib/shopify/fragments/order-card.ts

@@ -0,0 +1,36 @@
+const orderCard = /* GraphQL */ `
+  fragment OrderCard on Order {
+    id
+    number
+    name
+    processedAt
+    financialStatus
+    fulfillments(first: 1) {
+      edges {
+        node {
+          status
+        }
+      }
+    }
+    totalPrice {
+      amount
+      currencyCode
+    }
+    lineItems(first: 20) {
+      edges {
+        node {
+          title
+          quantity
+          image {
+            altText
+            height
+            url
+            width
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default orderCard;

lib/shopify/index.ts

@@ -12,7 +12,7 @@ import {
   YEAR_FILTER_ID
 } from 'lib/constants';
 import { isShopifyError } from 'lib/type-guards';
-import { ensureStartsWith, normalizeUrl, parseMetaFieldValue } from 'lib/utils';
+import { ensureStartsWith, normalizeUrl, parseJSON, parseMetaFieldValue } from 'lib/utils';
 import { revalidatePath, revalidateTag } from 'next/cache';
 import { headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
@@ -39,15 +39,20 @@ import {
   getProductsQuery
 } from './queries/product';
 import {
+  Address,
   Cart,
   CartAttributeInput,
   Collection,
   Connection,
+  Customer,
   Filter,
   Image,
   Menu,
   Metaobject,
   Money,
+  Order,
+  Fulfillment,
+  Transaction,
   Page,
   PageInfo,
   Product,
@@ -60,6 +65,9 @@ import {
   ShopifyCollectionProductsOperation,
   ShopifyCollectionsOperation,
   ShopifyCreateCartOperation,
+  ShopifyCustomerOperation,
+  ShopifyCustomerOrderOperation,
+  ShopifyCustomerOrdersOperation,
   ShopifyFilter,
   ShopifyImageOperation,
   ShopifyMenuOperation,
@@ -76,13 +84,31 @@ import {
   ShopifyRemoveFromCartOperation,
   ShopifySetCartAttributesOperation,
   ShopifyUpdateCartOperation,
-  TransmissionType
+  TransmissionType,
+  ShopifyCustomer,
+  ShopifyOrder,
+  ShopifyAddress,
+  ShopifyMoneyV2,
+  LineItem
 } from './types';
+import { getCustomerQuery } from './queries/customer';
+import { getCustomerOrdersQuery } from './queries/orders';
+import { getCustomerOrderQuery } from './queries/order';
 
 const domain = process.env.SHOPIFY_STORE_DOMAIN
   ? ensureStartsWith(process.env.SHOPIFY_STORE_DOMAIN, 'https://')
   : '';
-const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
+
+const customerApiUrl = process.env.SHOPIFY_CUSTOMER_ACCOUNT_API_URL;
+const customerApiVersion = process.env.SHOPIFY_CUSTOMER_API_VERSION;
+
+const storefrontEndpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
+const customerEndpoint = `${customerApiUrl}/account/customer/api/${customerApiVersion}/graphql`;
+
+const userAgent = '*';
+const placeholderProductImage =
+  'https://cdn.shopify.com/shopifycloud/customer-account-web/production/assets/8bc6556601c510713d76.svg';
+
 const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
 
 type ExtractVariables<T> = T extends { variables: object } ? T['variables'] : never;
@@ -101,7 +127,7 @@ export async function shopifyFetch<T>({
   variables?: ExtractVariables<T>;
 }): Promise<{ status: number; body: T } | never> {
   try {
-    const result = await fetch(endpoint, {
+    const result = await fetch(storefrontEndpoint, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -143,6 +169,80 @@ export async function shopifyFetch<T>({
   }
 }
 
+export async function shopifyCustomerFetch<T>({
+  query,
+  variables
+}: {
+  query: string;
+  variables?: ExtractVariables<T>;
+}): Promise<{ status: number; body: T } | never> {
+  const headersList = headers();
+  const customerToken = headersList.get('x-shop-customer-token') || '';
+
+  try {
+    const result = await fetch(customerEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'User-Agent': userAgent,
+        Origin: domain,
+        Authorization: customerToken
+      },
+      body: JSON.stringify({
+        ...(query && { query }),
+        ...(variables && { variables })
+      }),
+      cache: 'no-store'
+    });
+
+    const body = await result.json();
+    if (!result.ok) {
+      //the statuses here could be different, a 401 means
+      //https://shopify.dev/docs/api/customer#endpoints
+      //401 means the token is bad
+      console.log('Error in Customer Fetch Status', body.errors);
+      if (result.status === 401) {
+        // clear session because current access token is invalid
+        const errorMessage = 'unauthorized';
+        throw errorMessage; //this should throw in the catch below in the non-shopify catch
+      }
+      let errors;
+      try {
+        errors = parseJSON(body);
+      } catch (_e) {
+        errors = [{ message: body }];
+      }
+      throw errors;
+    }
+
+    //this just throws an error and the error boundary is called
+    if (body.errors) {
+      //throw 'Error'
+      console.log('Error in Customer Fetch', body.errors[0]);
+      throw body.errors[0];
+    }
+
+    return {
+      status: result.status,
+      body
+    };
+  } catch (e) {
+    if (isShopifyError(e)) {
+      throw {
+        cause: e.cause?.toString() || 'unknown',
+        status: e.status || 500,
+        message: e.message,
+        query
+      };
+    }
+
+    throw {
+      error: e,
+      query
+    };
+  }
+}
+
 const removeEdgesAndNodes = (array: Connection<any>) => {
   return array.edges.map((edge) => edge?.node);
 };
@@ -337,6 +437,142 @@ const reshapeProducts = (products: ShopifyProduct[]) => {
   return reshapedProducts;
 };
 
+function reshapeCustomer(customer: ShopifyCustomer): Customer {
+  return {
+    firstName: customer.firstName,
+    lastName: customer.lastName,
+    displayName: customer.displayName,
+    emailAddress: customer.emailAddress.emailAddress
+  };
+}
+
+function reshapeOrders(orders: ShopifyOrder[]): any[] | Promise<Order[]> {
+  const reshapedOrders: Order[] = [];
+
+  for (const order of orders) {
+    const reshapedOrder = reshapeOrder(order);
+    if (!reshapedOrder) continue;
+
+    reshapedOrders.push(reshapedOrder);
+  }
+
+  return reshapedOrders;
+}
+
+function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
+  const reshapeAddress = (address?: ShopifyAddress): Address | undefined => {
+    if (!address) return undefined;
+    return {
+      address1: address.address1,
+      address2: address.address2,
+      firstName: address.firstName,
+      lastName: address.lastName,
+      provinceCode: address.provinceCode,
+      city: address.city,
+      zip: address.zip,
+      country: address.countryCodeV2,
+      company: address.company,
+      phone: address.phone
+    };
+  };
+
+  const reshapeMoney = (money?: ShopifyMoneyV2): Money | undefined => {
+    if (!money) return undefined;
+    return {
+      amount: money.amount || '0.00',
+      currencyCode: money.currencyCode || 'USD'
+    };
+  };
+
+  const orderFulfillments: Fulfillment[] =
+    shopifyOrder.fulfillments?.edges?.map((edge) => ({
+      status: edge.node.status,
+      createdAt: edge.node.createdAt,
+      trackingInformation:
+        edge.node.trackingInformation?.map((tracking) => ({
+          number: tracking.number,
+          company: tracking.company,
+          url: tracking.url
+        })) || [],
+      events:
+        edge.node.events?.edges.map((event) => ({
+          status: event.node.status,
+          happenedAt: event.node.happenedAt
+        })) || [],
+      fulfilledLineItems:
+        edge.node.fulfillmentLineItems?.nodes.map((lineItem) => ({
+          id: lineItem.lineItem.id,
+          quantity: lineItem.quantity,
+          image: {
+            url: lineItem.lineItem.image?.url || placeholderProductImage,
+            altText: lineItem.lineItem.image?.altText || lineItem.lineItem.title,
+            width: 62,
+            height: 62
+          }
+        })) || []
+    })) || [];
+
+  const orderTransactions: Transaction[] = shopifyOrder.transactions?.map((transaction) => ({
+    processedAt: transaction.processedAt,
+    paymentIcon: {
+      url: transaction.paymentIcon.url,
+      altText: transaction.paymentIcon.altText,
+      width: 100,
+      height: 100
+    },
+    paymentDetails: {
+      last4: transaction.paymentDetails.last4,
+      cardBrand: transaction.paymentDetails.cardBrand
+    },
+    transactionAmount: reshapeMoney(transaction.transactionAmount.presentmentMoney)!
+  }));
+
+  const orderLineItems: LineItem[] =
+    shopifyOrder.lineItems?.edges.map((edge) => ({
+      id: edge.node.id,
+      title: edge.node.title,
+      quantity: edge.node.quantity,
+      image: {
+        url: edge.node.image?.url || placeholderProductImage,
+        altText: edge.node.image?.altText || edge.node.title,
+        width: 62,
+        height: 62
+      },
+      price: reshapeMoney(edge.node.price),
+      totalPrice: reshapeMoney(edge.node.totalPrice),
+      variantTitle: edge.node.variantTitle,
+      sku: edge.node.sku
+    })) || [];
+
+  const order: Order = {
+    id: shopifyOrder.id.replace('gid://shopify/Order/', ''),
+    name: shopifyOrder.name,
+    processedAt: shopifyOrder.processedAt,
+    fulfillments: orderFulfillments,
+    transactions: orderTransactions,
+    lineItems: orderLineItems,
+    shippingAddress: reshapeAddress(shopifyOrder.shippingAddress),
+    billingAddress: reshapeAddress(shopifyOrder.billingAddress),
+    subtotal: reshapeMoney(shopifyOrder.subtotal),
+    totalShipping: reshapeMoney(shopifyOrder.totalShipping),
+    totalTax: reshapeMoney(shopifyOrder.totalTax),
+    totalPrice: reshapeMoney(shopifyOrder.totalPrice)
+  };
+
+  if (shopifyOrder.customer) {
+    order.customer = reshapeCustomer(shopifyOrder.customer);
+  }
+
+  if (shopifyOrder.shippingLine) {
+    order.shippingMethod = {
+      name: shopifyOrder.shippingLine?.title,
+      price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)!
+    };
+  }
+
+  return order;
+}
+
 export async function createCart(): Promise<Cart> {
   const res = await shopifyFetch<ShopifyCreateCartOperation>({
     query: createCartMutation,
@@ -687,6 +923,33 @@ export async function getProducts({
     pageInfo
   };
 }
+
+export async function getCustomer(): Promise<Customer> {
+  const res = await shopifyCustomerFetch<ShopifyCustomerOperation>({
+    query: getCustomerQuery
+  });
+
+  const customer = res.body.data.customer;
+  return reshapeCustomer(customer);
+}
+
+export async function getCustomerOrders(): Promise<Order[]> {
+  const res = await shopifyCustomerFetch<ShopifyCustomerOrdersOperation>({
+    query: getCustomerOrdersQuery
+  });
+
+  return reshapeOrders(removeEdgesAndNodes(res.body.data.customer.orders));
+}
+
+export async function getCustomerOrder(orderId: string): Promise<Order> {
+  const res = await shopifyCustomerFetch<ShopifyCustomerOrderOperation>({
+    query: getCustomerOrderQuery,
+    variables: { orderId: `gid://shopify/Order/${orderId}` }
+  });
+
+  return reshapeOrder(res.body.data.order);
+}
+
 // This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
 export async function revalidate(req: NextRequest): Promise<NextResponse> {
   console.log(`Receiving revalidation request from Shopify.`);

lib/shopify/queries/customer.ts

@@ -0,0 +1,13 @@
+//https://shopify.dev/docs/api/customer/2024-01/queries/customer
+export const getCustomerQuery = /* GraphQL */ `
+  query customer {
+    customer {
+      emailAddress {
+        emailAddress
+      }
+      firstName
+      lastName
+      tags
+    }
+  }
+`;

lib/shopify/queries/order.ts

@@ -0,0 +1,240 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
+export const getCustomerOrderQuery = /* GraphQL */ `
+  query getCustomerOrderQuery($orderId: ID!) {
+    customer {
+      emailAddress {
+        emailAddress
+      }
+      displayName
+    }
+    order(id: $orderId) {
+      ... on Order {
+        id
+        ...Order
+        customer {
+          id
+          emailAddress {
+            emailAddress
+            marketingState
+          }
+          firstName
+          lastName
+          phoneNumber {
+            phoneNumber
+            marketingState
+          }
+          imageUrl
+          displayName
+        }
+      }
+    }
+  }
+
+  fragment Order on Order {
+    id
+    name
+    confirmationNumber
+    processedAt
+    cancelledAt
+    currencyCode
+    transactions {
+      ...OrderTransaction
+    }
+    billingAddress {
+      ...Address
+    }
+    shippingAddress {
+      ...Address
+    }
+    fulfillments(first: 20, sortKey: CREATED_AT, reverse: true, query: "NOT status:CANCELLED") {
+      edges {
+        node {
+          id
+          ...Fulfillment
+        }
+      }
+    }
+    lineItems(first: 50) {
+      edges {
+        node {
+          id
+          ...LineItem
+        }
+      }
+    }
+    totalPrice {
+      ...Price
+    }
+    subtotal {
+      ...Price
+    }
+    totalShipping {
+      ...Price
+    }
+    totalTax {
+      ...Price
+    }
+    financialStatus
+    totalRefunded {
+      ...Price
+    }
+    refunds {
+      id
+      createdAt
+    }
+    paymentInformation {
+      paymentCollectionUrl
+      ...OrderPaymentInformation
+    }
+    requiresShipping
+    note
+    shippingLine {
+      title
+      originalPrice {
+        ...Price
+      }
+    }
+  }
+
+  fragment OrderTransaction on OrderTransaction {
+    id
+    processedAt
+    paymentIcon {
+      id
+      url
+      altText
+    }
+    paymentDetails {
+      ... on CardPaymentDetails {
+        last4
+        cardBrand
+      }
+    }
+    transactionAmount {
+      presentmentMoney {
+        ...Price
+      }
+    }
+    giftCardDetails {
+      last4
+      balance {
+        ...Price
+      }
+    }
+    status
+    kind
+    transactionParentId
+    type
+    typeDetails {
+      name
+      message
+    }
+  }
+
+  fragment Price on MoneyV2 {
+    amount
+    currencyCode
+  }
+
+  fragment Address on CustomerAddress {
+    id
+    address1
+    address2
+    firstName
+    lastName
+    provinceCode: zoneCode
+    city
+    zip
+    countryCodeV2: territoryCode
+    company
+    phone: phoneNumber
+  }
+
+  fragment Fulfillment on Fulfillment {
+    id
+    status
+    createdAt
+    estimatedDeliveryAt
+    trackingInformation {
+      number
+      company
+      url
+    }
+    requiresShipping
+    fulfillmentLineItems(first: 20) {
+      nodes {
+        id
+        quantity
+        lineItem {
+          id
+          name
+          title
+          presentmentTitle
+          sku
+          image {
+            id
+            url
+            altText
+          }
+        }
+      }
+    }
+    events(first: 20, sortKey: HAPPENED_AT, reverse: true) {
+      edges {
+        node {
+          id
+          ...FulfillmentEvent
+        }
+      }
+    }
+  }
+
+  fragment FulfillmentEvent on FulfillmentEvent {
+    status
+    happenedAt
+  }
+
+  fragment LineItem on LineItem {
+    title
+    image {
+      altText
+      height
+      url
+      width
+    }
+    price {
+      ...Price
+    }
+    quantity
+    sku
+    totalPrice {
+      ...Price
+    }
+    variantTitle
+  }
+
+  fragment OrderPaymentInformation on OrderPaymentInformation {
+    paymentStatus
+    totalPaidAmount {
+      ...Price
+    }
+    totalOutstandingAmount {
+      ...Price
+    }
+    paymentTerms {
+      id
+      overdue
+      nextDueAt
+      paymentSchedules(first: 2) {
+        nodes {
+          id
+          dueAt
+          completed
+          amount {
+            ...Price
+          }
+        }
+      }
+    }
+  }
+`;

lib/shopify/queries/orders.ts

@@ -0,0 +1,15 @@
+import customerDetailsFragment from '../fragments/customer-details';
+
+const customerFragment = `#graphql
+`;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
+export const getCustomerOrdersQuery = `#graphql
+  query getCustomerOrdersQuery {
+    customer {
+      ...CustomerDetails
+    }
+  }
+  ${customerFragment}
+  ${customerDetailsFragment}
+`;

lib/shopify/types.ts

@@ -46,6 +46,13 @@ export type Collection = Omit<ShopifyCollection, 'helpfulLinks' | 'helpfulLinksT
   helpfulLinksTop: string[] | null;
 };
 
+export type Customer = {
+  emailAddress: string;
+  firstName?: string;
+  lastName?: string;
+  displayName?: string;
+};
+
 export type Image = {
   url: string;
   altText: string;
@@ -69,6 +76,270 @@ export type PageMetafield = {
   value: string;
 };
 
+export type Fulfillment = {
+  status: string;
+  createdAt: string;
+  fulfilledLineItems: {
+    id: string;
+    quantity: number;
+    image: Image;
+  }[];
+  trackingInformation: {
+    number: string;
+    company: string;
+    url: string;
+  }[];
+  events: {
+    status: string;
+    happenedAt: string;
+  }[];
+};
+
+export type Transaction = {
+  processedAt: string;
+  paymentIcon: Image;
+  paymentDetails: {
+    last4: string;
+    cardBrand: string;
+  };
+  transactionAmount: Money;
+};
+
+export type Address = {
+  address1: string;
+  address2: string | null;
+  firstName: string;
+  lastName: string;
+  provinceCode: string;
+  city: string;
+  zip: string;
+  country: string;
+  company: string | null;
+  phone: string;
+};
+
+export type LineItem = {
+  id: string;
+  title: string;
+  image: Image;
+  price?: Money;
+  quantity?: number;
+  sku?: string;
+  totalPrice?: Money;
+  variantTitle?: string;
+};
+
+export type Order = {
+  id: string;
+  name: string;
+  customer?: Customer;
+  processedAt: string;
+  fulfillments: Fulfillment[];
+  transactions: Transaction[];
+  lineItems: LineItem[];
+  shippingAddress?: Address;
+  billingAddress?: Address;
+  /** the price of all line items, excluding taxes and surcharges */
+  subtotal?: Money;
+  totalShipping?: Money;
+  totalTax?: Money;
+  totalPrice?: Money;
+  shippingMethod?: {
+    name: string;
+    price: Money;
+  };
+};
+
+export type ShopifyOrder = {
+  id: string;
+  name: string;
+  confirmationNumber: string;
+  customer: ShopifyCustomer;
+  processedAt: string;
+  cancelledAt: string | null;
+  currencyCode: string;
+  transactions: ShopifyOrderTransaction[];
+  billingAddress: ShopifyAddress;
+  shippingAddress: ShopifyAddress;
+  fulfillments: Connection<ShopifyFulfillment>;
+  lineItems: Connection<ShopifyLineItem>;
+  totalPrice: ShopifyMoneyV2;
+  subtotal: ShopifyMoneyV2;
+  totalShipping: ShopifyMoneyV2;
+  totalTax: ShopifyMoneyV2;
+  financialStatus: string;
+  totalRefunded: ShopifyMoneyV2;
+  refunds: ShopifyRefund[];
+  paymentInformation: ShopifyOrderPaymentInformation;
+  requiresShipping: boolean;
+  shippingLine: ShopifyShippingLine;
+  note: string | null;
+};
+
+type ShopifyShippingLine = {
+  title: string;
+  originalPrice: ShopifyMoneyV2;
+};
+
+type ShopifyOrderTransaction = {
+  id: string;
+  processedAt: string;
+  paymentIcon: ShopifyPaymentIconImage;
+  paymentDetails: ShopifyCardPaymentDetails;
+  transactionAmount: ShopifyMoneyBag;
+  giftCardDetails: ShopifyGiftCardDetails | null;
+  status: string;
+  kind: string;
+  transactionParentId: string | null;
+  type: string;
+  typeDetails: ShopifyTransactionTypeDetails;
+};
+
+type ShopifyPaymentIconImage = {
+  id: string;
+  url: string;
+  altText: string;
+};
+
+type ShopifyCardPaymentDetails = {
+  last4: string;
+  cardBrand: string;
+};
+
+type ShopifyGiftCardDetails = {
+  last4: string;
+  balance: ShopifyMoneyV2;
+};
+
+type ShopifyMoneyBag = {
+  presentmentMoney: ShopifyMoneyV2;
+};
+
+export type ShopifyMoneyV2 = {
+  amount: string;
+  currencyCode: string;
+};
+
+type ShopifyTransactionTypeDetails = {
+  name: string;
+  message: string | null;
+};
+
+export type ShopifyAddress = {
+  id: string;
+  address1: string;
+  address2: string | null;
+  firstName: string;
+  lastName: string;
+  provinceCode: string;
+  city: string;
+  zip: string;
+  countryCodeV2: string;
+  company: string | null;
+  phone: string;
+};
+
+type ShopifyFulfillment = {
+  id: string;
+  status: string;
+  createdAt: string;
+  estimatedDeliveryAt: string | null;
+  trackingInformation: ShopifyTrackingInformation[];
+  requiresShipping: boolean;
+  fulfillmentLineItems: ShopifyFulfillmentLineItemConnection;
+  events: Connection<ShopifyFulfillmentEvent>;
+};
+
+type ShopifyTrackingInformation = {
+  number: string;
+  company: string;
+  url: string;
+};
+
+type ShopifyFulfillmentLineItemConnection = {
+  nodes: ShopifyFulfillmentLineItem[];
+};
+
+type ShopifyFulfillmentLineItem = {
+  id: string;
+  quantity: number;
+  lineItem: ShopifyLineItem;
+};
+
+type ShopifyLineItem = {
+  id: string;
+  title: string;
+  image: ShopifyImage;
+  price: ShopifyMoneyV2;
+  quantity: number;
+  sku: string;
+  totalPrice: ShopifyMoneyV2;
+  variantTitle: string;
+};
+
+type ShopifyImage = {
+  altText: string;
+  height: number;
+  url: string;
+  width: number;
+};
+
+type ShopifyFulfillmentEvent = {
+  status: string;
+  happenedAt: string;
+};
+
+type ShopifyRefund = {
+  id: string;
+  createdAt: string;
+};
+
+type ShopifyOrderPaymentInformation = {
+  paymentCollectionUrl: string;
+  paymentStatus: string;
+  totalPaidAmount: ShopifyMoneyV2;
+  totalOutstandingAmount: ShopifyMoneyV2;
+  paymentTerms: ShopifyPaymentTerms | null;
+};
+
+type ShopifyPaymentTerms = {
+  id: string;
+  overdue: boolean;
+  nextDueAt: string;
+  paymentSchedules: ShopifyPaymentScheduleConnection;
+};
+
+type ShopifyPaymentScheduleConnection = {
+  nodes: ShopifyPaymentSchedule[];
+};
+
+type ShopifyPaymentSchedule = {
+  id: string;
+  dueAt: string;
+  completed: boolean;
+  amount: ShopifyMoneyV2;
+};
+
+export type ShopifyCustomer = {
+  id: string;
+  emailAddress: ShopifyCustomerEmailAddress;
+  firstName: string;
+  lastName: string;
+  phoneNumber: ShopifyCustomerPhoneNumber | null;
+  imageUrl: string;
+  displayName: string;
+};
+
+type ShopifyCustomerEmailAddress = {
+  emailAddress: string;
+  marketingState: string;
+};
+
+type ShopifyCustomerPhoneNumber = {
+  phoneNumber: string;
+  marketingState: string;
+};
+
 export const PAGE_TYPES = [
   'image',
   'icon_content_section',
@@ -445,6 +716,29 @@ export type ShopifyProductsOperation = {
   };
 };
 
+export type ShopifyCustomerOperation = {
+  data: {
+    customer: ShopifyCustomer;
+  };
+};
+
+export type ShopifyCustomerOrdersOperation = {
+  data: {
+    customer: {
+      orders: Connection<ShopifyOrder>;
+    };
+  };
+};
+
+export type ShopifyCustomerOrderOperation = {
+  data: {
+    order: ShopifyOrder;
+  };
+  variables: {
+    orderId: string;
+  };
+};
+
 export type CoreChargeOption = {
   label: string;
   value: string;

lib/styles.ts

@@ -1,5 +1,16 @@
 export const colors = {
-  primary: '#EF6C02',
+  primary: {
+    DEFAULT: '#EF6C02',
+    emphasis: '#C85900',
+    muted: '#E6CCB7'
+  },
+  content: {
+    subtle: '#9ca3af', // gray-400
+    DEFAULT: '#6b7280', // gray-500
+    emphasis: '#374151', // gray-700
+    strong: '#111827', // gray-900
+    inverted: '#ffffff' // white
+  },
   dark: '#091242',
   secondary: '#EF6C02',
   blue: {

lib/utils.ts

@@ -14,7 +14,14 @@ export const ensureStartsWith = (stringToCheck: string, startsWith: string) =>
   stringToCheck.startsWith(startsWith) ? stringToCheck : `${startsWith}${stringToCheck}`;
 
 export const validateEnvironmentVariables = () => {
-  const requiredEnvironmentVariables = ['SHOPIFY_STORE_DOMAIN', 'SHOPIFY_STOREFRONT_ACCESS_TOKEN'];
+  const requiredEnvironmentVariables = [
+    'SHOPIFY_STORE_DOMAIN',
+    'SHOPIFY_STOREFRONT_ACCESS_TOKEN',
+    'SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID',
+    'SHOPIFY_CUSTOMER_ACCOUNT_API_URL',
+    'SHOPIFY_CUSTOMER_API_VERSION',
+    'SHOPIFY_ORIGIN_URL'
+  ];
   const missingEnvironmentVariables = [] as string[];
 
   requiredEnvironmentVariables.forEach((envVar) => {
@@ -71,3 +78,12 @@ export const findParentCollection = (menu: Menu[], collection: string): Menu | n
   }
   return parentCollection;
 };
+
+export function parseJSON(json: any) {
+  if (String(json).includes('__proto__')) return JSON.parse(json, noproto);
+  return JSON.parse(json);
+}
+
+function noproto(k: string, v: string) {
+  if (k !== '__proto__') return v;
+}