CORS error when accessing Customer Account API token endpoint with public client type.

[lizn]

Hi there, I'm using the customer accounts api to authenticate my b2b users from my next js headless storefront hosted on netlify.

My client type is set to public and I am able to successfully retrieve a code from https://shopify.com/<store  id>/auth/oauth/authorize and set the code verifier. 

The problem is the second step in the authentication process, the call to
shopify.com/< my store id >/auth/oauth/token is returning 401 unauthorized with a cors error.

I have tried both the https netlify.live domain generated by the netlify cli, as well as an ngrok tunnel, with the respective origins and endpoints set in my application settings, but the result is the same. 

Here is my function:

export async function codeToToken(router) {
  const code = router.query.code;

  const clientId = process.env.NEXT_PUBLIC_SHOPIFY_NEW_CUSTOMER_CLIENT_ID;

  const body = new URLSearchParams();
  body.append("grant_type", "authorization_code");
  body.append("client_id", clientId);
  body.append(
    "redirect_uri",
    `https://<my live link domain>.netlify.live/account/`
  );
  body.append("code", code);

  // Public Client
  const codeVerifier = localStorage.getItem("code-verifier");
  body.append("code_verifier", codeVerifier);

  const headers = {
    "Content-Type": "application/x-www-form-urlencoded",
    Origin: "https://<my live link domain>.netlify.live",
  };

  const tokenRequestUrl = "https://shopify.com/<my store id>/auth/oauth/token";

  const response = await fetch(tokenRequestUrl, {
    method: "POST",
    headers: headers,
    body: body,
  });

  if (!response.ok) {
    throw new Response(await response.text(), {
      status: response.status,
      headers: {
        "Content-Type": "text/html; charset=utf-8",
      },
    });
  }
  const { access_token, expires_in, id_token, refresh_token } =
    await response.json();

}

Thanks in advance. 

[ErSanjay]

@lizn  I can do the troubleshoot this issue.

[lizn]

Hi @ErSanjay  
If you can help me reach a solution that would be great. I'm attaching a screenshot of my console errors. As you can see I am getting the CORS error as described above. It's as if entering my endpoints for authorization in the headless app settings has no effect. What do you recommend I try next?

 

[andrewrobbins]

Hey Lizn—did you ever resolve this? I'm getting the same issue now.

[lizn]

I was able to get the auth token, but I wasn't able to use it to login the customer. 

I ended up going with a dedicated b2b shop with a super simple liquid theme.

[andrewrobbins]

Thanks for the response!

I ended up solving it. Apparently I wasn't passing all of the body parameters for the "/auth/oauth/token" endpoint.