fix: validates password and confirm password on the server (#7410)

Fixes #7380

Adjusts how the password/confirm-password fields are validated. Moves
validation to the server, adds them to a custom schema under the schema
path `${collectionSlug}.auth` for auth enabled collections.

Author: JarrodMFlesch

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

@@ -35,18 +35,17 @@ export const CreateFirstUserClient: React.FC<{
   const fieldMap = getFieldMap({ collectionSlug: userSlug })
 
   const onChange: FormProps['onChange'][0] = React.useCallback(
-    async ({ formState: prevFormState }) => {
-      return getFormState({
+    async ({ formState: prevFormState }) =>
+      getFormState({
         apiRoute,
         body: {
           collectionSlug: userSlug,
           formState: prevFormState,
           operation: 'create',
-          schemaPath: userSlug,
+          schemaPath: `_${userSlug}.auth`,
         },
         serverURL,
-      })
-    },
+      }),
     [apiRoute, userSlug, serverURL],
   )
 
@@ -64,14 +63,15 @@ export const CreateFirstUserClient: React.FC<{
         <LoginField required={requireEmail} type="email" />
       )}
       <PasswordField
-        autoComplete="off"
         label={t('authentication:newPassword')}
         name="password"
+        path="password"
         required
       />
       <ConfirmPasswordField />
       <RenderFields
         fieldMap={fieldMap}
+        forceRender
         operation="create"
         path=""
         readOnly={false}

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

@@ -1,17 +1,18 @@
-import type { AdminViewProps, Field } from 'payload'
+import type { AdminViewProps } from 'payload'
 
-import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
 import React from 'react'
 
 import type { LoginFieldProps } from '../Login/LoginField/index.js'
 
+import { getDocumentData } from '../Document/getDocumentData.js'
 import { CreateFirstUserClient } from './index.client.js'
 import './index.scss'
 
 export { generateCreateFirstUserMetadata } from './meta.js'
 
 export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageResult }) => {
   const {
+    locale,
     req,
     req: {
       payload: {
@@ -26,50 +27,18 @@ export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageRe
   const collectionConfig = config.collections?.find((collection) => collection?.slug === userSlug)
   const { auth: authOptions } = collectionConfig
   const loginWithUsername = authOptions.loginWithUsername
-  const loginWithEmail = !loginWithUsername || loginWithUsername.allowEmailLogin
   const emailRequired = loginWithUsername && loginWithUsername.requireEmail
 
   let loginType: LoginFieldProps['type'] = loginWithUsername ? 'username' : 'email'
   if (loginWithUsername && (loginWithUsername.allowEmailLogin || loginWithUsername.requireEmail)) {
     loginType = 'emailOrUsername'
   }
 
-  const emailField = {
-    name: 'email',
-    type: 'email',
-    label: req.t('general:emailAddress'),
-    required: emailRequired ? true : false,
-  }
-
-  const usernameField = {
-    name: 'username',
-    type: 'text',
-    label: req.t('authentication:username'),
-    required: true,
-  }
-
-  const fields = [
-    ...(loginWithUsername ? [usernameField] : []),
-    ...(emailRequired || loginWithEmail ? [emailField] : []),
-    {
-      name: 'password',
-      type: 'text',
-      label: req.t('general:password'),
-      required: true,
-    },
-    {
-      name: 'confirm-password',
-      type: 'text',
-      label: req.t('authentication:confirmPassword'),
-      required: true,
-    },
-  ]
-
-  const formState = await buildStateFromSchema({
-    fieldSchema: fields as Field[],
-    operation: 'create',
-    preferences: { fields: {} },
+  const { formState } = await getDocumentData({
+    collectionConfig,
+    locale,
     req,
+    schemaPath: `_${collectionConfig.slug}.auth`,
   })
 
   return (

packages/next/src/views/Document/getDocumentData.tsx

@@ -15,8 +15,11 @@ export const getDocumentData = async (args: {
   id?: number | string
   locale: Locale
   req: PayloadRequest
+  schemaPath?: string
 }): Promise<Data> => {
-  const { id, collectionConfig, globalConfig, locale, req } = args
+  const { id, collectionConfig, globalConfig, locale, req, schemaPath: schemaPathFromProps } = args
+
+  const schemaPath = schemaPathFromProps || collectionConfig?.slug || globalConfig?.slug
 
   try {
     const formState = await buildFormState({
@@ -28,7 +31,7 @@ export const getDocumentData = async (args: {
           globalSlug: globalConfig?.slug,
           locale: locale?.code,
           operation: (collectionConfig && id) || globalConfig ? 'update' : 'create',
-          schemaPath: collectionConfig?.slug || globalConfig?.slug,
+          schemaPath,
         },
       },
     })

packages/next/src/views/Edit/Default/Auth/APIKey.tsx

@@ -78,7 +78,7 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
     if (!apiKeyValue && enabled) {
       setValue(initialAPIKey)
     }
-    if (!enabled) {
+    if (!enabled && apiKeyValue) {
       setValue(null)
     }
   }, [apiKeyValue, enabled, setValue, initialAPIKey])
@@ -100,6 +100,7 @@ export const APIKey: React.FC<{ enabled: boolean; readOnly?: boolean }> = ({
       <div className={[fieldBaseClass, 'api-key', 'read-only'].filter(Boolean).join(' ')}>
         <FieldLabel CustomLabel={APIKeyLabel} htmlFor={path} />
         <input
+          aria-label="API Key"
           className={highlightedField ? 'highlight' : undefined}
           disabled
           id="apiKey"

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -14,6 +14,7 @@ import {
   useFormModified,
   useTranslation,
 } from '@payloadcms/ui'
+import { email as emailValidation } from 'payload/shared'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -34,6 +35,8 @@ export const Auth: React.FC<Props> = (props) => {
     operation,
     readOnly,
     requirePassword,
+    setSchemaPath,
+    setValidateBeforeSubmit,
     useAPIKey,
     username,
     verify,
@@ -42,6 +45,7 @@ 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()
@@ -70,15 +74,32 @@ export const Auth: React.FC<Props> = (props) => {
   }, [permissions, collectionSlug])
 
   const handleChangePassword = useCallback(
-    (state: boolean) => {
-      if (!state) {
+    (showPasswordFields: boolean) => {
+      if (showPasswordFields) {
+        setValidateBeforeSubmit(true)
+        setSchemaPath(`_${collectionSlug}.auth`)
+        dispatchFields({
+          type: 'UPDATE',
+          errorMessage: t('validation:required'),
+          path: 'password',
+          valid: false,
+        })
+        dispatchFields({
+          type: 'UPDATE',
+          errorMessage: t('validation:required'),
+          path: 'confirm-password',
+          valid: false,
+        })
+      } else {
+        setValidateBeforeSubmit(false)
+        setSchemaPath(collectionSlug)
         dispatchFields({ type: 'REMOVE', path: 'password' })
         dispatchFields({ type: 'REMOVE', path: 'confirm-password' })
       }
 
-      setChangingPassword(state)
+      setChangingPassword(showPasswordFields)
     },
-    [dispatchFields],
+    [dispatchFields, t, collectionSlug, setSchemaPath, setValidateBeforeSubmit],
   )
 
   const unlock = useCallback(async () => {
@@ -99,7 +120,7 @@ export const Auth: React.FC<Props> = (props) => {
     } else {
       toast.error(t('authentication:failedToUnlock'))
     }
-  }, [i18n, serverURL, api, collectionSlug, email, username, t])
+  }, [i18n, serverURL, api, collectionSlug, email, username, t, loginWithUsername])
 
   useEffect(() => {
     if (!modified) {
@@ -113,6 +134,8 @@ export const Auth: React.FC<Props> = (props) => {
 
   const disabled = readOnly || isInitializing
 
+  const showPasswordFields = changingPassword || forceOpenChangePassword
+
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       {!disableLocalStrategy && (
@@ -136,22 +159,33 @@ export const Auth: React.FC<Props> = (props) => {
               name="email"
               readOnly={readOnly}
               required={!loginWithUsername || loginWithUsername?.requireEmail}
+              validate={(value) =>
+                emailValidation(value, {
+                  name: 'email',
+                  type: 'email',
+                  data: {},
+                  preferences: { fields: {} },
+                  req: { t } as any,
+                  required: true,
+                  siblingData: {},
+                })
+              }
             />
           )}
-          {(changingPassword || requirePassword) && (
+          {(showPasswordFields || requirePassword) && (
             <div className={`${baseClass}__changing-password`}>
               <PasswordField
-                autoComplete="off"
                 disabled={disabled}
                 label={t('authentication:newPassword')}
                 name="password"
+                path="password"
                 required
               />
               <ConfirmPasswordField disabled={readOnly} />
             </div>
           )}
           <div className={`${baseClass}__controls`}>
-            {changingPassword && !requirePassword && (
+            {showPasswordFields && !requirePassword && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}
@@ -161,7 +195,7 @@ export const Auth: React.FC<Props> = (props) => {
                 {t('general:cancel')}
               </Button>
             )}
-            {!changingPassword && !requirePassword && (
+            {!showPasswordFields && !requirePassword && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}

packages/next/src/views/Edit/Default/Auth/types.ts

@@ -9,6 +9,8 @@ export type Props = {
   operation: 'create' | 'update'
   readOnly: boolean
   requirePassword?: boolean
+  setSchemaPath: (path: string) => void
+  setValidateBeforeSubmit: (validate: boolean) => void
   useAPIKey?: boolean
   username: string
   verify?: VerifyConfig | boolean

packages/next/src/views/Edit/Default/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@payloadcms/ui'
 import { formatAdminURL, getFormState } from '@payloadcms/ui/shared'
 import { useRouter, useSearchParams } from 'next/navigation.js'
-import React, { Fragment, useCallback } from 'react'
+import React, { Fragment, useCallback, useState } from 'react'
 
 import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving/index.js'
 import { Auth } from './Auth/index.js'
@@ -102,6 +102,9 @@ export const DefaultEditView: React.FC = () => {
 
   const classes = [baseClass, id && `${baseClass}--is-editing`].filter(Boolean).join(' ')
 
+  const [schemaPath, setSchemaPath] = React.useState(entitySlug)
+  const [validateBeforeSubmit, setValidateBeforeSubmit] = useState(false)
+
   const onSave = useCallback(
     (json) => {
       reportUpdate({
@@ -158,7 +161,6 @@ export const DefaultEditView: React.FC = () => {
   const onChange: FormProps['onChange'][0] = useCallback(
     async ({ formState: prevFormState }) => {
       const docPreferences = await getDocPreferences()
-
       return getFormState({
         apiRoute,
         body: {
@@ -168,12 +170,12 @@ export const DefaultEditView: React.FC = () => {
           formState: prevFormState,
           globalSlug,
           operation,
-          schemaPath: entitySlug,
+          schemaPath,
         },
         serverURL,
       })
     },
-    [serverURL, apiRoute, id, operation, entitySlug, collectionSlug, globalSlug, getDocPreferences],
+    [apiRoute, collectionSlug, schemaPath, getDocPreferences, globalSlug, id, operation, serverURL],
   )
 
   return (
@@ -182,7 +184,7 @@ export const DefaultEditView: React.FC = () => {
         <Form
           action={action}
           className={`${baseClass}__form`}
-          disableValidationOnSubmit
+          disableValidationOnSubmit={!validateBeforeSubmit}
           disabled={isInitializing || !hasSavePermission}
           initialState={!isInitializing && initialState}
           isInitializing={isInitializing}
@@ -231,6 +233,8 @@ export const DefaultEditView: React.FC = () => {
                       operation={operation}
                       readOnly={!hasSavePermission}
                       requirePassword={!id}
+                      setSchemaPath={setSchemaPath}
+                      setValidateBeforeSubmit={setValidateBeforeSubmit}
                       useAPIKey={auth.useAPIKey}
                       username={data?.username}
                       verify={auth.verify}
@@ -255,7 +259,7 @@ export const DefaultEditView: React.FC = () => {
             docPermissions={docPermissions}
             fieldMap={fieldMap}
             readOnly={!hasSavePermission}
-            schemaPath={entitySlug}
+            schemaPath={schemaPath}
           />
           {AfterDocument}
         </Form>

packages/next/src/views/Login/LoginField/index.tsx

@@ -18,6 +18,7 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true })
         autoComplete="email"
         label={t('general:email')}
         name="email"
+        path="email"
         required={required}
         validate={(value) =>
           email(value, {
@@ -39,6 +40,7 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true })
       <TextField
         label={t('authentication:username')}
         name="username"
+        path="username"
         required
         validate={(value) =>
           username(value, {
@@ -65,6 +67,7 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true })
       <TextField
         label={t('authentication:emailOrUsername')}
         name="username"
+        path="username"
         required
         validate={(value) => {
           const passesUsername = username(value, {