REST API requests fail locally after migrating to v21

[emmenko]

When migrating the Custom Application to v21 (Org-level Custom Applications), some requests are now failing with Missing authentication token.

Example request:

const getOrders = () => {
  return fetch(
    `${mcApiUrl}/proxy/ctp/${projectKey}/orders`,
    {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    }
  )
}

Am I doing something wrong?

[emmenko]

Hi 👋,

In v21 local development of Custom Applications uses a new login workflow via OpenID Connect (OIDC). This results in having the session token stored in sessionStorage and requests must be authenticated using the Authentication HTTP header.

This is different from before, where we were using cookie based authentication.

See https://docs.commercetools.com/custom-applications/concepts/merchant-center-api#authentication

So if you configure the request manually, you need to pass the Authentication header.

The session token can be retrieved from sessionStorage:

const sessionToken = window.sessionStorage.getItem('sessionToken');

And pass it in the HTTP header

const getOrders = () => {
  return fetch(
    `${mcApiUrl}/proxy/ctp/${projectKey}/orders`,
    {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        Authorization: `Bearer ${sessionToken}`,
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    }
  )
}

NOTE that in production we still use cookies, so you should omit passing the Authorization header if there is no session token.

---

If you use the built-in Apollo client or the SDK (for REST requests), the requests are already properly configured.

However, if you use your own HTTP client and build the request on your own, you need to properly configure it.

We will improve the documentation to explain a bit more how to configure API requests, as well as providing more useful utility functions, if possible.