Session management
Vue Storefront integration for SAP Commerce Cloud provides an out-of-the-box token management mechanism. It interacts with SAP's Authorization Server (opens new window) to obtain, refresh or revoke tokens for both authenticated and anonymous users.
Proper configuration is required!
Make sure you have provided the correct values for clientId, clientSecret, and all OAuthServer properties in middleware.config.js. They are required for the token management mechanism to work properly.
Application session management
For all anonymous users visiting the application, Vue Storefront leverages a single access token obtained through the Client Credentials Flow (i.e. using clientId and clientSecret).
The token is requested for the first time during the application build and refreshed whenever some request using it yields a 401 (Unauthorized) error. The token is managed entirely by the API Middleware and never makes it to the browser of an anonymous user.
User session management
When a user logs in, the API Middleware leverages the Resource Owner Password Flow to request a dedicated access token on his behalf. Contrary to the application token, this token is passed on to the browser and stored as an HTTP cookie (opens new window).
Good to know
To minimize the risk of Cross-Site Scripting (XSS) attacks, the vsf-sap-token cookie is set with HttpOnly, Secure and SameSite: Strict flags. As a result, it cannot be accessed from Javascript by using document.cookie.
Refreshing expired access tokens
Whenever the access token expires, subsequent requests sent to SAP will fail with a 401 error. Vue Storefront will intercept those requests (before an error message is displayed to the user), refresh the expired access token, and re-send all failed requests. This way the session expiry does not affect the user experience.
Handling login on multiple devices
When a user starts two simultaneous sessions (e.g. one on his desktop and one on his smartphone), he will be issued the same set of access and refresh tokens by SAP's authorization server on both devices.
When the session expires and the first of the two devices refreshes the token, the other device will no longer be able to do it. That's because every refresh token can be used only once and then becomes invalid. Vue Storefront will handle that scenario gracefully by terminating the expired session on the second device and asking the user to log in again to resume it.