feat: Add support for virtual fields (jwt session strategy)

Author: CrawlerCode

packages/dev/src/app/(app)/_components/AuthOverview.tsx

@@ -12,7 +12,7 @@ const AuthOverview = async () => {
     <div>
       <h3>Auth.js Session</h3>
       <p>{session?.user ? <SignOutButtonAuthjs /> : <SignInButtonAuthjs />}</p>
-      <pre>{JSON.stringify(session?.user, null, 2)}</pre>
+      <pre>{JSON.stringify(session ?? undefined, null, 2)}</pre>
       <br />
       <h3>Payload CMS User</h3>
       <p>{payloadUser && <SignOutButtonPayload />}</p>

packages/dev/src/auth.config.ts

@@ -1,100 +1,153 @@
 import jwt from "jsonwebtoken";
-import type { NextAuthConfig, Profile } from "next-auth";
+import type { NextAuthConfig } from "next-auth";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { JWT } from "next-auth/jwt";
 import github from "next-auth/providers/github";
 import keycloak from "next-auth/providers/keycloak";
 import nodemailer from "next-auth/providers/nodemailer";
-
-declare module "next-auth/jwt" {
-  interface JWT extends Pick<Profile, "roles"> {
-    id?: string;
-  }
-}
+import type { User as PayloadUser } from "payload/generated-types";
 
 declare module "next-auth" {
-  interface Profile {
-    roles?: string[];
-  }
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  interface User extends Pick<JWT, "id" | "roles"> {}
+  interface User
+    extends Partial<Omit<PayloadUser, "accounts" | "sessions" | "verificationTokens">> {}
+}
+declare module "next-auth/jwt" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface JWT
+    extends Partial<
+      Pick<
+        PayloadUser,
+        "id" | "additionalUserDatabaseField" | "additionalUserVirtualField" | "roles"
+      >
+    > {}
 }
 
 export const authConfig: NextAuthConfig = {
   theme: { logo: "https://authjs.dev/img/logo-sm.png" },
   providers: [
     github({
       allowDangerousEmailAccountLinking: true,
+      /**
+       * Add additional fields to the user on first sign in
+       */
       profile(profile) {
-        profile.roles = ["user"]; // Extend the profile
         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,
+          email: profile.email!,
           image: profile.avatar_url,
-          roles: ["user"], // Extend the user
+          // Custom fields
+          additionalUserDatabaseField: `Create by github provider profile callback at ${new Date().toISOString()}`,
+        };
+      },
+      account(tokens) {
+        return {
+          ...tokens,
+          additionalAccountDatabaseField: `Create by github provider profile callback at ${new Date().toISOString()}`,
         };
       },
     }),
     keycloak({
       allowDangerousEmailAccountLinking: true,
-      profile(profile, tokens) {
-        // Add roles to the profile
-        if (tokens.access_token) {
-          const decodedToken = jwt.decode(tokens.access_token);
-          if (decodedToken && typeof decodedToken !== "string") {
-            profile.roles = decodedToken.resource_access?.[process.env.AUTH_KEYCLOAK_ID!]?.roles; // Extend the profile
-          }
-        }
+      /**
+       * Add additional fields to the user on first sign in
+       */
+      profile(profile) {
         return {
+          // Default fields
           id: profile.sub,
           name: profile.name,
           email: profile.email,
           image: profile.picture,
-          roles: profile.roles ?? [], // Extend the user
+          // Custom fields
+          locale: profile.locale,
+          additionalUserDatabaseField: `Create by keycloak provider profile callback at ${new Date().toISOString()}`,
+        };
+      },
+      account(tokens) {
+        return {
+          ...tokens,
+          additionalAccountDatabaseField: `Create by keycloak provider profile callback at ${new Date().toISOString()}`,
         };
       },
     }),
     nodemailer({
       server: process.env.EMAIL_SERVER,
       from: process.env.EMAIL_FROM,
+      /* sendVerificationRequest: ({ url }) => {
+        console.log("nodemailer:", url);
+      }, */
     }),
   ],
-  /* session: {
+  session: {
     strategy: "jwt",
-  }, */
+  },
   callbacks: {
-    jwt: ({ token, user, profile }) => {
-      // Include user id in the JWT token
+    jwt: ({ token, user, account, trigger }) => {
+      //console.log("callbacks.jwt", token, user, account);
+
+      /**
+       * For jwt session strategy, we need to forward additional fields to the token
+       */
       if (user) {
-        token.id = user.id;
+        if (user.id) {
+          token.id = user.id;
+        }
+        token.additionalUserDatabaseField = user.additionalUserDatabaseField;
       }
-      // Include roles in the JWT token
-      if (profile) {
-        token.roles = profile.roles;
+
+      // Add virtual field to the token
+      token.additionalUserVirtualField = `Create by jwt callback at ${new Date().toISOString()}`;
+
+      /**
+       * Add roles to the token
+       * - Extract roles from the token for keycloak provider
+       * - otherwise use default roles ["user"]
+       */
+      if (trigger === "signIn" || trigger === "signUp") {
+        const roles: string[] = ["user"];
+        if (account?.provider === "keycloak" && account.access_token) {
+          const decodedToken = jwt.decode(account.access_token);
+          if (decodedToken && typeof decodedToken !== "string") {
+            roles.push(
+              ...(decodedToken.resource_access?.[process.env.AUTH_KEYCLOAK_ID!]?.roles ?? []),
+            );
+          }
+        }
+        token.roles = [...new Set(roles)];
       }
+
       return token;
     },
-    session: ({ session, user, token }) => {
-      // session strategy: "jwt"
+    session: ({ session, token }) => {
+      //console.log("callbacks.session", session, user, token);
+
+      /**
+       * For jwt session strategy, we need to forward additional fields to the session
+       */
       if (token) {
         if (token.id) {
           session.user.id = token.id;
         }
+
+        session.user.additionalUserDatabaseField = token.additionalUserDatabaseField;
+        session.user.additionalUserVirtualField = token.additionalUserVirtualField;
+
         session.user.roles = token.roles;
       }
-      // session strategy: "database"
-      if (user) {
-        session.user.id = user.id;
-      }
+
       return session;
     },
-    /* signIn: async () => {
-      console.log("signIn auth.ts");
-      return true;
-    }, */
     authorized: ({ auth }) => {
       // Logged in users are authenticated, otherwise redirect to login page
       return !!auth;
     },
   },
+  /* events: {
+    signIn: () => {
+      console.log("original events.signIn");
+    },
+  }, */
 };

packages/dev/src/payload-types.ts

@@ -67,6 +67,9 @@ export interface User {
   emailVerified?: string | null;
   name?: string | null;
   image?: string | null;
+  additionalUserDatabaseField: string;
+  additionalUserVirtualField?: string | null;
+  locale?: string | null;
   roles?: string[];
   accounts?:
     | {
@@ -75,13 +78,16 @@ export interface User {
         providerAccountId: string;
         type: string;
         access_token?: string | null;
+        additionalAccountDatabaseField: string;
+        createdAt: string;
       }[]
     | null;
   verificationTokens?:
     | {
         id?: string | null;
         token: string;
         expires: string;
+        createdAt: string;
       }[]
     | null;
   updatedAt: string;
@@ -164,6 +170,9 @@ export interface UsersSelect<T extends boolean = true> {
   emailVerified?: T;
   name?: T;
   image?: T;
+  additionalUserDatabaseField?: T;
+  additionalUserVirtualField?: T;
+  locale?: T;
   roles?: T;
   accounts?:
     | T
@@ -173,13 +182,16 @@ export interface UsersSelect<T extends boolean = true> {
         providerAccountId?: T;
         type?: T;
         access_token?: T;
+        additionalAccountDatabaseField?: T;
+        createdAt?: T;
       };
   verificationTokens?:
     | T
     | {
         id?: T;
         token?: T;
         expires?: T;
+        createdAt?: T;
       };
   updatedAt?: T;
   createdAt?: T;

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

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from "payload";
+import { createdAtField } from "../fields/createdAt";
 
 const Users: CollectionConfig = {
   slug: "users",
@@ -33,12 +34,50 @@ const Users: CollectionConfig = {
           name: "access_token",
           type: "text",
         },
+        {
+          name: "additionalAccountDatabaseField",
+          type: "text",
+          required: true,
+        },
+        createdAtField,
       ],
     },
+    /* {
+      name: "sessions",
+      type: "array",
+      fields: [createdAtField],
+    }, */
+    {
+      name: "verificationTokens",
+      type: "array",
+      fields: [createdAtField],
+    },
     // Add custom field
+    {
+      name: "additionalUserDatabaseField",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "additionalUserVirtualField",
+      type: "text",
+      virtual: true,
+      admin: {
+        hidden: true,
+      },
+    },
+    {
+      name: "locale",
+      type: "text",
+    },
+    /**
+     * Add roles field
+     * This field will not be stored in the database
+     */
     {
       name: "roles",
       type: "json",
+      virtual: true,
       typescriptSchema: [
         () => ({
           type: "array",
@@ -47,6 +86,9 @@ const Users: CollectionConfig = {
           },
         }),
       ],
+      admin: {
+        hidden: true,
+      },
     },
   ],
 };

packages/dev/src/payload/fields/createdAt.ts

@@ -0,0 +1,8 @@
+import { type Field } from "payload";
+
+export const createdAtField: Field = {
+  name: "createdAt",
+  type: "date",
+  required: true,
+  defaultValue: () => new Date(),
+};