How can I test a customer account locally on Next.js?

[randal923]

Hi there, I am having a couple of issues with the customer account. I am following this documentation https://shopify.dev/docs/custom-storefronts/building-with-the-storefront-api/customer-accounts to create my sign-up and login flow. I tested all these mutations and query in the Graphql playground and it works great. I then started coding it using Next.js 14. I create the customer account and then prompt the user to log in, when the user submits the log in form I send the request to my /api/login route, which creates the access token and saves it to an http only cookie. I then redirect the user to the /my-account page where I get this cookie and fetch for the customer itself.

The first issue I have is that this flow doesn't work locally, not even tunneling with ngrok. It only works when I deploy it to prod. The second issue is that the accessToken I generate in my API doesn't work in the Graphql playground, I always get customer as null.

I really would like to test this flow locally, has anyone had the same issues?

[randal923 · Accepted solution]

I think I finally figured it out. There are 2 types of accounts, one created to be used locally and another one to be used in the Graphql API. An account created through the Graphql API will not work if you build the login flow in your app and log in from there. But if you create an account through the headless app it is going to work. I only figured it out because I tested my account on a new computer and it worked there and I had no idea why. I then created the forgot password flow and when I changed the password I noticed I could log in with both passwords for the same account, the password that I created through my headless app would return the customer no problem but the other one that I created through the GraphQL API didn't return the customer.

This should have been very, very explicit in the documentation.