Auth0 integration for Vue Storefront

# Configuring session

# Introduction

There are three independent and separately configurable session layers that can be created when a customer logs in:

  • Application Session Layer,
  • Auth0 Session Layer,
  • Identity Provider Session Layer.

Since they are independent of each other, each of them can have a different session length and end separately. This means that customer may have an active session in the application, while their Auth0 session (or Google if they used social login) may have ended.

All session layers are explained in Session Layers (opens new window) article in Auth0 documentation.

# Logout users from Auth0 when they log off from the application

By default, when customers log out of the application, they will not be logged out of Auth0. This is because the application and Auth0 use different sessions.

This behavior can be changed using auth0 > configuration > oidc > idpLogout property in middleware.config.js. You can read more about it in the express-openid-connect documentation (opens new window).

# Using refresh tokens

The refresh token can be used to obtain a renewed access token. You can read more about them in the Refresh Tokens (opens new window) article in Auth0 documentation.

The integration will automatically renew the access token when the old one expires, and the refresh token is available. To enable it:

  1. In middleware.config.js, add offline_access to auth0 > configuration > oidc > authorizationParams > scope array (below openid scope).

    // middleware.config.js
module.exports = {
   integrations: {
      auth0: {
         oidc: {
            authorizationParams: {
               scope: [
               'openid',
               'offline_access',
               // other commercetools-specific scopes
               ].join(' ')
            }
         }
         }
      }
   }
};

  2. Go to Auth0 admin panel, open your API in Applications > APIs and enable Allow Offline Access.

Refresh tokens never expire

By default, refresh tokens allow users to remain authenticated forever. This can be a security risk, which can be mitigated with proper configuration.

We recommend reading the following articles:

# Force customer logout after inactivity

The instruction below shows how to configure the session so that customers will be logged out after being inactive for 1 minute.

  1. Enable refresh tokens, explained in the Using refresh tokens section.
  2. Open Auth0 admin panel.
  3. In the left upper corner, click the tenant name and open Settings. In Advanced tab change Inactivity timeout to 1 and Require log in after to 1.
  4. Open your Application in Applications > Applications:
    • enable Inactivity Expiration,
    • change Inactivity Lifetime to 120 (inactivity time in seconds)
  5. Open your API in Applications > APIs. Change Token Expiration (Seconds) and Token Expiration For Browser Flows (Seconds) to 60.

← useAuth0 →