Add server access token

[sync-by-unito]

Background

PR#6321 and PR#6329 changed the way we handle authentication in our commercetools integration.

PR#6321 added server-specific API credentials. Server Middleware uses these credentials when operation requires permissions higher than what regular guests or customers should have. Examples are reviews that need manage_product and password reset that need manage_customers.

PR#6329 refactored the way we handle access tokens during Server Side Rendering. In the past, access tokens were not saved during SSR, meaning that each request to the API resulted in an additional call to the commercetools auth service to generate an access token. This behavior resulted in poor performance. Now when we visit the page, the new Nuxt.js plugin:

• During SSR, it requests an access token and adds it to Axios headers. This way, it doesn’t have to be requested for every API call. Calling accessToken endpoint with true will not add a cookie to the response (CDN doesn’t cache responses containing cookies).
• When the application starts in the browser, it requests an access token. The response includes a cookie used in the following requests to the API.

Problem

When the user visits the page for the first time, two requests are sent to the commercetools authentication service - one during SSR and the other in the browser (see requests to auth.sphere.io in the attached requests.JPG image). Additionally, all guests share the same access tokens until they add items to the cart/wishlist or log in.

Additionally, all user-specific composables can no longer be called during SSR (onSSR) but only in the browser (onMounted).

Solution

We want to improve the performance further and avoid creating cookies for guests. Because the guest access token is visitor-independent, we can request it on the server and use it for all guest requests. The server should not create cookies until the customer logs in or performs an operation that requires an anonymous session (adding items to the cart/wishlist).

When Server Middleware starts, it should request guest and server access tokens and refresh them when they expire.

When Server Middleware receives a request, it should:

• use the server access token when operation requires high permissions,
• use the token from the request’s cookie (anonymous and user sessions),
• use the guest access token for all other requests.

accessToken plugin (packages/commercetools/api-client/src/api/accessToken/index.ts) and endpoint (packages/commercetools/api-client/src/api/accessToken/index.ts) should be removed because they will no longer be needed.

See if it’s possible to revert changes in the Vue components that PR#6329 introduced. More specifically, we hope to use onSSR instead of onMounted to load user-specific composables. If onSSR can be used, update the components to use it and remove information about the breaking changes from the changelogs added in the above PR.

For better debugging, set up HttpToolKit to intercept requests.

[sync-by-unito]

➤ Filip Sobol commented:

#6365 ( https://github.com/vuestorefront/vue-storefront/issues/6365|smart-link )

[sync-by-unito]

➤ Rafał Dobrowolski commented:

PR - #6467 ( https://github.com/vuestorefront/vue-storefront/pull/6467|smart-link )