fix: disable api key checkbox does not remove api key (#6017)

packages/payload/src/admin/components/views/collections/Edit/Auth/APIKey.tsx

@@ -7,14 +7,14 @@ import CopyToClipboard from '../../../../elements/CopyToClipboard'
 import GenerateConfirmation from '../../../../elements/GenerateConfirmation'
 import { useFormFields } from '../../../../forms/Form/context'
 import Label from '../../../../forms/Label'
-import useField from '../../../../forms/useField'
 import { fieldBaseClass } from '../../../../forms/field-types/shared'
+import useField from '../../../../forms/useField'
 
 const path = 'apiKey'
 const baseClass = 'api-key'
 
-const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
-  const [initialAPIKey, setInitialAPIKey] = useState(null)
+const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({ enabled, readOnly }) => {
+  const [initialAPIKey] = useState(uuidv4())
   const [highlightedField, setHighlightedField] = useState(false)
   const { t } = useTranslation()
 
@@ -51,14 +51,13 @@ const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
   const { setValue, value } = fieldType
 
   useEffect(() => {
-    setInitialAPIKey(uuidv4())
-  }, [])
-
-  useEffect(() => {
-    if (!apiKeyValue) {
+    if (!apiKeyValue && enabled) {
       setValue(initialAPIKey)
     }
-  }, [apiKeyValue, setValue, initialAPIKey])
+    if (!enabled) {
+      setValue(null)
+    }
+  }, [apiKeyValue, enabled, setValue, initialAPIKey])
 
   useEffect(() => {
     if (highlightedField) {
@@ -68,6 +67,10 @@ const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
     }
   }, [highlightedField])
 
+  if (!enabled) {
+    return null
+  }
+
   return (
     <React.Fragment>
       <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>

packages/payload/src/admin/components/views/collections/Edit/Auth/index.tsx

@@ -145,7 +145,7 @@ const Auth: React.FC<Props> = (props) => {
       {useAPIKey && (
         <div className={`${baseClass}__api-key`}>
           <Checkbox admin={{ readOnly }} label={t('enableAPIKey')} name="enableAPIKey" />
-          {enableAPIKey?.value && <APIKey readOnly={readOnly} />}
+          <APIKey enabled={!!enableAPIKey?.value} readOnly={readOnly} />
         </div>
       )}
       {verify && <Checkbox admin={{ readOnly }} label={t('verified')} name="_verified" />}

packages/payload/src/auth/baseFields/apiKey.ts

@@ -20,7 +20,6 @@ export default [
         Field: () => null,
       },
     },
-    defaultValue: false,
     label: labels['authentication:enableAPIKey'],
   },
   {
@@ -46,16 +45,19 @@ export default [
     hidden: true,
     hooks: {
       beforeValidate: [
-        async ({ data, req, value }) => {
+        ({ data, req, value }) => {
+          if (data.apiKey === false || data.apiKey === null) {
+            return null
+          }
+          if (data.enableAPIKey === false || data.enableAPIKey === null) {
+            return null
+          }
           if (data.apiKey) {
             return crypto
               .createHmac('sha1', req.payload.secret)
               .update(data.apiKey as string)
               .digest('hex')
           }
-          if (data.enableAPIKey === false) {
-            return null
-          }
           return value
         },
       ],