Invalid grant type error during token exchange

[Katyf]

I'm using the createCustomerAccountClient utility in my hydrogen store and cannot successfully exchange the refresh token for a new access token. This is the function that fails (taken directly from this repo). This is a problem because the error clears the session and the user shows as not logged in every hour (although going through the entire auth process again, they are automatically logged in again without having to enter the code). I am using a local version of hydrogen in order to debug but have not made any changes to the createCustomerAccountClient functionality besides some console logs. I get an unsupported_grant_type error:

 {
  error: unsupported_grant_type,
  error_description: The access grant included - its type or another attribute - is not supported by the authorization server.
}

export async function exchangeAccessToken(
  authAccessToken: string | undefined,
  customerAccountId: string,
  customerAccountTokenExchangeUrl: string,
  httpsOrigin: string,
  debugInfo?: Partial<H2OEvent>,
) {
  const clientId = customerAccountId;
  if (!authAccessToken)
    throw new BadRequest(
      'Unauthorized',
      'oAuth access token was not provided during token exchange.',
    );

  const body = new URLSearchParams();

  body.append('grant_type', 'urn:ietf:params:oauth:grant-type:token-exchange');
  body.append('client_id', clientId);
  body.append('audience', CUSTOMER_API_CLIENT_ID);
  body.append('subject_token', authAccessToken);
  body.append(
    'subject_token_type',
    'urn:ietf:params:oauth:token-type:access_token',
  );
  body.append('scopes', 'https://api.customers.com/auth/customer.graphql');

  const headers = {
    'content-type': 'application/x-www-form-urlencoded',
    'User-Agent': USER_AGENT,
    Origin: httpsOrigin,
  };

  console.log('body', body.toString());


  const startTime = Date.now();
  const url = customerAccountTokenExchangeUrl;
  const response = await fetch(url, {
    method: 'POST',
    headers,
    body,
  });

  logSubRequestEvent?.({
    displayName: 'Customer Account API: access token exchange',
    url,
    startTime,
    response,
    ...debugInfo,
  });

  const data: AccessTokenResponse = await response.json();
  console.log('exchange token data', data);
  if (data.error) {
    console.log('exchange token data error');
    console.log(data.error_description)
    throw new BadRequest(data.error_description);
  }

  return data.access_token;
}

[seanparsons]

Have you added a call for createCustomerAccountClient? Or is this failure triggering in the already existing calls to it?

If you've added a call for it, could you paste that code here please as that may be part of the reason for the error you're seeing?

[Katyf]

I followed this guide: https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen

This is in my server.ts file:

 const customerAccount = createCustomerAccountClient({
        waitUntil,
        request,
        session: customerSession,
        customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID,
        shopId: env.SHOP_ID,
        authUrl: '/account/authorize',
      });

And the error is occurring after calling this function in a loader:

const isLoggedIn = await context.customerAccount.isLoggedIn();

The login works fine initially - this happens after an hour when the token expires and must be refreshed

[seanparsons]

We identified and fixed the issue: #2788

The change is quite small, so if this is a blocking issue it should be possible to patch your local version of Hydrogen until this change becomes available in a release convenient for you.

[Katyf]

It works, thank you!

[seanparsons]

Excellent news, thanks for the update!

[Katyf]

Do you have any idea when this would be released?