Add Shopify Customer Account API

[osseonews]

trafficstars

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?"

[powdaze]

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}

Did you ever figure this out? Running into the same issue with same redirect url. Probably going to just switch to Hydrogen

Edit: Figured it out. Make sure middleware.ts is in the root. same level as app middleware.ts; app/, not app/middleware.ts

[osseonews]

@eriks-studio Sorry, I can't be of more help. Honestly, I got this to work very well, but then opted to stop developing it, because if you are going to use Shopify Headless, just use Hydrogen. It's much easier and they have developed all the code already, have a very active discussion forum, and update code nearly every day. This repo for Nextjs is amazing, as a basic template for using NextJs. I've used some of the code here on other projects, because it's really good and it taught me a ton about how to structure a Nextjs project. But to actually get Nextjs Commerce with Shopify to a point where it is usable on a real site is massive, massive undertaking, because so many features are missing. I don't recommend it, unless you have a large team of developers. As well, I will say that if you plan to use Shopify, just use Shopify Dawn and forget about all this headless stuff. You will end up spending your entire life building functionality that Shopify already has built into Dawn. Even their own internal team can't keep up with Dawn. I know, because i went down this path. And if I can do it over again, there is no chance I'd code an ecommerce website in React. It's just reinventing the wheel and there is no way to keep up with Shopify innovations.

[powdaze]

@osseonews thank you! I appreciate the advice. I switched to building the required customizations on top of Dawn and it's been going smoothly.

[osseonews]

@osseonews thank you! I appreciate the advice. I switched to building the required customizations on top of Dawn and it's been going smoothly.

Great, smart decision! I'm happy to have saved at least one person from going down an endless rabbit hole and wasting hours of their life. Believe me, I wish someone else had told me this 4 yrs ago. There is still alot of code in this repo that is very valuable and can help you on certain projects. You just need to know when to use it.

But, if you know Javascript (ultimately React is just JS really), you can do alot with Dawn with just plain vanilla javascript and fetching data (don't even need most of the plugins), and you won't have to reinvent the wheel for all the other many basic features that you get out the box. When you reach a point of frustration where some things are difficult or impossible to do on just Dawn, generally you can make a subdomain and code in Nextjs. You don't have to use Nextjs for the actual ecommerce part to get the benefits of Nextjs.

Note: I've found that things like subscriptions are a pain on Shopify and require expensive plugins. I've found it much easier to do subscriptions on a Nextjs website with Stripe integrated. But, if this is only part of the business, you can certainly do this on a subdomain, which I have done myself, and then you can tie shopify back in via backend api.

[liho00]

we need this feature, shopify hydrogen is using remix, but the framework is not developer friendly i would say, when i integrating vercel/ai and i18n to hydrogen remix, hitting a lot of errors.

I will rather stick with next js with shopify tho...

hopefully we can make vercel commerce bright again!