From bd832f0d2046aa461984dbd147c9b50cbaf381a1 Mon Sep 17 00:00:00 2001 From: Shlomo Date: Mon, 11 Mar 2024 00:56:01 +0000 Subject: [PATCH] final changes --- .env.example | 12 +++++++++++ README.md | 32 ++++++---------------------- lib/shopify/customer/auth-helpers.ts | 9 ++++---- middleware.ts | 1 - 4 files changed, 24 insertions(+), 30 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 000000000..b3960fae2 --- /dev/null +++ b/.env.example @@ -0,0 +1,12 @@ +COMPANY_NAME="Vercel Inc." +TWITTER_CREATOR="@vercel" +TWITTER_SITE="https://nextjs.org/commerce" +SITE_NAME="Next.js Commerce" +SHOPIFY_REVALIDATION_SECRET="" +SHOPIFY_STOREFRONT_ACCESS_TOKEN="" +SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com" +# for customer account api +# SHOPIFY_CUSTOMER_ACCOUNT_API_CLIENT_ID="" +# SHOPIFY_CUSTOMER_ACCOUNT_API_URL="" +# SHOPIFY_CUSTOMER_API_VERSION="" +# SHOPIFY_ORIGIN_URL="" \ No newline at end of file diff --git a/README.md b/README.md index ae0c355fb..a1c9870f9 100644 --- a/README.md +++ b/README.md @@ -77,33 +77,15 @@ You can use this comprehensive [integration guide](http://vercel.com/docs/integr ## Shopify Customer Accounts -to do: env settings file -update Shopify stuff so points here -instructions - This fork is designed to provide a basic implementation of [Shopify's new Customer Accounts API](https://shopify.dev/docs/api/customer), which will allow a customer to login into their Next.js Shopify Website to update information and view orders, see Shopify's [launch announcement](https://www.shopify.com/partners/blog/introducing-customer-account-api-for-headless-stores) to learn more. -It uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware +It is based on Shopify's Hydrogen implementation and uses the concepts of Next.js middleware and server actions to implement the Shopify Customer Accounts API Integration. All the new code for the Customer Accounts API is included in: lib/shopify/customer folder, middleware.ts, and components/account -The code for this repo is adapted for Next.js from code provided by Shopify +The following files were changed in the core commerce repo: -To Set This Up, please follow: +- components/cart/index.tsx (to add logged_in true for checkout) +- components/layout/navbar/index.tsx (to add a login button to menu) +- Read Me +- env.example -1. icons/client components -2. Get -3. Set up URLs -4. Add the following ENV variables to your .env (and Vercel dashboard) - -https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen -https://shopify.dev/docs/api/customer - -There are several issues that make this code much more complex on NextJs: - -1. Get can't origin in RSC - you can get this in middleware and pass down as props - https://blog.stackademic.com/how-next-js-middlewares-work-103cae315163 - -2. Can't set Cookies in RSC! - -So to do this correctly, we have to use a fixed origin based on ENV variables, which makes testing difficult. Can only test in one environment. - -And 2, we need to pass the tokens to a client component, which sets the cookies client side. We couldn't figure out any other way to get this to work. +For instructions on how to get everything working properly, please see [Setup for using Shopify Customer Account API](https://www.dalicommerce.com/docs/nextjs/create-a-headless-shopify-nextjs#iii-setup-for-using-shopify-customer-account-api-log-in-and-account-section) diff --git a/lib/shopify/customer/auth-helpers.ts b/lib/shopify/customer/auth-helpers.ts index 3cabe2b16..314d5548c 100644 --- a/lib/shopify/customer/auth-helpers.ts +++ b/lib/shopify/customer/auth-helpers.ts @@ -1,4 +1,5 @@ -import type { NextRequest, NextResponse as NextResponseType } from 'next/server'; //you need to remain this as type so as not to confuse with the actual function +//you need to remain this as type so as not to confuse with the actual function +import type { NextRequest, NextResponse as NextResponseType } from 'next/server'; import { cookies } from 'next/headers'; import { getNonce } from 'lib/shopify/customer/auth-utils'; import { @@ -242,7 +243,7 @@ export async function createAllCookies({ }) { response.cookies.set('shop_customer_token', customerAccessToken, { httpOnly: true, //if true can only read the cookie in server - sameSite: 'lax', //should be lax??? + sameSite: 'lax', secure: true, path: '/', maxAge: expires_in //value from shopify, seems like this is 2 hours @@ -252,7 +253,7 @@ export async function createAllCookies({ //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', //should be lax??? + sameSite: 'lax', secure: true, path: '/', maxAge: 604800 //one week @@ -262,7 +263,7 @@ export async function createAllCookies({ //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', //should be lax??? + sameSite: 'lax', secure: true, path: '/', maxAge: 604800 //one week diff --git a/middleware.ts b/middleware.ts index c8b3e4960..9d831e7f3 100644 --- a/middleware.ts +++ b/middleware.ts @@ -36,7 +36,6 @@ export async function middleware(request: NextRequest) { //const newHeaders = new Headers(request.headers) const origin = getOrigin(request); //console.log ("origin", origin) - //just cleaner to return everything in this one function and not have to pass back shit back and forth with booleans return await isLoggedIn(request, origin); }