fix: Extend PayloadSession with collection and strategy

Author: CrawlerCode

packages/dev/src/app/components/auth/authjs/AuthjsSessionClient.tsx

@@ -8,13 +8,15 @@ export const AuthjsSessionClient = () => {
 
   return (
     <>
-      <div className="mb-2 flex flex-col items-start gap-2">
+      <div className="mb-2 flex gap-1">
         <Badge
           variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
         >
-          status: {status}
+          Status: {status}
         </Badge>
-        {session?.expires && <Badge>Expires: {new Date(session.expires).toLocaleString()}</Badge>}
+        {session?.expires && (
+          <Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
+        )}
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

packages/dev/src/app/components/auth/authjs/AuthjsSessionServer.tsx

@@ -6,11 +6,13 @@ export const AuthjsSessionServer = async () => {
 
   return (
     <>
-      <div className="mb-2 flex flex-col items-start gap-2">
+      <div className="mb-2 flex gap-1">
         <Badge variant={session ? "green" : "red"}>
-          status: {session ? "authenticated" : "unauthenticated"}
+          Status: {session ? "authenticated" : "unauthenticated"}
         </Badge>
-        {session?.expires && <Badge>Expires: {new Date(session.expires).toLocaleString()}</Badge>}
+        {session?.expires && (
+          <Badge variant="yellow">Expires: {new Date(session.expires).toLocaleString()}</Badge>
+        )}
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUseAuth.tsx

@@ -9,9 +9,9 @@ export const PayloadSessionClientWithUseAuth = () => {
 
   return (
     <>
-      <div className="mb-2 flex flex-col items-start gap-2">
+      <div className="mb-2 flex gap-1">
         <Badge variant={user ? "green" : "red"}>
-          status: {user ? "authenticated" : "unauthenticated"}
+          Status: {user ? "authenticated" : "unauthenticated"}
         </Badge>
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">

packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUsePayloadSession.tsx

@@ -8,15 +8,21 @@ export const PayloadSessionClientWithUsePayloadSession = () => {
 
   return (
     <>
-      <div className="mb-2 flex flex-col items-start gap-2">
+      <div className="mb-2 flex gap-1">
         <Badge
           variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
         >
-          status: {status}
+          Status: {status}
         </Badge>
         {session?.expires && (
-          <Badge onClick={refresh}>Expires: {new Date(session.expires).toLocaleString()}</Badge>
+          <Badge variant="yellow" onClick={refresh}>
+            Expires: {new Date(session.expires).toLocaleString()}
+          </Badge>
         )}
+        {session?.collection ? (
+          <Badge variant="dark">Collection: {session.collection}</Badge>
+        ) : null}
+        {session?.strategy ? <Badge variant="dark">Strategy: {session.strategy}</Badge> : null}
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

packages/dev/src/app/components/auth/payload/PayloadSessionServer.tsx

@@ -7,12 +7,13 @@ export const PayloadSessionServer = async () => {
 
   return (
     <>
-      <div className="mb-2 flex flex-col items-start gap-2">
+      <div className="mb-2 flex gap-1">
         <Badge variant={session ? "green" : "red"}>
-          status: {session ? "authenticated" : "unauthenticated"}
+          Status: {session ? "authenticated" : "unauthenticated"}
         </Badge>
         {session?.expires && (
           <Badge
+            variant="yellow"
             onClick={async () => {
               "use server";
 
@@ -24,6 +25,10 @@ export const PayloadSessionServer = async () => {
             Expires: {new Date(session.expires).toLocaleString()}
           </Badge>
         )}
+        {session?.collection ? (
+          <Badge variant="dark">Collection: {session.collection}</Badge>
+        ) : null}
+        {session?.strategy ? <Badge variant="dark">Strategy: {session.strategy}</Badge> : null}
       </div>
       <pre className="overflow-auto rounded-lg bg-gray-100 p-4">
         {JSON.stringify(session?.user ?? null, null, 2)}

packages/dev/src/app/components/general/Badge.tsx

@@ -2,17 +2,18 @@ import clsx from "clsx";
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 
 interface Props extends ComponentPropsWithoutRef<"span"> {
-  variant?: "default" | "red" | "green" | "yellow";
+  variant: "dark" | "blue" | "red" | "green" | "yellow";
   children: ReactNode;
 }
 
-const Badge = ({ variant = "default", children, className, ...props }: Props) => {
+const Badge = ({ variant, children, className, ...props }: Props) => {
   return (
     <span
       className={clsx(
         "me-2 rounded-sm px-2.5 py-0.5 text-xs font-medium",
         {
-          "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300": variant === "default",
+          "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300": variant === "dark",
+          "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300": variant === "blue",
           "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300": variant === "red",
           "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300": variant === "green",
           "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300":

packages/payload-authjs/src/payload/session/PayloadSessionProvider.tsx

@@ -71,8 +71,12 @@ export const PayloadSessionProvider: React.FC<Props<CollectionSlug>> = <
       const response = await fetch(`/api/${userCollectionSlug}/me`, {
         signal,
       });
-      const result: { user: DataFromCollectionSlug<TSlug> | null; exp: number } =
-        await response.json();
+      const result: {
+        user: DataFromCollectionSlug<TSlug> | null;
+        exp: number;
+        collection?: CollectionSlug;
+        strategy?: string;
+      } = await response.json();
 
       // Set loading to false
       setIsLoading(false);
@@ -86,6 +90,8 @@ export const PayloadSessionProvider: React.FC<Props<CollectionSlug>> = <
       const localSession = {
         user: result.user,
         expires: new Date(result.exp * 1000).toISOString(),
+        collection: result.collection,
+        strategy: result.strategy,
       };
       setLocalSession(localSession);
 

packages/payload-authjs/src/payload/session/getPayloadSession.ts

@@ -1,6 +1,7 @@
 import { headers } from "next/headers";
 import type { CollectionSlug, DataFromCollectionSlug } from "payload";
 import { cache } from "react";
+import type { AUTHJS_STRATEGY_NAME } from "../AuthjsAuthStrategy";
 
 interface Options<TSlug extends CollectionSlug> {
   /**
@@ -14,6 +15,8 @@ interface Options<TSlug extends CollectionSlug> {
 export interface PayloadSession<TSlug extends CollectionSlug> {
   user: DataFromCollectionSlug<TSlug>;
   expires: string;
+  collection?: CollectionSlug;
+  strategy?: typeof AUTHJS_STRATEGY_NAME | "local-jwt" | "api-key" | ({} & string);
 }
 
 /**
@@ -40,8 +43,12 @@ export const getPayloadSession = cache(
         tags: ["payload-session"],
       },
     });
-    const result: { user: DataFromCollectionSlug<TSlug> | null; exp: number } =
-      await response.json();
+    const result: {
+      user: DataFromCollectionSlug<TSlug> | null;
+      exp: number;
+      collection?: CollectionSlug;
+      strategy?: string;
+    } = await response.json();
 
     // If the response is not ok or the user is not present, return null
     if (!response.ok || !result.user) {
@@ -52,6 +59,8 @@ export const getPayloadSession = cache(
     return {
       user: result.user,
       expires: new Date(result.exp * 1000).toISOString(),
+      collection: result.collection,
+      strategy: result.strategy,
     };
   },
 );