Add Shopify Customer Account API

[osseonews]

This pull request is designed to provide a basic implementation of Shopify's new Customer Account API, which will allow a customer to login into their Next.js Shopify Website to update information and view orders. We think it is is a great addition to the core commerce repo, because authentication remains a difficult problem for most implementations, and yet remains critical for key aspects of any production store.

The code is based on Shopify's Hydrogen implementation but is refactored to use the concepts of Next.js middleware and server actions to implement the Shopify Customer Account API Integration. The code requires zero new dependencies and only a few core files were changed per below.

All the new code for the Customer Account API is included in the following files: lib/shopify/customer, middleware.ts, and components/account.

The following files were changed in the core commerce repo:

• components/cart/index.tsx (to add logged_in true for checkout for Customer Account)
• components/layout/navbar/index.tsx (to add a login button to menu)
• components/cart/modal.tsx (had to fix a TS error here that prevented the cart index from working with nee checkout url)
• lib/utils.ts (add new required ENVs)
• README
• env.example

For instructions on how to get everything working properly, please see Setup for using Shopify Customer Account API and for additional background on this pull, please see Integrating Shopify Customer Account API with Next.js

Please Note: This is just a basic implementation of the Customer Account API and we still haven't hooked in all the functionality to view orders, view/edit addresses etc. This is coming soon.

[vercel[bot]]

@osseonews is attempting to deploy a commit to the Vercel Solutions Team on Vercel.

A member of the Team first needs to authorize it.

[AP-monkey]

Thank you for this addition. This is exactly what I needed / was hoping for to be added to the core.

Been struggling with the Hydrogen implementation for far longer than I want to admit.

[osseonews]

Thank you for this addition. This is exactly what I needed / was hoping for to be added to the core.

Been struggling with the Hydrogen implementation for far longer than I want to admit.

No, problem, please feel free to add any feedback or comments and I'll fix. I have basically forked this repo and am almost done with some major improvements. Will hopefully release everything soon, to make it super simple to launch Shopify on Nextjs with all the bells and whistles. Just hoping the amazing team at Vercel doesn't forget about this project. It has such huge potential, but they are not updating much since the original codebase.

[AP-monkey]

Hey @osseonews, was the merge successful in the end or not yet?

[osseonews]

@AP-monkey Doesn't look like anyone from Vercel looked at this. We use this in our own repo (cleaned up the code a bit more, and added features) and it works perfectly fine. It's just a fork of Shopify's own implementation really, but refactored for Nextjs. I would note that Shopify is adding some features to Customer Accounts soon, so some other changes might be needed to take advantage of those features.

[ulysses-ck]

@AP-monkey Doesn't look like anyone from Vercel looked at this. We use this in our own repo (cleaned up the code a bit more, and added features) and it works perfectly fine. It's just a fork of Shopify's own implementation really, but refactored for Nextjs. I would note that Shopify is adding some features to Customer Accounts soon, so some other changes might be needed to take advantage of those features.

Hi there! When you implement this PR in your project, did you look if after logging a user, then go to a checkout page, the session is shared? And load their addresses?

[osseonews]

the session is shared? And load their addresses?

Not sure what you mean. If they are logged in and they go to the checkout, the checkout will assume they are logged in and will load the customer addresses, if they have any. Please see the Shopify Customer Accounts API documentation.

[ulysses-ck]

the session is shared? And load their addresses?

Not sure what you mean. If they are logged in and they go to the checkout, the checkout will assume they are logged in and will load the customer addresses, if they have any. Please see the Shopify Customer Accounts API documentation.

Yeah, that's what I mean, I'm struggling with Hydrogen and you know, I don't know how to fix it. But thanks, i'm gonna take it look to this PR.

[osseonews]

Pretty much all you do is pass logged_in=true to the Shopify checkout and then Shopify takes over from there (assuming the user is logged in). I actually just used the Hydrogen skeleton template for the code here. I'm just more familiar with Nextjs than Remix, so opted for Nextjs for Shopify integration and just refactored the Remix code for Nextjs. But, I've used the Hydrogen version also and it worked fine. The thing with Hydrogen is that you want to be sure you base everything off of their skeleton template.

[ulysses-ck]

Well, for me when I setup the Customer Account API in my hydrogen app doesn't work, I use the classical method of authentication. Then choose the new method, but it also doesn't work. I pass the query param logged_in=true with the customerAccessToken in the cart and default address in the buyerIdentity, but it doesn't recognize the session. So, I don't know. I'm already preparing this and gonna take it a look.

[osseonews]

Yeah, well that explains why it's not working for you. The token you generate from the classical method will not work with the new customer accounts api token and vice versa. You got to choose one method. So if you generated the token with the classical method, going to checkout won't log in the customer and won't do anything. At the same time, if you pass the token generated by the customer accounts API into the buyerIdentity, it won't work. Bottom line, if you want to log in the customer at checkout, you can't use the classical method, and you need to use the new customer accounts api. I recommend just using the login that comes with the Hydrogen skeleton, as that is the correct method to use. They don't use the classical method any more on Hydrogen. The incompatibility between these two methods and tokens is a known issue with Shopify already and supposedly they are working on some sort of integration, but it's doubtful they will actually integrate them because Shopify is pushing the new Accoutns API for hydrogen.

[ulysses-ck]

I really appreciate your response!! That's the reason after I didn't find the classical method support any more 🤣

[luizkc]

I followed all the steps here and code implementation, but I'm the x-shop-access header keeps returning as denied in the /authorize endpoint.

Any ideas why?

redirect URL is looking like this: https://ORIGIN_URL.com/authorize?code={CODE}&state={state}

[osseonews]

Most likely there is a setting in Shopify which is wrong or one of your ENV variables is incorrect, so there is no token or the token is incorrect. I really can't be sure. Shopify's customer account api is very complex and it's easy to miss a setting. You would have to console.log the functions that are called on isLoggedIn and other functions to see where the error is coming from. Sorry I can't be of more help. My advice anyway is to wait a bit, b/c I believe Shopify will be improving the customer accounts api to make it slightly easier to implement, so the code may change slightly. Anyway, if you are looking to really use Shopify headless with the new Customer Accounts, I would recommend going with Hydrogen. Nothing wrong with Next, I love it. But Shopify supports Hydrogen directly and repo is very active with loads of help provided. This repo reminds me of the old adage: ""If a tree falls in a forest and no one is around to hear it, does it make a sound?"