fix(PayloadSessionProvider): Fix broken PayloadSessionProvider

CrawlerCode · CrawlerCode · commit 67df23dfe6d3 · 2025-02-09T23:29:00.000+01:00
- Add loading state
- Add refresh function
- Move PayloadSessionProvider export to client scope
- Remove PayloadSessionProviderWrapper
diff --git a/packages/dev/src/app/(app)/page.tsx b/packages/dev/src/app/(app)/page.tsx
@@ -1,4 +1,5 @@
-import { PayloadSessionProvider } from "payload-authjs";
+import { getPayloadSession } from "payload-authjs";
+import { PayloadSessionProvider } from "payload-authjs/client";
 import { AuthjsProviders } from "../components/auth/authjs/AuthjsProviders";
 import { AuthjsSessionClient } from "../components/auth/authjs/AuthjsSessionClient";
 import { AuthjsSessionServer } from "../components/auth/authjs/AuthjsSessionServer";
@@ -10,7 +11,7 @@ import { SignInOrOutButtons } from "../components/auth/SignInOrOutButtons";
 import ExampleList from "../components/ExampleList";
 import { Tabs } from "../components/general/Tabs";
 
-const Page = () => {
+const Page = async () => {
   return (
     <main className="container mt-5">
       <SignInOrOutButtons />
@@ -24,7 +25,7 @@ const Page = () => {
           {
             label: "Payload [usePayloadSession] (client)",
             content: (
-              <PayloadSessionProvider>
+              <PayloadSessionProvider session={await getPayloadSession()}>
                 <PayloadSessionClientWithUsePayloadSession />
               </PayloadSessionProvider>
             ),
diff --git a/packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUsePayloadSession.tsx b/packages/dev/src/app/components/auth/payload/PayloadSessionClientWithUsePayloadSession.tsx
@@ -4,13 +4,15 @@ import { usePayloadSession } from "payload-authjs/client";
 import Badge from "../../general/Badge";
 
 export const PayloadSessionClientWithUsePayloadSession = () => {
-  const { session, refresh } = usePayloadSession();
+  const { status, session, refresh } = usePayloadSession();
 
   return (
     <>
       <div className="mb-2 flex flex-col items-start gap-2">
-        <Badge variant={session?.user ? "green" : "red"}>
-          status: {session?.user ? "authenticated" : "unauthenticated"}
+        <Badge
+          variant={status === "authenticated" ? "green" : status === "loading" ? "yellow" : "red"}
+        >
+          status: {status}
         </Badge>
         {session?.expires && (
           <Badge onClick={refresh}>Expires: {new Date(session.expires).toLocaleString()}</Badge>
diff --git a/packages/payload-authjs/README.md b/packages/payload-authjs/README.md
@@ -110,17 +110,20 @@ const ServerComponentExample = async () => {
 
 Instead of using the [`useSession`](https://authjs.dev/getting-started/session-management/get-session?framework=next-js-client) hook of Auth.js, you can use the `usePayloadSession` hook to get the current session in the client-side code:
 
-Before you can use the `usePayloadSession` hook, you need to wrap your app with the `PayloadSessionProvider` on the server-side:
+Before you can use the `usePayloadSession` hook, you need to wrap your app with the `PayloadSessionProvider`:
 
 ```tsx
 // layout.tsx
-import { PayloadSessionProvider } from "payload-authjs";
+import { PayloadSessionProvider } from "payload-authjs/client";
+import { getPayloadSession } from "payload-authjs";
 
-const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const Layout: React.FC<{ children: React.ReactNode }> = async ({ children }) => {
   return (
     <html lang="en">
       <body>
-        <PayloadSessionProvider>{children}</PayloadSessionProvider>
+        <PayloadSessionProvider session={await getPayloadSession()}>
+          {children}
+        </PayloadSessionProvider>
       </body>
     </html>
   );
@@ -129,6 +132,8 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 export default Layout;
 ```
 
+> ℹ️ Passing the session to the `PayloadSessionProvider` is optional, but it can be useful to avoid loading states.
+
 You are now ready to use the `usePayloadSession` hook in your client-side code:
 
 ```tsx
diff --git a/packages/payload-authjs/package.json b/packages/payload-authjs/package.json
@@ -40,6 +40,7 @@
     "payloadcms",
     "plugin",
     "typescript",
+    "nextjs",
     "react",
     "auth.js",
     "next-auth"
diff --git a/packages/payload-authjs/src/client.ts b/packages/payload-authjs/src/client.ts
@@ -1 +1,2 @@
+export { PayloadSessionProvider } from "./payload/session/PayloadSessionProvider";
 export { usePayloadSession } from "./payload/session/usePayloadSession";
diff --git a/packages/payload-authjs/src/index.ts b/packages/payload-authjs/src/index.ts
@@ -4,4 +4,3 @@ export { withPayload } from "./authjs/withPayload";
 export { getPayloadUser } from "./payload/getPayloadUser";
 export { authjsPlugin, type AuthjsPluginConfig } from "./payload/plugin";
 export { getPayloadSession, type PayloadSession } from "./payload/session/getPayloadSession";
-export { PayloadSessionProviderWrapper as PayloadSessionProvider } from "./payload/session/PayloadSessionProviderWrapper";
diff --git a/packages/payload-authjs/src/payload/session/PayloadSessionProvider.tsx b/packages/payload-authjs/src/payload/session/PayloadSessionProvider.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import type { CollectionSlug, DataFromCollectionSlug } from "payload";
-import { createContext, type ReactNode, useState } from "react";
+import { createContext, type ReactNode, useCallback, useEffect, useState } from "react";
 import type { PayloadSession } from "./getPayloadSession";
 
 export interface SessionContext<TSlug extends CollectionSlug> {
+  /**
+   * The status of the session
+   */
+  status: "loading" | "authenticated" | "unauthenticated";
   /**
    * The session
    */
@@ -13,11 +17,17 @@ export interface SessionContext<TSlug extends CollectionSlug> {
    * Function to refresh the session
    */
   refresh: () => Promise<PayloadSession<TSlug> | null>;
+  /**
+   * Function to refetch the session from the server
+   */
+  refetch: () => Promise<PayloadSession<TSlug> | null>;
 }
 
 export const Context = createContext<SessionContext<never>>({
+  status: "loading",
   session: null,
   refresh: () => new Promise(resolve => resolve(null)),
+  refetch: () => new Promise(resolve => resolve(null)),
 });
 
 interface Props<TSlug extends CollectionSlug> {
@@ -28,25 +38,62 @@ interface Props<TSlug extends CollectionSlug> {
    */
   userCollectionSlug?: TSlug;
   /**
-   * The session (if available)
+   * The session from the server
+   *
+   * @default null
    */
-  session: PayloadSession<TSlug> | null;
+  session?: PayloadSession<TSlug> | null;
   /**
    * The children to render
    */
   children: ReactNode;
 }
 
 /**
- * PayloadSessionProvider (client-side) that provides the session to the context provider
+ * PayloadSessionProvider that provides the session to the context provider
  */
 export const PayloadSessionProvider = <TSlug extends CollectionSlug = "users">({
   userCollectionSlug = "users" as TSlug,
-  session,
+  session = null,
   children,
 }: Props<TSlug>) => {
+  const [isLoading, setIsLoading] = useState(!session);
   const [localSession, setLocalSession] = useState<PayloadSession<TSlug> | null>(session);
 
+  /**
+   * Function to fetch the session
+   */
+  const fetchSession = useCallback(async () => {
+    // Fetch the session from the server
+    const response = await fetch(`/api/${userCollectionSlug}/me`);
+    const result: { user: DataFromCollectionSlug<TSlug>; exp: number } = await response.json();
+
+    // Set loading to false
+    setIsLoading(false);
+
+    // If the response is not ok or the user is not present, return null
+    if (!response.ok || !result.user) {
+      return null;
+    }
+
+    // Update the local session
+    const localSession = {
+      user: result.user,
+      expires: new Date(result.exp * 1000).toISOString(),
+    };
+    setLocalSession(localSession);
+
+    // Return the session
+    return localSession;
+  }, [userCollectionSlug]);
+
+  /**
+   * On mount, fetch the session
+   */
+  useEffect(() => {
+    void fetchSession();
+  }, [fetchSession]);
+
   /**
    * Function to refresh the session
    */
@@ -76,8 +123,10 @@ export const PayloadSessionProvider = <TSlug extends CollectionSlug = "users">({
   return (
     <Context
       value={{
+        status: isLoading ? "loading" : localSession ? "authenticated" : "unauthenticated",
         session: localSession,
         refresh,
+        refetch: fetchSession,
       }}
     >
       {children}
diff --git a/packages/payload-authjs/src/payload/session/PayloadSessionProviderWrapper.tsx b/packages/payload-authjs/src/payload/session/PayloadSessionProviderWrapper.tsx

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+export { PayloadSessionProvider } from "./payload/session/PayloadSessionProvider";`
`1`	`2`	`export { usePayloadSession } from "./payload/session/usePayloadSession";`