chore(dev): Allow login with username for local strategy

Author: CrawlerCode

packages/dev/src/auth/index.ts

@@ -1,5 +1,7 @@
 import payloadConfig from "@payload-config";
 import NextAuth from "next-auth";
+import type { DiscordProfile } from "next-auth/providers/discord";
+import type { GitHubProfile } from "next-auth/providers/github";
 import { getPayload } from "payload";
 import { withPayload } from "payload-authjs";
 import { nodeAuthConfig } from "./node.config";
@@ -11,14 +13,28 @@ export const { handlers, signIn, signOut, auth } = NextAuth(
       /**
        * Update user on every sign in
        */
-      signIn: async ({ adapter, user, profile }) => {
+      signIn: async ({ adapter, user, account, profile }) => {
         if (!user.id || !profile) {
           return;
         }
         await adapter.updateUser!({
           id: user.id,
-          name: profile.name ?? (profile.login as string | undefined),
-          image: profile.avatar_url as string | undefined,
+          ...(account?.provider === "github" && {
+            name:
+              (profile as unknown as GitHubProfile).name ??
+              (profile as unknown as GitHubProfile).login,
+            email: profile.email ?? undefined,
+            image: (profile as unknown as GitHubProfile).avatar_url,
+          }),
+          ...(account?.provider === "keycloak" && {
+            name: profile.name,
+            email: profile.email ?? undefined,
+          }),
+          ...(account?.provider === "discord" && {
+            name: (profile as unknown as DiscordProfile).global_name,
+            email: profile.email ?? undefined,
+            image: (profile as unknown as DiscordProfile).image_url,
+          }),
           additionalUserDatabaseField: `Create by signIn event at ${new Date().toISOString()}`,
         });
       },

packages/dev/src/auth/providers/discord.ts

@@ -10,6 +10,7 @@ export const discordProvider = discord({
       // Default fields from discord provider
       ...(await discord({}).profile!(profile, tokens)),
       // Custom fields
+      username: profile.username,
       additionalUserDatabaseField: `Create by discord provider profile callback at ${new Date().toISOString()}`,
     };
   },

packages/dev/src/auth/providers/github.ts

@@ -5,14 +5,12 @@ export const githubProvider = github({
   /**
    * Add additional fields to the user on first sign in
    */
-  profile(profile) {
+  async profile(profile, tokens) {
     return {
-      // Default fields (@see https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/github.ts#L176)
-      id: profile.id.toString(),
-      name: profile.name ?? profile.login,
-      email: profile.email,
-      image: profile.avatar_url,
+      // Default fields from github provider
+      ...(await github({}).profile!(profile, tokens)),
       // Custom fields
+      username: profile.login,
       additionalUserDatabaseField: `Create by github provider profile callback at ${new Date().toISOString()}`,
     };
   },

packages/dev/src/auth/providers/keycloak.ts

@@ -13,6 +13,7 @@ export const keycloakProvider = keycloak({
       email: profile.email,
       image: profile.picture,
       // Custom fields
+      username: profile.preferred_username,
       locale: profile.locale,
       additionalUserDatabaseField: `Create by keycloak provider profile callback at ${new Date().toISOString()}`,
     };

packages/dev/src/payload-types.ts

@@ -96,22 +96,34 @@ export interface Config {
   };
 }
 export interface UserAuthOperations {
-  forgotPassword: {
-    email: string;
-    password: string;
-  };
-  login: {
-    email: string;
-    password: string;
-  };
+  forgotPassword:
+    | {
+        email: string;
+      }
+    | {
+        username: string;
+      };
+  login:
+    | {
+        email: string;
+        password: string;
+      }
+    | {
+        password: string;
+        username: string;
+      };
   registerFirstUser: {
-    email: string;
     password: string;
-  };
-  unlock: {
+    username?: string;
     email: string;
-    password: string;
   };
+  unlock:
+    | {
+        email: string;
+      }
+    | {
+        username: string;
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -158,6 +170,7 @@ export interface User {
   enableAPIKey?: boolean | null;
   apiKey?: string | null;
   apiKeyIndex?: string | null;
+  username?: string | null;
   resetPasswordToken?: string | null;
   resetPasswordExpiration?: string | null;
   salt?: string | null;
@@ -281,6 +294,7 @@ export interface UsersSelect<T extends boolean = true> {
   enableAPIKey?: T;
   apiKey?: T;
   apiKeyIndex?: T;
+  username?: T;
   resetPasswordToken?: T;
   resetPasswordExpiration?: T;
   salt?: T;

packages/dev/src/payload.config.ts

@@ -65,5 +65,10 @@ export default buildConfig({
     },
   }),
   sharp,
-  plugins: [authjsPlugin({ authjsConfig: nodeAuthConfig, enableLocalStrategy: true })],
+  plugins: [
+    authjsPlugin({
+      authjsConfig: nodeAuthConfig,
+      enableLocalStrategy: true,
+    }),
+  ],
 });

packages/dev/src/payload/collections/users.ts

@@ -15,6 +15,11 @@ const Users: CollectionConfig<"users"> = {
   auth: {
     useAPIKey: true,
     depth: 0,
+    loginWithUsername: {
+      allowEmailLogin: true,
+      requireEmail: true,
+      requireUsername: false,
+    },
   },
   defaultPopulate: {
     id: true,
@@ -24,7 +29,7 @@ const Users: CollectionConfig<"users"> = {
     {
       name: "name",
       type: "text",
-      label: "Username", // Add label to name field
+      label: "Display-Name", // Add label to name field
     },
     {
       name: "id",

packages/payload-authjs/README.md

@@ -492,7 +492,11 @@ export const { handlers, signIn, signOut, auth } = NextAuth(
         }
         await adapter.updateUser!({
           id: user.id,
-          name: profile.name ?? (profile.login as string | undefined),
+          name:
+            (profile as unknown as GitHubProfile).name ??
+            (profile as unknown as GitHubProfile).login,
+          email: profile.email ?? undefined,
+          image: (profile as unknown as GitHubProfile).avatar_url,
         });
       },
     },