fix: misc issues with loginWithUsername (#7311)

jessrynkar · web-flow · commit b2814eb67c94 · 2024-07-23T15:14:12.000-04:00
- improves types
- fixes create-first-user fields
diff --git a/packages/graphql/src/schema/initCollections.ts b/packages/graphql/src/schema/initCollections.ts
@@ -348,15 +348,19 @@ function initCollectionsGraphQL({ config, graphqlResult }: InitCollectionsGraphQ
     }
 
     if (collectionConfig.auth) {
-      const authFields: Field[] = collectionConfig.auth.disableLocalStrategy
-        ? []
-        : [
-            {
-              name: 'email',
-              type: 'email',
-              required: true,
-            },
-          ]
+      const authFields: Field[] =
+        collectionConfig.auth.disableLocalStrategy ||
+        (collectionConfig.auth.loginWithUsername &&
+          !collectionConfig.auth.loginWithUsername.allowEmailLogin &&
+          !collectionConfig.auth.loginWithUsername.requireEmail)
+          ? []
+          : [
+              {
+                name: 'email',
+                type: 'email',
+                required: true,
+              },
+            ]
       collection.graphQL.JWT = buildObjectType({
         name: formatName(`${slug}JWT`),
         config,
diff --git a/packages/next/src/routes/rest/auth/login.ts b/packages/next/src/routes/rest/auth/login.ts
@@ -9,16 +9,17 @@ import { headersWithCors } from '../../../utilities/headersWithCors.js'
 export const login: CollectionRouteHandler = async ({ collection, req }) => {
   const { searchParams, t } = req
   const depth = searchParams.get('depth')
-  const authData = collection.config.auth?.loginWithUsername
-    ? {
-        email: typeof req.data?.email === 'string' ? req.data.email : '',
-        password: typeof req.data?.password === 'string' ? req.data.password : '',
-        username: typeof req.data?.username === 'string' ? req.data.username : '',
-      }
-    : {
-        email: typeof req.data?.email === 'string' ? req.data.email : '',
-        password: typeof req.data?.password === 'string' ? req.data.password : '',
-      }
+  const authData =
+    collection.config.auth?.loginWithUsername !== false
+      ? {
+          email: typeof req.data?.email === 'string' ? req.data.email : '',
+          password: typeof req.data?.password === 'string' ? req.data.password : '',
+          username: typeof req.data?.username === 'string' ? req.data.username : '',
+        }
+      : {
+          email: typeof req.data?.email === 'string' ? req.data.email : '',
+          password: typeof req.data?.password === 'string' ? req.data.password : '',
+        }
 
   const result = await loginOperation({
     collection,
diff --git a/packages/next/src/routes/rest/auth/unlock.ts b/packages/next/src/routes/rest/auth/unlock.ts
@@ -8,14 +8,15 @@ import { headersWithCors } from '../../../utilities/headersWithCors.js'
 export const unlock: CollectionRouteHandler = async ({ collection, req }) => {
   const { t } = req
 
-  const authData = collection.config.auth?.loginWithUsername
-    ? {
-        email: typeof req.data?.email === 'string' ? req.data.email : '',
-        username: typeof req.data?.username === 'string' ? req.data.username : '',
-      }
-    : {
-        email: typeof req.data?.email === 'string' ? req.data.email : '',
-      }
+  const authData =
+    collection.config.auth?.loginWithUsername !== false
+      ? {
+          email: typeof req.data?.email === 'string' ? req.data.email : '',
+          username: typeof req.data?.username === 'string' ? req.data.username : '',
+        }
+      : {
+          email: typeof req.data?.email === 'string' ? req.data.email : '',
+        }
 
   await unlockOperation({
     collection,
diff --git a/packages/next/src/views/CreateFirstUser/index.client.tsx b/packages/next/src/views/CreateFirstUser/index.client.tsx
@@ -3,7 +3,6 @@ import type { FormState } from 'payload'
 
 import {
   ConfirmPasswordField,
-  EmailField,
   Form,
   type FormProps,
   FormSubmit,
@@ -16,10 +15,14 @@ import {
 import { getFormState } from '@payloadcms/ui/shared'
 import React from 'react'
 
+import { LoginField } from '../Login/LoginField/index.js'
+
 export const CreateFirstUserClient: React.FC<{
   initialState: FormState
+  loginType: 'email' | 'emailOrUsername' | 'username'
+  requireEmail?: boolean
   userSlug: string
-}> = ({ initialState, userSlug }) => {
+}> = ({ initialState, loginType, requireEmail = true, userSlug }) => {
   const { getFieldMap } = useComponentMap()
 
   const {
@@ -56,7 +59,10 @@ export const CreateFirstUserClient: React.FC<{
       redirect={admin}
       validationOperation="create"
     >
-      <EmailField autoComplete="email" label={t('general:email')} name="email" required />
+      {['emailOrUsername', 'username'].includes(loginType) && <LoginField type="username" />}
+      {['email', 'emailOrUsername'].includes(loginType) && (
+        <LoginField required={requireEmail} type="email" />
+      )}
       <PasswordField
         autoComplete="off"
         label={t('authentication:newPassword')}
diff --git a/packages/next/src/views/CreateFirstUser/index.tsx b/packages/next/src/views/CreateFirstUser/index.tsx
@@ -3,6 +3,8 @@ import type { AdminViewProps, Field } from 'payload'
 import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
 import React from 'react'
 
+import type { LoginFieldProps } from '../Login/LoginField/index.js'
+
 import { CreateFirstUserClient } from './index.client.js'
 import './index.scss'
 
@@ -16,17 +18,39 @@ export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageRe
         config: {
           admin: { user: userSlug },
         },
+        config,
       },
     },
   } = initPageResult
 
-  const fields: Field[] = [
-    {
-      name: 'email',
-      type: 'email',
-      label: req.t('general:emailAddress'),
-      required: true,
-    },
+  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',
@@ -42,7 +66,7 @@ export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageRe
   ]
 
   const formState = await buildStateFromSchema({
-    fieldSchema: fields,
+    fieldSchema: fields as Field[],
     operation: 'create',
     preferences: { fields: {} },
     req,
@@ -52,7 +76,12 @@ export const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageRe
     <div className="create-first-user">
       <h1>{req.t('general:welcome')}</h1>
       <p>{req.t('authentication:beginCreateFirstUser')}</p>
-      <CreateFirstUserClient initialState={formState} userSlug={userSlug} />
+      <CreateFirstUserClient
+        initialState={formState}
+        loginType={loginType}
+        requireEmail={emailRequired}
+        userSlug={userSlug}
+      />
     </div>
   )
 }
diff --git a/packages/next/src/views/Edit/Default/Auth/index.tsx b/packages/next/src/views/Edit/Default/Auth/index.tsx
@@ -34,6 +34,7 @@ export const Auth: React.FC<Props> = (props) => {
     readOnly,
     requirePassword,
     useAPIKey,
+    username,
     verify,
   } = props
 
@@ -64,9 +65,8 @@ export const Auth: React.FC<Props> = (props) => {
   const unlock = useCallback(async () => {
     const url = `${serverURL}${api}/${collectionSlug}/unlock`
     const response = await fetch(url, {
-      body: JSON.stringify({
-        email,
-      }),
+      body:
+        loginWithUsername && username ? JSON.stringify({ username }) : JSON.stringify({ email }),
       credentials: 'include',
       headers: {
         'Accept-Language': i18n.language,
@@ -80,7 +80,7 @@ export const Auth: React.FC<Props> = (props) => {
     } else {
       toast.error(t('authentication:failedToUnlock'))
     }
-  }, [i18n, serverURL, api, collectionSlug, email, t])
+  }, [i18n, serverURL, api, collectionSlug, email, username, t])
 
   useEffect(() => {
     if (!modified) {
@@ -98,6 +98,15 @@ export const Auth: React.FC<Props> = (props) => {
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
       {!disableLocalStrategy && (
         <React.Fragment>
+          {Boolean(loginWithUsername) && (
+            <TextField
+              disabled={disabled}
+              label={t('authentication:username')}
+              name="username"
+              readOnly={readOnly}
+              required
+            />
+          )}
           {(!loginWithUsername ||
             loginWithUsername?.allowEmailLogin ||
             loginWithUsername?.requireEmail) && (
@@ -110,15 +119,6 @@ export const Auth: React.FC<Props> = (props) => {
               required={!loginWithUsername || loginWithUsername?.requireEmail}
             />
           )}
-          {loginWithUsername && (
-            <TextField
-              disabled={disabled}
-              label={t('authentication:username')}
-              name="username"
-              readOnly={readOnly}
-              required
-            />
-          )}
           {(changingPassword || requirePassword) && (
             <div className={`${baseClass}__changing-password`}>
               <PasswordField
diff --git a/packages/next/src/views/Edit/Default/Auth/types.ts b/packages/next/src/views/Edit/Default/Auth/types.ts
@@ -10,5 +10,6 @@ export type Props = {
   readOnly: boolean
   requirePassword?: boolean
   useAPIKey?: boolean
+  username: string
   verify?: VerifyConfig | boolean
 }
diff --git a/packages/next/src/views/Edit/Default/index.tsx b/packages/next/src/views/Edit/Default/index.tsx
@@ -232,6 +232,7 @@ export const DefaultEditView: React.FC = () => {
                       readOnly={!hasSavePermission}
                       requirePassword={!id}
                       useAPIKey={auth.useAPIKey}
+                      username={data?.username}
                       verify={auth.verify}
                     />
                   )}
diff --git a/packages/next/src/views/Login/LoginField/index.tsx b/packages/next/src/views/Login/LoginField/index.tsx
@@ -5,9 +5,10 @@ import { EmailField, TextField, useConfig, useTranslation } from '@payloadcms/ui
 import { email, username } from 'payload/shared'
 import React from 'react'
 export type LoginFieldProps = {
+  required?: boolean
   type: 'email' | 'emailOrUsername' | 'username'
 }
-export const LoginField: React.FC<LoginFieldProps> = ({ type }) => {
+export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true }) => {
   const { t } = useTranslation()
   const config = useConfig()
 
@@ -17,7 +18,7 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type }) => {
         autoComplete="email"
         label={t('general:email')}
         name="email"
-        required
+        required={required}
         validate={(value) =>
           email(value, {
             name: 'email',
diff --git a/packages/payload/src/auth/baseFields/email.ts b/packages/payload/src/auth/baseFields/email.ts
@@ -7,7 +7,7 @@ export const emailField = ({ required = true }: { required?: boolean }): Field =
   type: 'email',
   admin: {
     components: {
-      Field: required ? () => null : undefined,
+      Field: () => null,
     },
   },
   hooks: {
diff --git a/packages/payload/src/utilities/configToJSONSchema.ts b/packages/payload/src/utilities/configToJSONSchema.ts
diff --git a/packages/ui/src/elements/DocumentFields/index.tsx b/packages/ui/src/elements/DocumentFields/index.tsx
diff --git a/packages/ui/src/utilities/buildFormState.ts b/packages/ui/src/utilities/buildFormState.ts

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,6 @@ export type Props = {`
`10`	`10`	`readOnly: boolean`
`11`	`11`	`requirePassword?: boolean`
`12`	`12`	`useAPIKey?: boolean`
	`13`	`+ username: string`
`13`	`14`	`verify?: VerifyConfig \| boolean`
`14`	`15`	`}`