diff --git a/.vscode/launch.json b/.vscode/launch.json
index 08e3e1b77..af9807470 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -56,6 +56,13 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "node --no-deprecation test/dev.js login-with-username",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Login-With-Username",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
diff --git a/packages/next/src/elements/EmailAndUsername/index.tsx b/packages/next/src/elements/EmailAndUsername/index.tsx
index dd07c31d1..be67ba630 100644
--- a/packages/next/src/elements/EmailAndUsername/index.tsx
+++ b/packages/next/src/elements/EmailAndUsername/index.tsx
@@ -1,45 +1,103 @@
 'use client'
 
-import type { LoginWithUsernameOptions } from 'payload'
+import type { FieldPermissions, LoginWithUsernameOptions } from 'payload'
 
-import { EmailField, TextField, useTranslation } from '@payloadcms/ui'
+import { EmailField, RenderFields, TextField, useTranslation } from '@payloadcms/ui'
 import { email, username } from 'payload/shared'
 import React from 'react'
 
 type Props = {
   loginWithUsername?: LoginWithUsernameOptions | false
 }
-export const EmailAndUsernameFields: React.FC<Props> = ({ loginWithUsername }) => {
+function EmailFieldComponent(props: Props) {
+  const { loginWithUsername } = props
   const { t } = useTranslation()
 
   const requireEmail = !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail)
-  const requireUsername = loginWithUsername && loginWithUsername.requireUsername
   const showEmailField =
     !loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin
+
+  if (showEmailField) {
+    return (
+      <EmailField
+        autoComplete="off"
+        label={t('general:email')}
+        name="email"
+        path="email"
+        required={requireEmail}
+        validate={email}
+      />
+    )
+  }
+
+  return null
+}
+
+function UsernameFieldComponent(props: Props) {
+  const { loginWithUsername } = props
+  const { t } = useTranslation()
+
+  const requireUsername = loginWithUsername && loginWithUsername.requireUsername
   const showUsernameField = Boolean(loginWithUsername)
 
-  return (
-    <React.Fragment>
-      {showEmailField && (
-        <EmailField
-          autoComplete="email"
-          label={t('general:email')}
-          name="email"
-          path="email"
-          required={requireEmail}
-          validate={email}
-        />
-      )}
+  if (showUsernameField) {
+    return (
+      <TextField
+        label={t('authentication:username')}
+        name="username"
+        path="username"
+        required={requireUsername}
+        validate={username}
+      />
+    )
+  }
 
-      {showUsernameField && (
-        <TextField
-          label={t('authentication:username')}
-          name="username"
-          path="username"
-          required={requireUsername}
-          validate={username}
-        />
-      )}
-    </React.Fragment>
+  return null
+}
+
+type RenderEmailAndUsernameFieldsProps = {
+  className?: string
+  loginWithUsername?: LoginWithUsernameOptions | false
+  operation?: 'create' | 'update'
+  permissions?: {
+    [fieldName: string]: FieldPermissions
+  }
+  readOnly: boolean
+}
+export function RenderEmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {
+  const { className, loginWithUsername, operation, permissions, readOnly } = props
+
+  return (
+    <RenderFields
+      className={className}
+      fieldMap={[
+        {
+          name: 'email',
+          type: 'text',
+          CustomField: <EmailFieldComponent loginWithUsername={loginWithUsername} />,
+          cellComponentProps: null,
+          fieldComponentProps: { type: 'email', readOnly },
+          fieldIsPresentational: false,
+          isFieldAffectingData: true,
+          localized: false,
+        },
+        {
+          name: 'username',
+          type: 'text',
+          CustomField: <UsernameFieldComponent loginWithUsername={loginWithUsername} />,
+          cellComponentProps: null,
+          fieldComponentProps: { type: 'text', readOnly },
+          fieldIsPresentational: false,
+          isFieldAffectingData: true,
+          localized: false,
+        },
+      ]}
+      forceRender
+      operation={operation}
+      path=""
+      permissions={permissions}
+      readOnly={readOnly}
+      schemaPath=""
+    />
   )
 }
diff --git a/packages/next/src/views/CreateFirstUser/index.client.tsx b/packages/next/src/views/CreateFirstUser/index.client.tsx
index d0e1faf1a..b16640aa4 100644
--- a/packages/next/src/views/CreateFirstUser/index.client.tsx
+++ b/packages/next/src/views/CreateFirstUser/index.client.tsx
@@ -15,7 +15,7 @@ import {
 import { getFormState } from '@payloadcms/ui/shared'
 import React from 'react'
 
-import { EmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js'
+import { RenderEmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js'
 
 export const CreateFirstUserClient: React.FC<{
   initialState: FormState
@@ -57,7 +57,12 @@ export const CreateFirstUserClient: React.FC<{
       redirect={admin}
       validationOperation="create"
     >
-      <EmailAndUsernameFields loginWithUsername={loginWithUsername} />
+      <RenderEmailAndUsernameFields
+        className="emailAndUsername"
+        loginWithUsername={loginWithUsername}
+        operation="create"
+        readOnly={false}
+      />
       <PasswordField
         label={t('authentication:newPassword')}
         name="password"
diff --git a/packages/next/src/views/CreateFirstUser/index.scss b/packages/next/src/views/CreateFirstUser/index.scss
index 836127681..27aa45c66 100644
--- a/packages/next/src/views/CreateFirstUser/index.scss
+++ b/packages/next/src/views/CreateFirstUser/index.scss
@@ -3,3 +3,7 @@
     margin-bottom: var(--base);
   }
 }
+
+.emailAndUsername {
+  margin-bottom: var(--base);
+}
diff --git a/packages/next/src/views/Edit/Default/Auth/index.tsx b/packages/next/src/views/Edit/Default/Auth/index.tsx
index 83a0ae44d..ce20956cf 100644
--- a/packages/next/src/views/Edit/Default/Auth/index.tsx
+++ b/packages/next/src/views/Edit/Default/Auth/index.tsx
@@ -17,7 +17,7 @@ import { toast } from 'sonner'
 
 import type { Props } from './types.js'
 
-import { EmailAndUsernameFields } from '../../../../elements/EmailAndUsername/index.js'
+import { RenderEmailAndUsernameFields } from '../../../../elements/EmailAndUsername/index.js'
 import { APIKey } from './APIKey.js'
 import './index.scss'
 
@@ -47,7 +47,7 @@ export const Auth: React.FC<Props> = (props) => {
   const dispatchFields = useFormFields((reducer) => reducer[1])
   const modified = useFormModified()
   const { i18n, t } = useTranslation()
-  const { isInitializing } = useDocumentInfo()
+  const { docPermissions, isInitializing } = useDocumentInfo()
 
   const {
     routes: { api },
@@ -138,7 +138,12 @@ export const Auth: React.FC<Props> = (props) => {
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       {!disableLocalStrategy && (
         <React.Fragment>
-          <EmailAndUsernameFields loginWithUsername={loginWithUsername} />
+          <RenderEmailAndUsernameFields
+            loginWithUsername={loginWithUsername}
+            operation={operation}
+            permissions={docPermissions?.fields}
+            readOnly={readOnly}
+          />
           {(showPasswordFields || requirePassword) && (
             <div className={`${baseClass}__changing-password`}>
               <PasswordField
diff --git a/packages/payload/src/admin/fields/Array.ts b/packages/payload/src/admin/fields/Array.ts
index ca609e467..521fd658d 100644
--- a/packages/payload/src/admin/fields/Array.ts
+++ b/packages/payload/src/admin/fields/Array.ts
@@ -15,7 +15,7 @@ export type ArrayFieldProps = {
   name?: string
   validate?: ArrayFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type ArrayFieldLabelComponent = LabelComponent<'array'>
 
diff --git a/packages/payload/src/admin/fields/Blocks.ts b/packages/payload/src/admin/fields/Blocks.ts
index ad35fd998..8009548c3 100644
--- a/packages/payload/src/admin/fields/Blocks.ts
+++ b/packages/payload/src/admin/fields/Blocks.ts
@@ -15,7 +15,7 @@ export type BlocksFieldProps = {
   slug?: string
   validate?: BlockFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type ReducedBlock = {
   LabelComponent: Block['admin']['components']['Label']
diff --git a/packages/payload/src/admin/fields/Checkbox.ts b/packages/payload/src/admin/fields/Checkbox.ts
index d0d3ddc71..a2eeb63d5 100644
--- a/packages/payload/src/admin/fields/Checkbox.ts
+++ b/packages/payload/src/admin/fields/Checkbox.ts
@@ -12,7 +12,7 @@ export type CheckboxFieldProps = {
   path?: string
   validate?: CheckboxFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type CheckboxFieldLabelComponent = LabelComponent<'checkbox'>
 
diff --git a/packages/payload/src/admin/fields/Code.ts b/packages/payload/src/admin/fields/Code.ts
index 44099636c..6997a0f19 100644
--- a/packages/payload/src/admin/fields/Code.ts
+++ b/packages/payload/src/admin/fields/Code.ts
@@ -10,7 +10,7 @@ export type CodeFieldProps = {
   path?: string
   validate?: CodeFieldValidation
   width: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type CodeFieldLabelComponent = LabelComponent<'code'>
 
diff --git a/packages/payload/src/admin/fields/Date.ts b/packages/payload/src/admin/fields/Date.ts
index 4090225f3..58c71b272 100644
--- a/packages/payload/src/admin/fields/Date.ts
+++ b/packages/payload/src/admin/fields/Date.ts
@@ -10,7 +10,7 @@ export type DateFieldProps = {
   placeholder?: DateField['admin']['placeholder'] | string
   validate?: DateFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type DateFieldLabelComponent = LabelComponent<'date'>
 
diff --git a/packages/payload/src/admin/fields/Email.ts b/packages/payload/src/admin/fields/Email.ts
index 9957d796b..dc4c29810 100644
--- a/packages/payload/src/admin/fields/Email.ts
+++ b/packages/payload/src/admin/fields/Email.ts
@@ -10,7 +10,7 @@ export type EmailFieldProps = {
   placeholder?: EmailField['admin']['placeholder']
   validate?: EmailFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type EmailFieldLabelComponent = LabelComponent<'email'>
 
diff --git a/packages/payload/src/admin/fields/JSON.ts b/packages/payload/src/admin/fields/JSON.ts
index 1c16d2f34..0b3781adb 100644
--- a/packages/payload/src/admin/fields/JSON.ts
+++ b/packages/payload/src/admin/fields/JSON.ts
@@ -10,7 +10,7 @@ export type JSONFieldProps = {
   path?: string
   validate?: JSONFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type JSONFieldLabelComponent = LabelComponent<'json'>
 
diff --git a/packages/payload/src/admin/fields/Number.ts b/packages/payload/src/admin/fields/Number.ts
index 9bd34a34c..95865c780 100644
--- a/packages/payload/src/admin/fields/Number.ts
+++ b/packages/payload/src/admin/fields/Number.ts
@@ -15,7 +15,7 @@ export type NumberFieldProps = {
   step?: number
   validate?: NumberFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type NumberFieldLabelComponent = LabelComponent<'number'>
 
diff --git a/packages/payload/src/admin/fields/Point.ts b/packages/payload/src/admin/fields/Point.ts
index dbeb8ff2a..6471cea49 100644
--- a/packages/payload/src/admin/fields/Point.ts
+++ b/packages/payload/src/admin/fields/Point.ts
@@ -9,7 +9,7 @@ export type PointFieldProps = {
   step?: number
   validate?: PointFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type PointFieldLabelComponent = LabelComponent<'point'>
 
diff --git a/packages/payload/src/admin/fields/Radio.ts b/packages/payload/src/admin/fields/Radio.ts
index 38f61d5c0..65419760c 100644
--- a/packages/payload/src/admin/fields/Radio.ts
+++ b/packages/payload/src/admin/fields/Radio.ts
@@ -12,7 +12,7 @@ export type RadioFieldProps = {
   validate?: RadioFieldValidation
   value?: string
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type OnChange<T = string> = (value: T) => void
 
diff --git a/packages/payload/src/admin/fields/Relationship.ts b/packages/payload/src/admin/fields/Relationship.ts
index 8cbe119d7..ef2b6f2a1 100644
--- a/packages/payload/src/admin/fields/Relationship.ts
+++ b/packages/payload/src/admin/fields/Relationship.ts
@@ -12,7 +12,7 @@ export type RelationshipFieldProps = {
   sortOptions?: RelationshipField['admin']['sortOptions']
   validate?: RelationshipFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type RelationshipFieldLabelComponent = LabelComponent<'relationship'>
 
diff --git a/packages/payload/src/admin/fields/RichText.ts b/packages/payload/src/admin/fields/RichText.ts
index e5c72795f..e80405285 100644
--- a/packages/payload/src/admin/fields/RichText.ts
+++ b/packages/payload/src/admin/fields/RichText.ts
@@ -8,7 +8,7 @@ export type RichTextComponentProps = {
   richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>
   validate?: RichTextFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type RichTextFieldLabelComponent = LabelComponent<'richText'>
 
diff --git a/packages/payload/src/admin/fields/Select.ts b/packages/payload/src/admin/fields/Select.ts
index 45f2a75d0..d32c06693 100644
--- a/packages/payload/src/admin/fields/Select.ts
+++ b/packages/payload/src/admin/fields/Select.ts
@@ -14,7 +14,7 @@ export type SelectFieldProps = {
   validate?: SelectFieldValidation
   value?: string
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type SelectFieldLabelComponent = LabelComponent<'select'>
 
diff --git a/packages/payload/src/admin/fields/Text.ts b/packages/payload/src/admin/fields/Text.ts
index 9a215e027..98c5c8f68 100644
--- a/packages/payload/src/admin/fields/Text.ts
+++ b/packages/payload/src/admin/fields/Text.ts
@@ -16,7 +16,7 @@ export type TextFieldProps = {
   placeholder?: TextField['admin']['placeholder']
   validate?: TextFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type TextFieldLabelComponent = LabelComponent<'text'>
 
diff --git a/packages/payload/src/admin/fields/Textarea.ts b/packages/payload/src/admin/fields/Textarea.ts
index 00970fa15..b7caca45e 100644
--- a/packages/payload/src/admin/fields/Textarea.ts
+++ b/packages/payload/src/admin/fields/Textarea.ts
@@ -12,7 +12,7 @@ export type TextareaFieldProps = {
   rows?: number
   validate?: TextareaFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type TextareaFieldLabelComponent = LabelComponent<'textarea'>
 
diff --git a/packages/payload/src/admin/fields/Upload.ts b/packages/payload/src/admin/fields/Upload.ts
index 617770b2e..c5d4dfff0 100644
--- a/packages/payload/src/admin/fields/Upload.ts
+++ b/packages/payload/src/admin/fields/Upload.ts
@@ -15,7 +15,7 @@ export type UploadFieldProps = {
   relationTo?: UploadField['relationTo']
   validate?: UploadFieldValidation
   width?: string
-} & FormFieldBase
+} & Omit<FormFieldBase, 'validate'>
 
 export type UploadFieldLabelComponent = LabelComponent<'upload'>
 
diff --git a/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx b/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
index 351369bc4..8c7842f58 100644
--- a/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
+++ b/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
@@ -1,13 +1,15 @@
 'use client'
 
-import type { TextFieldProps } from 'payload'
+import type { SelectFieldValidation, TextFieldProps } from 'payload'
 
 import { SelectField, useForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 import type { SelectFieldOption } from '../../types.js'
 
-export const DynamicFieldSelector: React.FC<TextFieldProps> = (props) => {
+export const DynamicFieldSelector: React.FC<
+  { validate: SelectFieldValidation } & TextFieldProps
+> = (props) => {
   const { fields, getDataByPath } = useForm()
 
   const [options, setOptions] = useState<SelectFieldOption[]>([])
diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx
index b9d5ee817..1bdf1633e 100644
--- a/packages/richtext-slate/src/field/RichText.tsx
+++ b/packages/richtext-slate/src/field/RichText.tsx
@@ -58,7 +58,7 @@ const RichTextField: React.FC<
     richTextComponentMap: Map<string, React.ReactNode>
     validate?: RichTextFieldValidation
     width?: string
-  } & FormFieldBase
+  } & Omit<FormFieldBase, 'validate'>
 > = (props) => {
   const {
     name,