@commercetools-frontend/mc-dev-authentication 23.1.0 → 23.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commercetools-frontend-mc-dev-authentication.cjs.dev.js +16 -74
- package/dist/commercetools-frontend-mc-dev-authentication.cjs.prod.js +16 -74
- package/dist/commercetools-frontend-mc-dev-authentication.esm.js +14 -71
- package/dist/declarations/src/transformer-local.d.ts +1 -2
- package/dist/declarations/src/types.d.ts +0 -5
- package/package.json +2 -2
- package/dist/declarations/src/pages.d.ts +0 -3
- package/dist/declarations/src/routes/index.d.ts +0 -1
- package/dist/declarations/src/routes/logout.d.ts +0 -4
|
@@ -3,39 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var path = require('path');
|
|
6
|
+
var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
|
|
7
|
+
var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
|
|
9
8
|
|
|
10
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
11
10
|
|
|
12
11
|
var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
12
|
+
var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
|
|
13
|
+
var _URL__default = /*#__PURE__*/_interopDefault(_URL);
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
var _context;
|
|
19
|
-
let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
20
|
-
// NOTE: removing the cookie only works if your are running the MC API
|
|
21
|
-
// locally, otherwise the cookie won't get removed as it's set to a
|
|
22
|
-
// proper domain (e.g. commercetools.com), which we can't unset from localhost.
|
|
23
|
-
response.setHeader('Set-Cookie', _concatInstanceProperty__default["default"](_context = [`mcAccessToken=''`,
|
|
24
|
-
// <-- unset the value
|
|
25
|
-
'Path=/', `Expires=${new Date(0).toUTCString()}`,
|
|
26
|
-
// <-- put a date in the past
|
|
27
|
-
'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
|
|
31
|
-
const pages$1 = {
|
|
32
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
33
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
34
|
-
};
|
|
35
|
-
const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
|
|
15
|
+
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
36
16
|
function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
37
|
-
const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
|
|
38
|
-
const htmlLogout = pages$1.logoutPage;
|
|
39
17
|
const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
|
|
40
18
|
return (request, response, next) => {
|
|
41
19
|
if (request.originalUrl === '/api/graphql') {
|
|
@@ -47,63 +25,27 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
|
47
25
|
return;
|
|
48
26
|
}
|
|
49
27
|
if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
|
|
28
|
+
var _context;
|
|
50
29
|
// Handle login page for OIDC workflow when developing against a local MC API.
|
|
51
|
-
if (applicationConfig.env.__DEVELOPMENT__
|
|
30
|
+
if (_startsWithInstanceProperty__default["default"](_context = applicationConfig.env.__DEVELOPMENT__.oidc.authorizeUrl).call(_context, 'http://localhost')) {
|
|
52
31
|
if (request.originalUrl?.startsWith('/login/authorize')) {
|
|
53
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
response.
|
|
32
|
+
if (!isDevAuthenticationMiddlewareDisabled) {
|
|
33
|
+
// Redirect to the MC API to initiate the authorize flow.
|
|
34
|
+
const redirectTo = new _URL__default["default"](request.originalUrl, trimTrailingSlash(applicationConfig.env.mcApiUrl));
|
|
35
|
+
response.writeHead(301, {
|
|
36
|
+
Location: redirectTo.toString()
|
|
37
|
+
}).end();
|
|
38
|
+
return;
|
|
57
39
|
}
|
|
58
|
-
return;
|
|
59
40
|
}
|
|
60
41
|
}
|
|
61
|
-
} else {
|
|
62
|
-
if (request.originalUrl === '/login') {
|
|
63
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
64
|
-
next();
|
|
65
|
-
} else {
|
|
66
|
-
response.end(htmlLogin);
|
|
67
|
-
}
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (request.originalUrl === '/logout') {
|
|
71
|
-
logoutRoute(response);
|
|
72
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
73
|
-
next();
|
|
74
|
-
} else {
|
|
75
|
-
response.end(htmlLogout);
|
|
76
|
-
}
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
42
|
}
|
|
80
43
|
next();
|
|
81
44
|
};
|
|
82
45
|
}
|
|
83
46
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
87
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
88
|
-
};
|
|
89
|
-
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
90
|
-
|
|
91
|
-
// Make sure any symlinks in the project folder are resolved:
|
|
92
|
-
// https://github.com/facebook/create-react-app/issues/637
|
|
93
|
-
const appDirectory = fs__default["default"].realpathSync(process.cwd());
|
|
94
|
-
const resolveApp = relativePath => path__default["default"].resolve(appDirectory, relativePath);
|
|
95
|
-
const paths = {
|
|
96
|
-
appBuild: resolveApp('public')
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
// This transformer will generate a development `login` and `logout` HTML files
|
|
100
|
-
// and copy them to the application public folder.
|
|
101
|
-
// This is necessary to run the application locally in production mode.
|
|
102
|
-
const transformerLocal = compiledHtml => {
|
|
103
|
-
const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
|
|
104
|
-
const htmlLogout = pages.logoutPage;
|
|
105
|
-
fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
|
|
106
|
-
fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
|
|
47
|
+
const transformerLocal = () => {
|
|
48
|
+
// noop
|
|
107
49
|
};
|
|
108
50
|
|
|
109
51
|
exports.createMcDevAuthenticationMiddleware = createMcDevAuthenticationMiddleware;
|
|
@@ -3,39 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var path = require('path');
|
|
6
|
+
var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
|
|
7
|
+
var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
|
|
9
8
|
|
|
10
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
11
10
|
|
|
12
11
|
var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
12
|
+
var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
|
|
13
|
+
var _URL__default = /*#__PURE__*/_interopDefault(_URL);
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
var _context;
|
|
19
|
-
let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
20
|
-
// NOTE: removing the cookie only works if your are running the MC API
|
|
21
|
-
// locally, otherwise the cookie won't get removed as it's set to a
|
|
22
|
-
// proper domain (e.g. commercetools.com), which we can't unset from localhost.
|
|
23
|
-
response.setHeader('Set-Cookie', _concatInstanceProperty__default["default"](_context = [`mcAccessToken=''`,
|
|
24
|
-
// <-- unset the value
|
|
25
|
-
'Path=/', `Expires=${new Date(0).toUTCString()}`,
|
|
26
|
-
// <-- put a date in the past
|
|
27
|
-
'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
|
|
31
|
-
const pages$1 = {
|
|
32
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
33
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
34
|
-
};
|
|
35
|
-
const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
|
|
15
|
+
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
36
16
|
function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
37
|
-
const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
|
|
38
|
-
const htmlLogout = pages$1.logoutPage;
|
|
39
17
|
const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
|
|
40
18
|
return (request, response, next) => {
|
|
41
19
|
if (request.originalUrl === '/api/graphql') {
|
|
@@ -47,63 +25,27 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
|
47
25
|
return;
|
|
48
26
|
}
|
|
49
27
|
if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
|
|
28
|
+
var _context;
|
|
50
29
|
// Handle login page for OIDC workflow when developing against a local MC API.
|
|
51
|
-
if (applicationConfig.env.__DEVELOPMENT__
|
|
30
|
+
if (_startsWithInstanceProperty__default["default"](_context = applicationConfig.env.__DEVELOPMENT__.oidc.authorizeUrl).call(_context, 'http://localhost')) {
|
|
52
31
|
if (request.originalUrl?.startsWith('/login/authorize')) {
|
|
53
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
response.
|
|
32
|
+
if (!isDevAuthenticationMiddlewareDisabled) {
|
|
33
|
+
// Redirect to the MC API to initiate the authorize flow.
|
|
34
|
+
const redirectTo = new _URL__default["default"](request.originalUrl, trimTrailingSlash(applicationConfig.env.mcApiUrl));
|
|
35
|
+
response.writeHead(301, {
|
|
36
|
+
Location: redirectTo.toString()
|
|
37
|
+
}).end();
|
|
38
|
+
return;
|
|
57
39
|
}
|
|
58
|
-
return;
|
|
59
40
|
}
|
|
60
41
|
}
|
|
61
|
-
} else {
|
|
62
|
-
if (request.originalUrl === '/login') {
|
|
63
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
64
|
-
next();
|
|
65
|
-
} else {
|
|
66
|
-
response.end(htmlLogin);
|
|
67
|
-
}
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (request.originalUrl === '/logout') {
|
|
71
|
-
logoutRoute(response);
|
|
72
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
73
|
-
next();
|
|
74
|
-
} else {
|
|
75
|
-
response.end(htmlLogout);
|
|
76
|
-
}
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
42
|
}
|
|
80
43
|
next();
|
|
81
44
|
};
|
|
82
45
|
}
|
|
83
46
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
87
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
88
|
-
};
|
|
89
|
-
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
90
|
-
|
|
91
|
-
// Make sure any symlinks in the project folder are resolved:
|
|
92
|
-
// https://github.com/facebook/create-react-app/issues/637
|
|
93
|
-
const appDirectory = fs__default["default"].realpathSync(process.cwd());
|
|
94
|
-
const resolveApp = relativePath => path__default["default"].resolve(appDirectory, relativePath);
|
|
95
|
-
const paths = {
|
|
96
|
-
appBuild: resolveApp('public')
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
// This transformer will generate a development `login` and `logout` HTML files
|
|
100
|
-
// and copy them to the application public folder.
|
|
101
|
-
// This is necessary to run the application locally in production mode.
|
|
102
|
-
const transformerLocal = compiledHtml => {
|
|
103
|
-
const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
|
|
104
|
-
const htmlLogout = pages.logoutPage;
|
|
105
|
-
fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
|
|
106
|
-
fs__default["default"].writeFileSync(path__default["default"].join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
|
|
47
|
+
const transformerLocal = () => {
|
|
48
|
+
// noop
|
|
107
49
|
};
|
|
108
50
|
|
|
109
51
|
exports.createMcDevAuthenticationMiddleware = createMcDevAuthenticationMiddleware;
|
|
@@ -1,30 +1,9 @@
|
|
|
1
1
|
import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import path from 'path';
|
|
2
|
+
import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
|
|
3
|
+
import _URL from '@babel/runtime-corejs3/core-js-stable/url';
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
var _context;
|
|
8
|
-
let additionalCookieParameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
9
|
-
// NOTE: removing the cookie only works if your are running the MC API
|
|
10
|
-
// locally, otherwise the cookie won't get removed as it's set to a
|
|
11
|
-
// proper domain (e.g. commercetools.com), which we can't unset from localhost.
|
|
12
|
-
response.setHeader('Set-Cookie', _concatInstanceProperty(_context = [`mcAccessToken=''`,
|
|
13
|
-
// <-- unset the value
|
|
14
|
-
'Path=/', `Expires=${new Date(0).toUTCString()}`,
|
|
15
|
-
// <-- put a date in the past
|
|
16
|
-
'HttpOnly']).call(_context, additionalCookieParameters).join('; '));
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
|
|
20
|
-
const pages$1 = {
|
|
21
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
22
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
23
|
-
};
|
|
24
|
-
const trimTrailingSlash$1 = value => value.replace(/\/$/, '');
|
|
5
|
+
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
25
6
|
function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
26
|
-
const htmlLogin = pages$1.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash$1(applicationConfig.env.mcApiUrl));
|
|
27
|
-
const htmlLogout = pages$1.logoutPage;
|
|
28
7
|
const isDevAuthenticationMiddlewareDisabled = String(applicationConfig.env.disableAuthRoutesOfDevServer) === 'true' || applicationConfig.env.servedByProxy;
|
|
29
8
|
return (request, response, next) => {
|
|
30
9
|
if (request.originalUrl === '/api/graphql') {
|
|
@@ -36,63 +15,27 @@ function createMcDevAuthenticationMiddleware(applicationConfig) {
|
|
|
36
15
|
return;
|
|
37
16
|
}
|
|
38
17
|
if (applicationConfig.env.__DEVELOPMENT__?.oidc?.authorizeUrl) {
|
|
18
|
+
var _context;
|
|
39
19
|
// Handle login page for OIDC workflow when developing against a local MC API.
|
|
40
|
-
if (applicationConfig.env.__DEVELOPMENT__
|
|
20
|
+
if (_startsWithInstanceProperty(_context = applicationConfig.env.__DEVELOPMENT__.oidc.authorizeUrl).call(_context, 'http://localhost')) {
|
|
41
21
|
if (request.originalUrl?.startsWith('/login/authorize')) {
|
|
42
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
response.
|
|
22
|
+
if (!isDevAuthenticationMiddlewareDisabled) {
|
|
23
|
+
// Redirect to the MC API to initiate the authorize flow.
|
|
24
|
+
const redirectTo = new _URL(request.originalUrl, trimTrailingSlash(applicationConfig.env.mcApiUrl));
|
|
25
|
+
response.writeHead(301, {
|
|
26
|
+
Location: redirectTo.toString()
|
|
27
|
+
}).end();
|
|
28
|
+
return;
|
|
46
29
|
}
|
|
47
|
-
return;
|
|
48
30
|
}
|
|
49
31
|
}
|
|
50
|
-
} else {
|
|
51
|
-
if (request.originalUrl === '/login') {
|
|
52
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
53
|
-
next();
|
|
54
|
-
} else {
|
|
55
|
-
response.end(htmlLogin);
|
|
56
|
-
}
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
if (request.originalUrl === '/logout') {
|
|
60
|
-
logoutRoute(response);
|
|
61
|
-
if (isDevAuthenticationMiddlewareDisabled) {
|
|
62
|
-
next();
|
|
63
|
-
} else {
|
|
64
|
-
response.end(htmlLogout);
|
|
65
|
-
}
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
32
|
}
|
|
69
33
|
next();
|
|
70
34
|
};
|
|
71
35
|
}
|
|
72
36
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
"loginPage": "<html>\n <head>\n <title>Login (development only)</title>\n <style>\n html,\n body {\n font: 1em sans-serif;\n padding: 0;\n margin: 0;\n height: 100vh;\n width: 100vw;\n }\n\n body {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n margin-top: 32px;\n }\n\n body > * + * {\n margin-top: 32px;\n }\n\n .title {\n width: 355px;\n }\n\n form {\n display: flex;\n flex-direction: column;\n width: 355px;\n }\n\n form > * + * {\n margin: 16px 0 0;\n }\n\n .field {\n border: 0;\n }\n\n .field > * + * {\n margin: 8px 0 0;\n }\n\n label {\n display: block;\n }\n\n input {\n width: 100%;\n height: 24px;\n outline: none;\n }\n\n input:focus {\n border: 1px solid cornflowerblue;\n }\n\n input:focus:invalid {\n border-color: red;\n }\n\n abbr {\n text-decoration: none;\n color: orangered;\n }\n\n #errors > div {\n background-color: red;\n color: #eee;\n padding: 8px;\n border-radius: 4px;\n }\n\n .info {\n background-color: #b5e1fd;\n padding: 8px;\n border-radius: 4px;\n }\n </style>\n </head>\n <body>\n <div class=\"title\">\n <h3>\n Welcome to the Merchant Center authorization page for local development\n </h3>\n <small>\n This page is only available in development mode and is necessary to\n authenticate yourself. In production environment, we use our own\n authentication service.\n </small>\n </div>\n <form id=\"login\">\n <div id=\"errors\"></div>\n <div class=\"field\">\n <label for=\"email\">\n Email<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input id=\"email\" name=\"email\" type=\"text\" required=\"required\" />\n </div>\n <div class=\"field\">\n <label for=\"password\">\n Password<abbr title=\"This field is mandatory\">*</abbr>\n </label>\n <input\n id=\"password\"\n name=\"password\"\n type=\"password\"\n required=\"required\"\n />\n </div>\n <div>\n <button type=\"submit\" aria-label=\"Sign in\">Sign in 🚀</button>\n </div>\n </form>\n <script>\n /* eslint-disable no-var,vars-on-top */\n /**\n * NOTE:\n * This code is only used in development mode.\n * It authenticates a developer using the same mechanisms\n * as when not running in development. However,\n * this runs on the same domain as the developer.\n */\n window.addEventListener('load', function loaded() {\n var form = document.getElementById('login');\n form.addEventListener('submit', function onSubmit(event) {\n event.preventDefault();\n authorize();\n });\n\n function authorize() {\n var data = new FormData(form);\n var payload = {\n email: data.get('email'),\n password: data.get('password'),\n };\n\n var queryParams = new URLSearchParams(window.location.search);\n if (queryParams.has('response_type')) {\n // OIDC params\n payload.client_id = queryParams.get('client_id');\n payload.response_type = queryParams.get('response_type');\n payload.scope = queryParams.get('scope');\n payload.state = queryParams.get('state');\n payload.nonce = queryParams.get('nonce');\n }\n\n var container = document.getElementById('errors');\n // Clean up error message elements\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n const url = '__MC_API_URL__/tokens';\n\n window\n .fetch(url, {\n method: 'POST',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(payload),\n })\n .then(function handleResponse(response) {\n if (response.ok) {\n return response.json().then(function onSuccess(result) {\n // Handle OIDC redirect.\n if (queryParams.has('response_type')) {\n window.location.replace(result.redirectTo);\n } else {\n window.localStorage.setItem('isAuthenticated', true);\n var searchParams = new URLSearchParams(\n window.location.search\n );\n var redirectTo = searchParams.get('redirectTo') || '/';\n window.location.replace(redirectTo);\n }\n });\n }\n return response.text().then(function onError(responseText) {\n var message;\n try {\n var parsedResponse = JSON.parse(responseText);\n message = parsedResponse.message;\n } catch (e) {\n console.warn(\n `Failed to parse error response for ${url}:`,\n responseText\n );\n\n message = responseText;\n }\n var errorMessage = document.createTextNode(message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n })\n .catch(function onNetworkError(error) {\n var errorMessage = document.createTextNode(error.message);\n var errorContainer = document.createElement('div');\n errorContainer.appendChild(errorMessage);\n container.appendChild(errorContainer, container);\n });\n }\n });\n </script>\n </body>\n</html>\n",
|
|
76
|
-
"logoutPage": "<html>\n <head>\n <title>Logout (development only)</title>\n <script>\n window.localStorage.removeItem('isAuthenticated');\n window.localStorage.removeItem('loginStrategy');\n window.localStorage.removeItem('activeProjectKey');\n </script>\n </head>\n <body>\n <div>\n <h3>This is the logout page for local development.</h3>\n <p>\n Be aware that you might still have an active session as the cookie is\n assigned to a production domain (e.g. commercetools.com) which we can't\n unset from localhost. This is only a problem on local development and we\n intend fix this in the future.\n </p>\n <p>\n You can\n <a href=\"#\" onclick=\"window.location='/login'+window.location.search;\"\n >go to the login page</a\n >\n now.\n </p>\n </div>\n </body>\n</html>\n"
|
|
77
|
-
};
|
|
78
|
-
const trimTrailingSlash = value => value.replace(/\/$/, '');
|
|
79
|
-
|
|
80
|
-
// Make sure any symlinks in the project folder are resolved:
|
|
81
|
-
// https://github.com/facebook/create-react-app/issues/637
|
|
82
|
-
const appDirectory = fs.realpathSync(process.cwd());
|
|
83
|
-
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
|
|
84
|
-
const paths = {
|
|
85
|
-
appBuild: resolveApp('public')
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
// This transformer will generate a development `login` and `logout` HTML files
|
|
89
|
-
// and copy them to the application public folder.
|
|
90
|
-
// This is necessary to run the application locally in production mode.
|
|
91
|
-
const transformerLocal = compiledHtml => {
|
|
92
|
-
const htmlLogin = pages.loginPage.replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(compiledHtml.env.mcApiUrl));
|
|
93
|
-
const htmlLogout = pages.logoutPage;
|
|
94
|
-
fs.writeFileSync(path.join(paths.appBuild, 'login.html'), htmlLogin, 'utf8');
|
|
95
|
-
fs.writeFileSync(path.join(paths.appBuild, 'logout.html'), htmlLogout, 'utf8');
|
|
37
|
+
const transformerLocal = () => {
|
|
38
|
+
// noop
|
|
96
39
|
};
|
|
97
40
|
|
|
98
41
|
export { createMcDevAuthenticationMiddleware, transformerLocal };
|
|
@@ -2,8 +2,3 @@ import type { ApplicationRuntimeConfig } from '@commercetools-frontend/applicati
|
|
|
2
2
|
export type TCustomApplicationRuntimeConfig = ApplicationRuntimeConfig<{
|
|
3
3
|
disableAuthRoutesOfDevServer?: boolean;
|
|
4
4
|
}>;
|
|
5
|
-
export type TCompiledHtml = {
|
|
6
|
-
env: TCustomApplicationRuntimeConfig['env'];
|
|
7
|
-
headers: Record<string, string>;
|
|
8
|
-
indexHtmlContent: string;
|
|
9
|
-
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-frontend/mc-dev-authentication",
|
|
3
|
-
"version": "23.1
|
|
3
|
+
"version": "23.2.1",
|
|
4
4
|
"description": "Authentication views when running webpack-dev-server in development mode",
|
|
5
5
|
"bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
|
|
6
6
|
"repository": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@tsconfig/node22": "^22.0.0",
|
|
37
37
|
"@types/connect": "^3.4.36",
|
|
38
38
|
"connect": "^3.7.0",
|
|
39
|
-
"@commercetools-frontend/application-config": "23.1
|
|
39
|
+
"@commercetools-frontend/application-config": "23.2.1"
|
|
40
40
|
},
|
|
41
41
|
"engines": {
|
|
42
42
|
"node": "18.x || 20.x || >=22.0.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as logout } from './logout';
|