cleans and sanitizes config for client use

src/client/components/Routes.js

@@ -14,7 +14,7 @@ import MediaLibrary from './views/MediaLibrary';
 import Edit from './views/collections/Edit';
 import EditGlobal from './views/globals/Edit';
 import { requests } from '../api';
-import customComponents from './custom-components';
+import customComponents from './customComponents';
 import RedirectToLogin from './utilities/RedirectToLogin';
 
 const Routes = () => {

src/client/components/customComponents.js

@@ -1,21 +1,20 @@
 function stringify(obj) {
   if (typeof obj === 'object') {
-    var result = []
-    Object.keys(obj).forEach(function (key) {
-      var val = stringify(obj[key])
+    const result = [];
+    Object.keys(obj).forEach((key) => {
+      const val = stringify(obj[key]);
       if (val !== null) {
-        result.push('"' + key + '": ' + val)
+        result.push(`"${key}": ${val}`);
       }
-    })
-    return "{" + result.join(",") + "}"
+    });
+    return `{${result.join(',')}}`;
   }
 
   return `React.lazy(() => import('${obj}'))`;
 }
 
 module.exports = function (config) {
-  let allCollectionComponents = config.collections.reduce((obj, collection) => {
-
+  const allCollectionComponents = config.collections.reduce((obj, collection) => {
     obj[collection.slug] = {
       fields: {},
       ...(collection.components || {}),
@@ -24,7 +23,7 @@ module.exports = function (config) {
     collection.fields.forEach((field) => {
       if (field.component) {
         obj[collection.slug].fields[field.name] = field.component;
-      };
+      }
     });
 
     return obj;
@@ -38,6 +37,7 @@ module.exports = function (config) {
   return {
     code: `
       const React = require('react');
-      module.exports = ${string}
-  ` };
+      module.exports = ${string};
+  `,
+  };
 };

src/client/components/forms/field-types/Relationship/index.js

@@ -28,7 +28,6 @@ class Relationship extends Component {
 
     this.state = {
       relations,
-      search: '',
       lastFullyLoadedRelation: -1,
       lastLoadedPage: 1,
       options: [],

src/client/components/layout/DefaultTemplate/index.js

@@ -4,7 +4,7 @@ import DefaultSidebar from '../Sidebar';
 import StepNav, { useStepNav, StepNavProvider } from '../../modules/StepNav';
 import { StatusListProvider } from '../../modules/Status';
 import Localizer from '../../modules/Localizer';
-import customComponents from '../../custom-components';
+import customComponents from '../../customComponents';
 
 import './index.scss';
 

src/client/components/modules/Localizer/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import config from 'payload-config';
 import qs from 'qs';
+import config from '../../../config/sanitizedClientConfig';
 import { useLocale } from '../../utilities/Locale';
 import { useSearchParams } from '../../utilities/SearchParams';
 import Arrow from '../../graphics/Arrow';

src/client/components/utilities/Locale/index.js

@@ -1,8 +1,8 @@
 import React, {
   createContext, useContext, useState, useEffect,
 } from 'react';
-import config from 'payload-config';
 import PropTypes from 'prop-types';
+import config from '../../../config/sanitizedClientConfig';
 import { useSearchParams } from '../SearchParams';
 
 const defaultLocale = (config.localization && config.localization.defaultLocale) ? config.localization.defaultLocale : 'en';

src/client/components/views/collections/Edit/index.js

@@ -10,7 +10,7 @@ import APIURL from '../../../modules/APIURL';
 import Button from '../../../controls/Button';
 import FormSubmit from '../../../forms/Submit';
 import RenderFields from '../../../forms/RenderFields';
-import customComponents from '../../../custom-components';
+import customComponents from '../../../customComponents';
 
 import './index.scss';
 
@@ -123,6 +123,7 @@ EditView.propTypes = {
     }),
     slug: PropTypes.string,
     useAsTitle: PropTypes.string,
+    fields: PropTypes.arrayOf(PropTypes.shape({})),
   }).isRequired,
   isEditing: PropTypes.bool,
 };

src/client/config/getWebpackDevConfig.js

@@ -25,7 +25,16 @@ module.exports = (config) => {
     module: {
       rules: [
         {
-          test: require.resolve('../components/custom-components.js'),
+          test: require.resolve('../components/customComponents'),
+          use: [
+            {
+              loader: 'val-loader',
+              options: config,
+            },
+          ],
+        },
+        {
+          test: require.resolve('./sanitizedClientConfig'),
           use: [
             {
               loader: 'val-loader',
@@ -116,7 +125,6 @@ module.exports = (config) => {
       modules: ['node_modules', path.resolve(__dirname, '../../../node_modules')],
       alias: {
         'payload-scss-overrides': config.paths.scssOverrides,
-        'payload-config': config.paths.config,
       },
     },
   };

src/client/config/getWebpackProdConfig.js

@@ -97,8 +97,6 @@ module.exports = (config) => {
       modules: ['node_modules', path.resolve(__dirname, '../../../node_modules')],
       alias: {
         'payload-scss-overrides': config.paths.scssOverrides,
-        'payload-custom-components': config.paths.components,
-        'payload-config': config.paths.config,
       },
     },
   };

src/client/config/sanitizedClientConfig.js

@@ -1,6 +1,12 @@
-import config from 'payload-config';
-import sanitizeConfig from '../../utilities/sanitizeConfig';
+const sanitizeConfig = require('../../utilities/sanitizeConfig');
+const secureConfig = require('../../utilities/secureConfig');
 
-const sanitizedConfig = sanitizeConfig(config);
+module.exports = (config) => {
+  const sanitizedConfig = sanitizeConfig(config);
+  const securedConfig = secureConfig(sanitizedConfig);
 
-export default sanitizedConfig;
+  return {
+    code: `
+    module.exports = ${JSON.stringify(securedConfig)}`,
+  };
+};

src/utilities/secureConfig.js

@@ -0,0 +1,9 @@
+const secureConfig = (config) => {
+  const securedConfig = { ...config };
+
+  delete securedConfig.user.auth.secretKey;
+
+  return securedConfig;
+};
+
+module.exports = secureConfig;