# Release notes v1.2.0

# Introduction

In this release, we:

  • enabled configuration of cookie options in middleware.config.js file,
  • added a new property ssrMiddlewareUrl to publicRuntimeConfig in the nuxt.config.js file to communicate with API middleware on the server-side.

# Why?

The Multi-store feature requires having multiple domains that are communicating with the same API. To have proper communication and be able to set the cookies, you must set set up specific cookie options: sameSite: none in your middleware.config.js. Unfortunately, this option is not supported in Safari browsers, which we want to support. The standard project deployed on the VSF infrastructure can use sameSite: strict cookie option, but it requires the usage of /api as the middleware URL used on client-side and full URL used on server-side.

WARNING

If both your Nuxt server and middleware node server are in the same subnetwork then you could configure ssrMiddlewareUrl to communicate through LAN instead of the internet. You can do that by providing an address to the middleware's node server resolvable from Nuxt server.

# Migration guide

# Updating getIntegrationConfig

_proxyUtils.ts requires updating the condition to also look for context.req.headers['x-forwarded-host'] as the Host header for axios requests.

# modules/epcc/helpers/_proxyUtils.ts

export const getIntegrationConfig = (
  context: NuxtContext,
  configuration: object
): IntegrationConfig => {
  const cookie = getHTTPRequestCookies(context);
  return merge(
    {
      axios: {
        baseURL: getBaseUrl(context?.req, context?.base),
        withCredentials: true,
        headers: {
          ...(cookie ? { cookie } : {}),
-         ...(context.req ? { Host: context.req.headers.host } : {})          
+         ...(context.req ? { Host: context.req.headers['x-forwarded-host'] || context.req.headers.host } : {})
        }
      }
    },
    configuration
  );
};

To customize cookie options, you just need to add the cookie_options property to the configuration of your integration in the middleware.config.js file.

# middleware.config.js

module.exports = {
  integrations: {
    epcc: {
      location: '@vsf-enterprise/epcc-api/server',
      configuration: {
        multistore,
+       cookie_options: {
+         httpOnly: true,
+         secure: true,
+         sameSite: 'lax'
+       }
        secure_cookies: process.env.NODE_ENV === 'production',
        forgotten_password_token_expiration: '10m',
        tax_data: {
          en: {
            default: {
              rate: 0.2
            },
            reduced: {
              rate: 0.3
            }
          },
          pl: {
            default: {
              rate: 0.23
            },
            medical: {
              rate: 0.08
            }
          }
        }
      }
    }
  }
};

It's a non-breaking change, default cookie options look like this:

const defaultCookieOptions = {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'
};

# Using middleware URLs for server-side and client-side

nuxt.config.js requires adding detection ssrMiddlewareUrl based on API_SSR_BASE_URL environment variable.

# nuxt.config.js


// Client side middleware url
const middlewareUrl = process.env.NODE_ENV === 'production'
  ? process.env.API_BASE_URL
  : 'http://localhost:8181/';

+ // Server side middleware url
+ const ssrMiddlewareUrl = process.env.NODE_ENV === 'production'
+   ? process.env.API_SSR_BASE_URL
+   : 'http://localhost:8181/';

export default {
  ...

  publicRuntimeConfig: {
    theme,
    middlewareUrl,
+   ssrMiddlewareUrl
  },
}
Introduction →