feat: Add getPayloadSession & usePayloadSession

Author: CrawlerCode

packages/dev/.env.example

@@ -1,5 +1,3 @@
-NEXT_PUBLIC_SERVER_URL=http://localhost:5000
-
 # Payload CMS
 PAYLOAD_SECRET=secret
 DATABASE_URI=postgres://root:root@127.0.0.1:5432/payload-authjs

packages/dev/tsconfig.json

@@ -24,7 +24,8 @@
       "payload/generated-types": ["./src/payload-types.ts"],
       "@/*": ["./src/*"],
       "payload-authjs": ["../payload-authjs/src/index.ts"],
-      "payload-authjs/components": ["../payload-authjs/src/components/index.ts"]
+      "payload-authjs/components": ["../payload-authjs/src/components/index.ts"],
+      "payload-authjs/client": ["../payload-authjs/src/client.ts"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

packages/payload-authjs/package.json

@@ -15,6 +15,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    },
     "./middleware": {
       "types": "./dist/payload/middleware.d.ts",
       "import": "./dist/payload/middleware.js",

packages/payload-authjs/src/client.ts

@@ -0,0 +1 @@
+export { usePayloadSession } from "./payload/session/usePayloadSession";

packages/payload-authjs/src/index.ts

@@ -3,3 +3,5 @@ export { type PayloadAuthjsUser } from "./authjs/types";
 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";

packages/payload-authjs/src/payload/getPayloadUser.ts

@@ -18,6 +18,8 @@ interface Options<TSlug extends CollectionSlug> {
 
 /**
  * Get the payload user from the server (only works on the server side)
+ *
+ * @deprecated Use `getPayloadSession` instead
  */
 export const getPayloadUser = async <TSlug extends CollectionSlug = "users">({
   serverUrl = process.env.NEXT_PUBLIC_SERVER_URL,

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

@@ -0,0 +1,86 @@
+"use client";
+
+import type { CollectionSlug, DataFromCollectionSlug } from "payload";
+import { createContext, type ReactNode, useState } from "react";
+import type { PayloadSession } from "./getPayloadSession";
+
+export interface SessionContext<TSlug extends CollectionSlug> {
+  /**
+   * The session
+   */
+  session: PayloadSession<TSlug> | null;
+  /**
+   * Function to refresh the session
+   */
+  refresh: () => Promise<PayloadSession<TSlug> | null>;
+}
+
+export const Context = createContext<SessionContext<never>>({
+  session: null,
+  refresh: () => new Promise(resolve => resolve(null)),
+});
+
+interface Props<TSlug extends CollectionSlug> {
+  /**
+   * The slug of the collection that contains the users
+   *
+   * @default "users"
+   */
+  userCollectionSlug?: TSlug;
+  /**
+   * The session (if available)
+   */
+  session: PayloadSession<TSlug> | null;
+  /**
+   * The children to render
+   */
+  children: ReactNode;
+}
+
+/**
+ * PayloadSessionProvider (client-side) that provides the session to the context provider
+ */
+export const PayloadSessionProvider = <TSlug extends CollectionSlug = "users">({
+  userCollectionSlug = "users" as TSlug,
+  session,
+  children,
+}: Props<TSlug>) => {
+  const [localSession, setLocalSession] = useState<PayloadSession<TSlug> | null>(session);
+
+  /**
+   * Function to refresh the session
+   */
+  const refresh = async () => {
+    // Refresh the session on the server
+    const response = await fetch(`/api/${userCollectionSlug}/refresh-token`, {
+      method: "POST",
+    });
+    const result: { user: DataFromCollectionSlug<TSlug>; exp: number } = await response.json();
+
+    // 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;
+  };
+
+  return (
+    <Context
+      value={{
+        session: localSession,
+        refresh,
+      }}
+    >
+      {children}
+    </Context>
+  );
+};

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

@@ -0,0 +1,33 @@
+import type { CollectionSlug } from "payload";
+import { type ReactNode } from "react";
+import { getPayloadSession } from "./getPayloadSession";
+import { PayloadSessionProvider } from "./PayloadSessionProvider";
+
+interface Props<TSlug extends CollectionSlug> {
+  /**
+   * The slug of the collection that contains the users
+   *
+   * @default "users"
+   */
+  userCollectionSlug?: TSlug;
+  /**
+   * The children to render
+   */
+  children: ReactNode;
+}
+
+/**
+ * PayloadSessionProvider (server-side wrapper) that fetches the session and provides it to the context provider
+ */
+export const PayloadSessionProviderWrapper = async <TSlug extends CollectionSlug = "users">({
+  userCollectionSlug,
+  children,
+}: Props<TSlug>) => {
+  const session = await getPayloadSession({ userCollectionSlug });
+
+  return (
+    <PayloadSessionProvider userCollectionSlug={userCollectionSlug} session={session}>
+      {children}
+    </PayloadSessionProvider>
+  );
+};

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

@@ -0,0 +1,64 @@
+import { cookies, headers } from "next/headers";
+import type { CollectionSlug, DataFromCollectionSlug } from "payload";
+
+interface Options<TSlug extends CollectionSlug> {
+  /**
+   * The slug of the collection that contains the users
+   *
+   * @default "users"
+   */
+  userCollectionSlug?: TSlug;
+}
+
+export interface PayloadSession<TSlug extends CollectionSlug> {
+  user: DataFromCollectionSlug<TSlug>;
+  expires: string;
+}
+
+/**
+ * Get the payload session from the server side
+ */
+export const getPayloadSession = async <TSlug extends CollectionSlug = "users">({
+  userCollectionSlug = "users" as TSlug,
+}: Options<TSlug> = {}): Promise<PayloadSession<TSlug> | null> => {
+  // Get the server URL
+  const serverUrl = await getServerUrl();
+
+  // Fetch the session from the server
+  const response = await fetch(`${serverUrl}/api/${userCollectionSlug}/me`, {
+    headers: {
+      Cookie: (await cookies()).toString(),
+    },
+  });
+  const result: { user: DataFromCollectionSlug<TSlug>; exp: number } = await response.json();
+
+  // If the response is not ok or the user is not present, return null
+  if (!response.ok || !result.user) {
+    return null;
+  }
+
+  // Return the session
+  return {
+    user: result.user,
+    expires: new Date(result.exp * 1000).toISOString(),
+  };
+};
+
+/**
+ * Get the server URL from the environment variables or the request headers
+ */
+const getServerUrl = async () => {
+  let serverUrl = process.env.NEXT_PUBLIC_SERVER_URL;
+
+  if (!serverUrl) {
+    const requestHeaders = await headers();
+
+    const detectedHost = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host");
+    const detectedProtocol = requestHeaders.get("x-forwarded-proto") ?? "https";
+    const protocol = detectedProtocol.endsWith(":") ? detectedProtocol : detectedProtocol + ":";
+
+    serverUrl = `${protocol}//${detectedHost}`;
+  }
+
+  return serverUrl;
+};

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

@@ -0,0 +1,18 @@
+"use client";
+
+import type { CollectionSlug } from "payload";
+import { use } from "react";
+import { Context, type SessionContext } from "./PayloadSessionProvider";
+
+/**
+ * Client side hook to retrieve the session from the context provider (PayloadSessionProvider)
+ */
+export const usePayloadSession = <TSlug extends CollectionSlug = "users">() => {
+  const result = use<SessionContext<TSlug>>(Context);
+
+  if (!result) {
+    throw new Error("usePayloadSession must be used within a PayloadSessionProvider");
+  }
+
+  return result;
+};