fix(ui): unable to find user field schemas when updating password (#10305)

When updating password within the account view, the server console
throws an error because it is unable to find the remaining user fields
when building form state. This was because the field schema map sets
these fields within its own `_users.auth` key, separate from the other
fields. When the form submits, it uses this key as the schema path,
which may not contain all user fields, even though it sends full
document data through the request.

Author: jacobsfletch

packages/next/src/views/CreateFirstUser/index.client.tsx

@@ -57,7 +57,7 @@ export const CreateFirstUserClient: React.FC<{
         docPreferences,
         formState: prevFormState,
         operation: 'create',
-        schemaPath: `_${userSlug}.auth`,
+        schemaPath: userSlug,
         signal: controller.signal,
       })
 

packages/ui/src/utilities/buildClientFieldSchemaMap/index.ts

@@ -44,24 +44,22 @@ export const buildClientFieldSchemaMap = (args: {
     )
 
     if (matchedCollection) {
+      let fieldsToSet = matchedCollection?.fields || []
+
       if (matchedCollection.auth && !matchedCollection.auth.disableLocalStrategy) {
-        // register schema with auth schemaPath
         ;(baseAuthFields[0] as TextFieldClient).label = i18n.t('general:password')
         ;(baseAuthFields[1] as TextFieldClient).label = i18n.t('authentication:confirmPassword')
-
-        clientSchemaMap.set(`_${matchedCollection.slug}.auth`, {
-          fields: [...baseAuthFields, ...matchedCollection.fields],
-        })
+        fieldsToSet = baseAuthFields.concat(fieldsToSet)
       }
 
       clientSchemaMap.set(collectionSlug, {
-        fields: matchedCollection.fields,
+        fields: fieldsToSet,
       })
 
       traverseFields({
         clientSchemaMap,
         config,
-        fields: matchedCollection.fields,
+        fields: fieldsToSet,
         i18n,
         parentIndexPath: '',
         parentSchemaPath: collectionSlug,

packages/ui/src/utilities/buildFieldSchemaMap/index.ts

@@ -39,23 +39,21 @@ export const buildFieldSchemaMap = (args: {
     )
 
     if (matchedCollection) {
+      let fieldsToSet = matchedCollection?.fields || []
+
       if (matchedCollection.auth && !matchedCollection.auth.disableLocalStrategy) {
-        // register schema with auth schemaPath
         ;(baseAuthFields[0] as TextField).label = i18n.t('general:password')
         ;(baseAuthFields[1] as TextField).label = i18n.t('authentication:confirmPassword')
-
-        schemaMap.set(`_${matchedCollection.slug}.auth`, {
-          fields: [...baseAuthFields, ...matchedCollection.fields],
-        })
+        fieldsToSet = baseAuthFields.concat(fieldsToSet)
       }
 
       schemaMap.set(collectionSlug, {
-        fields: matchedCollection.fields,
+        fields: fieldsToSet,
       })
 
       traverseFields({
         config,
-        fields: matchedCollection.fields,
+        fields: fieldsToSet,
         i18n,
         parentIndexPath: '',
         parentSchemaPath: collectionSlug,

packages/ui/src/views/Edit/Auth/index.tsx

@@ -30,7 +30,6 @@ export const Auth: React.FC<Props> = (props) => {
     operation,
     readOnly,
     requirePassword,
-    setSchemaPathSegments,
     setValidateBeforeSubmit,
     useAPIKey,
     username,
@@ -40,7 +39,6 @@ export const Auth: React.FC<Props> = (props) => {
   const { permissions } = useAuth()
   const [changingPassword, setChangingPassword] = useState(requirePassword)
   const enableAPIKey = useFormFields(([fields]) => (fields && fields?.enableAPIKey) || null)
-  const forceOpenChangePassword = useFormFields(([fields]) => (fields && fields?.password) || null)
   const dispatchFields = useFormFields((reducer) => reducer[1])
   const modified = useFormModified()
   const { i18n, t } = useTranslation()
@@ -81,7 +79,6 @@ export const Auth: React.FC<Props> = (props) => {
     (showPasswordFields: boolean) => {
       if (showPasswordFields) {
         setValidateBeforeSubmit(true)
-        setSchemaPathSegments([`_${collectionSlug}`, 'auth'])
 
         dispatchFields({
           type: 'UPDATE',
@@ -98,14 +95,13 @@ export const Auth: React.FC<Props> = (props) => {
         })
       } else {
         setValidateBeforeSubmit(false)
-        setSchemaPathSegments([collectionSlug])
         dispatchFields({ type: 'REMOVE', path: 'password' })
         dispatchFields({ type: 'REMOVE', path: 'confirm-password' })
       }
 
       setChangingPassword(showPasswordFields)
     },
-    [dispatchFields, t, collectionSlug, setSchemaPathSegments, setValidateBeforeSubmit],
+    [dispatchFields, t, setValidateBeforeSubmit],
   )
 
   const unlock = useCallback(async () => {
@@ -140,8 +136,6 @@ export const Auth: React.FC<Props> = (props) => {
 
   const disabled = readOnly || isInitializing
 
-  const showPasswordFields = changingPassword || forceOpenChangePassword
-
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       {!disableLocalStrategy && (
@@ -153,7 +147,7 @@ export const Auth: React.FC<Props> = (props) => {
             readOnly={readOnly}
             t={t}
           />
-          {(showPasswordFields || requirePassword) && (
+          {(changingPassword || requirePassword) && (
             <div className={`${baseClass}__changing-password`}>
               <PasswordField
                 autoComplete="new-password"
@@ -172,7 +166,7 @@ export const Auth: React.FC<Props> = (props) => {
             </div>
           )}
           <div className={`${baseClass}__controls`}>
-            {showPasswordFields && !requirePassword && (
+            {changingPassword && !requirePassword && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}
@@ -182,7 +176,7 @@ export const Auth: React.FC<Props> = (props) => {
                 {t('general:cancel')}
               </Button>
             )}
-            {!showPasswordFields && !requirePassword && (
+            {!changingPassword && !requirePassword && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}

packages/ui/src/views/Edit/Auth/types.ts

@@ -9,7 +9,6 @@ export type Props = {
   operation: 'create' | 'update'
   readOnly: boolean
   requirePassword?: boolean
-  setSchemaPathSegments: (path: string[]) => void
   setValidateBeforeSubmit: (validate: boolean) => void
   useAPIKey?: boolean
   username: string

packages/ui/src/views/Edit/index.tsx

@@ -9,7 +9,7 @@ import type {
 } from 'payload'
 
 import { useRouter, useSearchParams } from 'next/navigation.js'
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { FormProps } from '../../forms/Form/index.js'
 import type { LockedState } from '../../utilities/buildFormState.js'
@@ -179,13 +179,7 @@ export const DefaultEditView: React.FC<ClientSideEditViewProps> = ({
     classes.push(`collection-edit--${collectionSlug}`)
   }
 
-  const [schemaPathSegments, setSchemaPathSegments] = useState(() => {
-    if (operation === 'create' && auth && !auth.disableLocalStrategy) {
-      return [`_${entitySlug}`, 'auth']
-    }
-
-    return [entitySlug]
-  })
+  const schemaPathSegments = useMemo(() => [entitySlug], [entitySlug])
 
   const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(() => {
     if (operation === 'create' && auth && !auth.disableLocalStrategy) {
@@ -557,7 +551,6 @@ export const DefaultEditView: React.FC<ClientSideEditViewProps> = ({
                       operation={operation}
                       readOnly={!hasSavePermission}
                       requirePassword={!id}
-                      setSchemaPathSegments={setSchemaPathSegments}
                       setValidateBeforeSubmit={setValidateBeforeSubmit}
                       useAPIKey={auth.useAPIKey}
                       username={savedDocumentData?.username}