How it works

Introduction

When a guest visits the page, there is no difference in how authentication works compared to our commercetools integration. Guest will use access tokens issued by commercetools and, if necessary, start an anonymous session (e.g., when they create a cart or add an item to it).

However, things change when a customer logs in. In this case, Auth0 issues them an access token, which is used instead of the commercetools token.

The following section explains how this token is requested, then sent, and validated by commercetools.

Flow breakdown

This package uses Authorization Code Flow with Proof Key for Code Exchange (PKCE) (opens new window) to request an access token from Auth0.

We can break down the whole flow into the following steps:

• (steps 1-4) When a customer clicks on the "Login" button, they are redirected to the authorization page.

• (steps 5-10) Once the customer is authenticated and gives consent, they are redirected to the application with an encrypted cookie.

• (steps 11-12) Encrypted cookie is included in every request to Vue Storefront Server Middleware. This token is included in all requests sent to the commercetools servers.

• (steps 13-15) Because Auth0 Tenant issues access tokens, commercetools cannot recognize them and read their scopes. For this reason, commercetools will send an introspection request to the Vue Storefront application to return information such as its status, scopes, and expiration time.

• (steps 16-17) If introspection is successful and token is active, commercetools will check if scopes allow access to the requested resources. If so, they will send a response.