@commercetools-frontend/application-shell 21.23.10 → 21.24.1

package/dist/redirect-to-login-1b892ab5.esm.js

@@ -0,0 +1,147 @@
+import { useLocation } from 'react-router-dom';
+import { v4 } from 'uuid';
+import { LOGOUT_REASONS } from '@commercetools-frontend/constants';
+import { trimLeadingAndTrailingSlashes, joinPaths } from '@commercetools-frontend/url-utils';
+import { b as OIDC_RESPONSE_TYPES } from './constants-7f04db3f.esm.js';
+import { u as useIsServedByProxy } from './use-is-served-by-proxy-499bfa16.esm.js';
+import { g as getMcOrigin } from './get-mc-origin-5df60933.esm.js';
+import { b as buildOidcScope } from './oidc-10fa96f0.esm.js';
+import { b as getActiveProjectKey, p as setSessionScope, q as setSessionState } from './configure-apollo-cc0b1668.esm.js';
+import { R as Redirector } from './redirector-47a6be71.esm.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import '@commercetools-frontend/application-shell-connectors';
+import '@babel/runtime-corejs3/helpers/slicedToArray';
+import '@babel/runtime-corejs3/core-js-stable/url';
+import '@babel/runtime-corejs3/core-js-stable/instance/reverse';
+import '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import '@babel/runtime-corejs3/core-js-stable/instance/map';
+import '@babel/runtime-corejs3/core-js-stable/instance/for-each';
+import '@babel/runtime-corejs3/core-js-stable/object/keys';
+import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
+import '@babel/runtime-corejs3/core-js-stable/instance/filter';
+import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
+import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
+import '@babel/runtime-corejs3/core-js-stable/object/define-properties';
+import '@babel/runtime-corejs3/core-js-stable/object/define-property';
+import '@babel/runtime-corejs3/helpers/defineProperty';
+import '@babel/runtime-corejs3/core-js-stable/instance/reduce';
+import '@babel/runtime-corejs3/core-js-stable/object/entries';
+import '@babel/runtime-corejs3/core-js-stable/reflect/has';
+import '@reduxjs/toolkit';
+import 'lodash/mapValues';
+import 'omit-empty-es';
+import 'redux-thunk';
+import '@commercetools-frontend/notifications';
+import '@commercetools-frontend/sdk';
+import 'react';
+import '@babel/runtime-corejs3/core-js-stable/instance/index-of';
+import '@babel/runtime-corejs3/core-js-stable/instance/slice';
+import '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import '@commercetools-frontend/sentry';
+import '@commercetools-frontend/react-notifications';
+import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
+import 'redux-logger';
+import '@babel/runtime-corejs3/core-js-stable/instance/find';
+import '@apollo/client';
+import 'apollo-link-logger';
+import '@apollo/client/link/error';
+import '@commercetools-frontend/browser-history';
+import '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import '@babel/runtime-corejs3/core-js-stable/instance/some';
+import '@babel/runtime-corejs3/core-js-stable/object/values';
+import '@commercetools/http-user-agent';
+import '@babel/runtime-corejs3/core-js-stable/reflect/construct';
+import '@babel/runtime-corejs3/helpers/createClass';
+import '@babel/runtime-corejs3/helpers/classCallCheck';
+import '@babel/runtime-corejs3/helpers/assertThisInitialized';
+import '@babel/runtime-corejs3/helpers/inherits';
+import '@babel/runtime-corejs3/helpers/possibleConstructorReturn';
+import '@babel/runtime-corejs3/helpers/getPrototypeOf';
+import '@babel/runtime-corejs3/helpers/wrapNativeSuper';
+import '@babel/runtime-corejs3/core-js-stable/json/stringify';
+import '@apollo/client/link/retry';
+import 'prop-types';
+import 'qss';
+
+const generateAndCacheNonceWithState = state => {
+  const nonce = v4(); // We store additional information within the given `nonce`
+  // to then retrieve it later when the IdP redirects back
+  // to our application. The URL will contain the `nonce` within
+  // the id_token and, once validated, we can retrieve and use
+  // the state object.
+  // https://auth0.com/docs/protocols/oauth2/oauth-state#how-to-use-the-parameter-to-restore-application-state
+
+  setSessionState(nonce, state);
+  return nonce;
+};
+
+const RedirectToLogin = () => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+  const location = useLocation();
+  const servedByProxy = useIsServedByProxy();
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    var _window$app$__DEVELOP3, _window$app$__DEVELOP4, _window$app$__DEVELOP5, _window$app$__DEVELOP6, _window$app$__DEVELOP7, _window$app$__DEVELOP8, _window$app$__DEVELOP9, _window$app$__DEVELOP10;
+
+    // We pick the project key from local storage. This assumes that the value
+    // as been previously set when the application starts up.
+    // This is necessary to allow switching projects and triggering a new login.
+    const nextProjectKey = getActiveProjectKey(); // According to the OIDC spec, the `state` parameter is recommended to be sent
+    // to the authorization server to help mitigating Cross-Site Request Forgery.
+    // https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest
+    // Using `state` or `nonce` is very similar but with subtle differences.
+    // Here we follow the approach described by Auth0 on how to use both, where
+    // we generate a `nonce`, store it in session storage together with some state,
+    // and send it to the authorization server as the `state` parameter.
+    // https://auth0.com/docs/protocols/oauth2/redirect-users
+    // Additionally, we still send the `nonce` parameter as well.
+
+    const sessionId = generateAndCacheNonceWithState({
+      applicationId: window.app.applicationId,
+      // Store query parameters to be used after the callback redirect
+      query: {
+        redirectTo: nextProjectKey ? "/".concat(nextProjectKey) : '/'
+      }
+    });
+    const requestedScope = buildOidcScope({
+      projectKey: nextProjectKey !== null && nextProjectKey !== void 0 ? nextProjectKey : undefined,
+      oAuthScopes: (_window$app$__DEVELOP3 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP3 === void 0 ? void 0 : (_window$app$__DEVELOP4 = _window$app$__DEVELOP3.oidc) === null || _window$app$__DEVELOP4 === void 0 ? void 0 : _window$app$__DEVELOP4.oAuthScopes,
+      additionalOAuthScopes: (_window$app$__DEVELOP5 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP5 === void 0 ? void 0 : (_window$app$__DEVELOP6 = _window$app$__DEVELOP5.oidc) === null || _window$app$__DEVELOP6 === void 0 ? void 0 : _window$app$__DEVELOP6.additionalOAuthScopes,
+      teamId: (_window$app$__DEVELOP7 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP7 === void 0 ? void 0 : (_window$app$__DEVELOP8 = _window$app$__DEVELOP7.oidc) === null || _window$app$__DEVELOP8 === void 0 ? void 0 : _window$app$__DEVELOP8.teamId
+    }); // Store session scopes, to be able to detect if requested scopes changed
+    // in the application config and invalidate the session.
+    // This is only valid for local development.
+
+    setSessionScope(requestedScope);
+    return jsx(Redirector, {
+      to: "",
+      origin: (_window$app$__DEVELOP9 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP9 === void 0 ? void 0 : (_window$app$__DEVELOP10 = _window$app$__DEVELOP9.oidc) === null || _window$app$__DEVELOP10 === void 0 ? void 0 : _window$app$__DEVELOP10.authorizeUrl,
+      location: location,
+      queryParams: {
+        reason: LOGOUT_REASONS.UNAUTHORIZED,
+        // Query parameters for OIDC-lik workflow.
+        client_id: window.app.applicationId,
+        response_type: OIDC_RESPONSE_TYPES.ID_TOKEN,
+        scope: requestedScope,
+        state: sessionId,
+        nonce: sessionId
+      }
+    });
+  }
+
+  const mcOrigin = servedByProxy ? getMcOrigin(window.app.mcApiUrl) : undefined;
+  return jsx(Redirector, {
+    to: "login",
+    origin: mcOrigin,
+    location: location,
+    queryParams: {
+      reason: LOGOUT_REASONS.UNAUTHORIZED,
+      redirectTo: trimLeadingAndTrailingSlashes(joinPaths(window.location.origin, location.pathname))
+    }
+  });
+};
+
+RedirectToLogin.displayName = 'RedirectToLogin';
+
+export { RedirectToLogin as default };

package/dist/redirect-to-login-2be0e5db.cjs.prod.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var reactRouterDom = require('react-router-dom');
+var uuid = require('uuid');
+var constants = require('@commercetools-frontend/constants');
+var urlUtils = require('@commercetools-frontend/url-utils');
+var constants$1 = require('./constants-e6409334.cjs.prod.js');
+var useIsServedByProxy = require('./use-is-served-by-proxy-51e76976.cjs.prod.js');
+var getMcOrigin = require('./get-mc-origin-7968e04f.cjs.prod.js');
+var oidc = require('./oidc-540a091a.cjs.prod.js');
+var configureApollo = require('./configure-apollo-942ef373.cjs.prod.js');
+var redirector = require('./redirector-77ce2f5c.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@commercetools-frontend/application-shell-connectors');
+require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+require('@babel/runtime-corejs3/core-js-stable/object/keys');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('@babel/runtime-corejs3/helpers/defineProperty');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('react');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/sentry');
+require('@commercetools-frontend/react-notifications');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('redux-logger');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@apollo/client');
+require('apollo-link-logger');
+require('@apollo/client/link/error');
+require('@commercetools-frontend/browser-history');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@commercetools/http-user-agent');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/assertThisInitialized');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@apollo/client/link/retry');
+require('prop-types');
+require('qss');
+
+const generateAndCacheNonceWithState = state => {
+  const nonce = uuid.v4(); // We store additional information within the given `nonce`
+  // to then retrieve it later when the IdP redirects back
+  // to our application. The URL will contain the `nonce` within
+  // the id_token and, once validated, we can retrieve and use
+  // the state object.
+  // https://auth0.com/docs/protocols/oauth2/oauth-state#how-to-use-the-parameter-to-restore-application-state
+
+  configureApollo.setSessionState(nonce, state);
+  return nonce;
+};
+
+const RedirectToLogin = () => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+  const location = reactRouterDom.useLocation();
+  const servedByProxy = useIsServedByProxy.useIsServedByProxy();
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    var _window$app$__DEVELOP3, _window$app$__DEVELOP4, _window$app$__DEVELOP5, _window$app$__DEVELOP6, _window$app$__DEVELOP7, _window$app$__DEVELOP8, _window$app$__DEVELOP9, _window$app$__DEVELOP10;
+
+    // We pick the project key from local storage. This assumes that the value
+    // as been previously set when the application starts up.
+    // This is necessary to allow switching projects and triggering a new login.
+    const nextProjectKey = configureApollo.getActiveProjectKey(); // According to the OIDC spec, the `state` parameter is recommended to be sent
+    // to the authorization server to help mitigating Cross-Site Request Forgery.
+    // https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest
+    // Using `state` or `nonce` is very similar but with subtle differences.
+    // Here we follow the approach described by Auth0 on how to use both, where
+    // we generate a `nonce`, store it in session storage together with some state,
+    // and send it to the authorization server as the `state` parameter.
+    // https://auth0.com/docs/protocols/oauth2/redirect-users
+    // Additionally, we still send the `nonce` parameter as well.
+
+    const sessionId = generateAndCacheNonceWithState({
+      applicationId: window.app.applicationId,
+      // Store query parameters to be used after the callback redirect
+      query: {
+        redirectTo: nextProjectKey ? "/".concat(nextProjectKey) : '/'
+      }
+    });
+    const requestedScope = oidc.buildOidcScope({
+      projectKey: nextProjectKey !== null && nextProjectKey !== void 0 ? nextProjectKey : undefined,
+      oAuthScopes: (_window$app$__DEVELOP3 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP3 === void 0 ? void 0 : (_window$app$__DEVELOP4 = _window$app$__DEVELOP3.oidc) === null || _window$app$__DEVELOP4 === void 0 ? void 0 : _window$app$__DEVELOP4.oAuthScopes,
+      additionalOAuthScopes: (_window$app$__DEVELOP5 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP5 === void 0 ? void 0 : (_window$app$__DEVELOP6 = _window$app$__DEVELOP5.oidc) === null || _window$app$__DEVELOP6 === void 0 ? void 0 : _window$app$__DEVELOP6.additionalOAuthScopes,
+      teamId: (_window$app$__DEVELOP7 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP7 === void 0 ? void 0 : (_window$app$__DEVELOP8 = _window$app$__DEVELOP7.oidc) === null || _window$app$__DEVELOP8 === void 0 ? void 0 : _window$app$__DEVELOP8.teamId
+    }); // Store session scopes, to be able to detect if requested scopes changed
+    // in the application config and invalidate the session.
+    // This is only valid for local development.
+
+    configureApollo.setSessionScope(requestedScope);
+    return jsxRuntime.jsx(redirector.Redirector, {
+      to: "",
+      origin: (_window$app$__DEVELOP9 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP9 === void 0 ? void 0 : (_window$app$__DEVELOP10 = _window$app$__DEVELOP9.oidc) === null || _window$app$__DEVELOP10 === void 0 ? void 0 : _window$app$__DEVELOP10.authorizeUrl,
+      location: location,
+      queryParams: {
+        reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+        // Query parameters for OIDC-lik workflow.
+        client_id: window.app.applicationId,
+        response_type: constants$1.OIDC_RESPONSE_TYPES.ID_TOKEN,
+        scope: requestedScope,
+        state: sessionId,
+        nonce: sessionId
+      }
+    });
+  }
+
+  const mcOrigin = servedByProxy ? getMcOrigin.getMcOrigin(window.app.mcApiUrl) : undefined;
+  return jsxRuntime.jsx(redirector.Redirector, {
+    to: "login",
+    origin: mcOrigin,
+    location: location,
+    queryParams: {
+      reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+      redirectTo: urlUtils.trimLeadingAndTrailingSlashes(urlUtils.joinPaths(window.location.origin, location.pathname))
+    }
+  });
+};
+
+RedirectToLogin.displayName = 'RedirectToLogin';
+
+exports["default"] = RedirectToLogin;

package/dist/redirect-to-login-64230f67.cjs.dev.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var reactRouterDom = require('react-router-dom');
+var uuid = require('uuid');
+var constants = require('@commercetools-frontend/constants');
+var urlUtils = require('@commercetools-frontend/url-utils');
+var constants$1 = require('./constants-e6f058e5.cjs.dev.js');
+var useIsServedByProxy = require('./use-is-served-by-proxy-2b4916e5.cjs.dev.js');
+var getMcOrigin = require('./get-mc-origin-314b77a2.cjs.dev.js');
+var oidc = require('./oidc-0638d0c8.cjs.dev.js');
+var configureApollo = require('./configure-apollo-a6f03ff8.cjs.dev.js');
+var redirector = require('./redirector-0d98f9df.cjs.dev.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@commercetools-frontend/application-shell-connectors');
+require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+require('@babel/runtime-corejs3/core-js-stable/object/keys');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('@babel/runtime-corejs3/helpers/defineProperty');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('react');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/sentry');
+require('@commercetools-frontend/react-notifications');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('redux-logger');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@apollo/client');
+require('apollo-link-logger');
+require('@apollo/client/link/error');
+require('@commercetools-frontend/browser-history');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@commercetools/http-user-agent');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/assertThisInitialized');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@apollo/client/link/retry');
+require('prop-types');
+require('qss');
+
+const generateAndCacheNonceWithState = state => {
+  const nonce = uuid.v4(); // We store additional information within the given `nonce`
+  // to then retrieve it later when the IdP redirects back
+  // to our application. The URL will contain the `nonce` within
+  // the id_token and, once validated, we can retrieve and use
+  // the state object.
+  // https://auth0.com/docs/protocols/oauth2/oauth-state#how-to-use-the-parameter-to-restore-application-state
+
+  configureApollo.setSessionState(nonce, state);
+  return nonce;
+};
+
+const RedirectToLogin = () => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2;
+
+  const location = reactRouterDom.useLocation();
+  const servedByProxy = useIsServedByProxy.useIsServedByProxy();
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    var _window$app$__DEVELOP3, _window$app$__DEVELOP4, _window$app$__DEVELOP5, _window$app$__DEVELOP6, _window$app$__DEVELOP7, _window$app$__DEVELOP8, _window$app$__DEVELOP9, _window$app$__DEVELOP10;
+
+    // We pick the project key from local storage. This assumes that the value
+    // as been previously set when the application starts up.
+    // This is necessary to allow switching projects and triggering a new login.
+    const nextProjectKey = configureApollo.getActiveProjectKey(); // According to the OIDC spec, the `state` parameter is recommended to be sent
+    // to the authorization server to help mitigating Cross-Site Request Forgery.
+    // https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest
+    // Using `state` or `nonce` is very similar but with subtle differences.
+    // Here we follow the approach described by Auth0 on how to use both, where
+    // we generate a `nonce`, store it in session storage together with some state,
+    // and send it to the authorization server as the `state` parameter.
+    // https://auth0.com/docs/protocols/oauth2/redirect-users
+    // Additionally, we still send the `nonce` parameter as well.
+
+    const sessionId = generateAndCacheNonceWithState({
+      applicationId: window.app.applicationId,
+      // Store query parameters to be used after the callback redirect
+      query: {
+        redirectTo: nextProjectKey ? "/".concat(nextProjectKey) : '/'
+      }
+    });
+    const requestedScope = oidc.buildOidcScope({
+      projectKey: nextProjectKey !== null && nextProjectKey !== void 0 ? nextProjectKey : undefined,
+      oAuthScopes: (_window$app$__DEVELOP3 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP3 === void 0 ? void 0 : (_window$app$__DEVELOP4 = _window$app$__DEVELOP3.oidc) === null || _window$app$__DEVELOP4 === void 0 ? void 0 : _window$app$__DEVELOP4.oAuthScopes,
+      additionalOAuthScopes: (_window$app$__DEVELOP5 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP5 === void 0 ? void 0 : (_window$app$__DEVELOP6 = _window$app$__DEVELOP5.oidc) === null || _window$app$__DEVELOP6 === void 0 ? void 0 : _window$app$__DEVELOP6.additionalOAuthScopes,
+      teamId: (_window$app$__DEVELOP7 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP7 === void 0 ? void 0 : (_window$app$__DEVELOP8 = _window$app$__DEVELOP7.oidc) === null || _window$app$__DEVELOP8 === void 0 ? void 0 : _window$app$__DEVELOP8.teamId
+    }); // Store session scopes, to be able to detect if requested scopes changed
+    // in the application config and invalidate the session.
+    // This is only valid for local development.
+
+    configureApollo.setSessionScope(requestedScope);
+    return jsxRuntime.jsx(redirector.Redirector, {
+      to: "",
+      origin: (_window$app$__DEVELOP9 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP9 === void 0 ? void 0 : (_window$app$__DEVELOP10 = _window$app$__DEVELOP9.oidc) === null || _window$app$__DEVELOP10 === void 0 ? void 0 : _window$app$__DEVELOP10.authorizeUrl,
+      location: location,
+      queryParams: {
+        reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+        // Query parameters for OIDC-lik workflow.
+        client_id: window.app.applicationId,
+        response_type: constants$1.OIDC_RESPONSE_TYPES.ID_TOKEN,
+        scope: requestedScope,
+        state: sessionId,
+        nonce: sessionId
+      }
+    });
+  }
+
+  const mcOrigin = servedByProxy ? getMcOrigin.getMcOrigin(window.app.mcApiUrl) : undefined;
+  return jsxRuntime.jsx(redirector.Redirector, {
+    to: "login",
+    origin: mcOrigin,
+    location: location,
+    queryParams: {
+      reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+      redirectTo: urlUtils.trimLeadingAndTrailingSlashes(urlUtils.joinPaths(window.location.origin, location.pathname))
+    }
+  });
+};
+
+RedirectToLogin.displayName = 'RedirectToLogin';
+
+exports["default"] = RedirectToLogin;

package/dist/redirect-to-logout-15810ffb.cjs.dev.js

@@ -0,0 +1,151 @@
+'use strict';
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var reactRouterDom = require('react-router-dom');
+var constants = require('@commercetools-frontend/constants');
+var useIsServedByProxy = require('./use-is-served-by-proxy-2b4916e5.cjs.dev.js');
+var getMcOrigin = require('./get-mc-origin-314b77a2.cjs.dev.js');
+var configureApollo = require('./configure-apollo-a6f03ff8.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-b9b8b690.cjs.dev.js');
+var redirector = require('./redirector-0d98f9df.cjs.dev.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('@commercetools-frontend/application-shell-connectors');
+require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('react');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/sentry');
+require('./constants-e6f058e5.cjs.dev.js');
+require('@commercetools-frontend/react-notifications');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('redux-logger');
+require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@apollo/client');
+require('apollo-link-logger');
+require('@apollo/client/link/error');
+require('@commercetools-frontend/browser-history');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+require('@babel/runtime-corejs3/core-js-stable/instance/map');
+require('@commercetools/http-user-agent');
+require('uuid');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/assertThisInitialized');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@apollo/client/link/retry');
+require('prop-types');
+require('@emotion/styled/base');
+require('@emotion/react');
+require('@commercetools-frontend/application-components');
+require('@commercetools-frontend/i18n');
+require('@commercetools-frontend/assets/images/logo.svg');
+require('@commercetools-uikit/design-system');
+require('@commercetools-uikit/spacings');
+require('react-intl');
+require('@commercetools-uikit/flat-button');
+require('@commercetools-uikit/icons');
+require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('memoize-one');
+require('@commercetools-uikit/accessible-hidden');
+require('@commercetools-uikit/select-input');
+require('@apollo/client/react');
+require('@commercetools-frontend/assets/images/ct-logo.svg');
+require('@commercetools-uikit/loading-spinner');
+require('@commercetools-frontend/l10n');
+require('lodash/camelCase');
+require('@babel/runtime-corejs3/core-js-stable/array/from');
+require('@babel/runtime-corejs3/core-js-stable/instance/every');
+require('@flopflip/react-broadcast');
+require('classnames');
+require('@commercetools-frontend/assets/images/diagonal-line.svg');
+require('@commercetools-frontend/permissions');
+require('@commercetools-uikit/icons/inline-svg');
+require('lodash/isNil');
+require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/flags');
+require('@flopflip/combine-adapters');
+require('@flopflip/http-adapter');
+require('@flopflip/launchdarkly-adapter');
+require('perfume.js');
+require('react-redux');
+require('lodash/upperFirst');
+require('./oidc-0638d0c8.cjs.dev.js');
+require('@commercetools-uikit/design-system/materials/resets.css');
+require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/application-config/ssr');
+require('qss');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+// When the application redirects to this route, we always force a hard redirect
+// to the logout route of the authentication service.
+const RedirectToLogout = props => {
+  var _window$app$__DEVELOP, _window$app$__DEVELOP2, _props$reason;
+
+  const location = reactRouterDom.useLocation();
+  const servedByProxy = useIsServedByProxy.useIsServedByProxy();
+
+  if ((_window$app$__DEVELOP = window.app.__DEVELOPMENT__) !== null && _window$app$__DEVELOP !== void 0 && (_window$app$__DEVELOP2 = _window$app$__DEVELOP.oidc) !== null && _window$app$__DEVELOP2 !== void 0 && _window$app$__DEVELOP2.authorizeUrl) {
+    // Remove the `sessionToken` from storage, so that the AppShell can initiate
+    // a new authorization flow.
+    configureApollo.clearSession();
+    return jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.RedirectToLogin, {});
+  }
+
+  const mcOrigin = servedByProxy ? getMcOrigin.getMcOrigin(window.app.mcApiUrl) : undefined;
+  return jsxRuntime.jsx(redirector.Redirector, {
+    to: "logout",
+    origin: mcOrigin,
+    location: location,
+    queryParams: _objectSpread({
+      reason: (_props$reason = props.reason) !== null && _props$reason !== void 0 ? _props$reason : constants.LOGOUT_REASONS.USER
+    }, servedByProxy ? {} : {
+      // This will be used after being logged in, to redirect to this location.
+      redirectTo: window.location.origin
+    })
+  });
+};
+
+exports["default"] = RedirectToLogout;