feat(next): support nextjs 15 async cookies (#884)

Author: wangsijie

.changeset/spicy-lizards-kick.md

@@ -0,0 +1,6 @@
+---
+"@logto/next": minor
+"@logto/node": minor
+---
+
+Support Next.js 15 async cookies

packages/next-sample/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@logto/next": "workspace:^",
-    "next": "^14.2.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^15.0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "swr": "^2.0.0"
   },
   "devDependencies": {

packages/next-server-actions-sample/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@logto/next": "workspace:^",
-    "next": "^14.2.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^15.0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@silverhand/ts-config": "^6.0.0",
@@ -21,7 +21,7 @@
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.50.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^15.0.4",
     "lint-staged": "^15.0.0",
     "postcss": "^8.4.31",
     "postcss-modules": "^6.0.0",

packages/next/package.json

@@ -63,11 +63,11 @@
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
     "lint-staged": "^15.0.0",
-    "next": "^14.2.10",
-    "next-test-api-route-handler": "^4.0.0",
+    "next": "^15.0.4",
+    "next-test-api-route-handler": "^4.0.14",
     "prettier": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "^5.3.3",
     "vitest": "^1.6.0"
   },

packages/next/server-actions/client.ts

@@ -108,13 +108,15 @@ export default class LogtoClient extends BaseClient {
       encryptionKey: this.config.cookieSecret,
       cookieKey: `logto_${this.config.appId}`,
       isSecure: this.config.cookieSecure,
-      getCookie: (...args) => {
-        return cookies().get(...args)?.value ?? '';
+      getCookie: async (...args) => {
+        const cookieStore = await cookies();
+        return cookieStore.get(...args)?.value ?? '';
       },
-      setCookie: (...args) => {
+      setCookie: async (...args) => {
         // In server component (RSC), it is not allowed to modify cookies, see https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options.
         if (!ignoreCookieChange) {
-          cookies().set(...args);
+          const cookieStore = await cookies();
+          cookieStore.set(...args);
         }
       },
     });

packages/node/src/utils/cookie-storage.test.ts

@@ -26,8 +26,10 @@ const createCookieConfig = (
   const cookies = new Map(Object.entries(initialCookies));
   return {
     encryptionKey,
-    getCookie: (name: string) => cookies.get(name),
-    setCookie: (name: string, value: string) => cookies.set(name, value),
+    getCookie: async (name: string) => cookies.get(name),
+    setCookie: async (name: string, value: string) => {
+      cookies.set(name, value);
+    },
     ...otherConfigs,
   };
 };
@@ -68,7 +70,8 @@ describe('CookieStorage', () => {
 
     await storage.setItem(PersistKey.AccessToken, 'baz');
     expect(storage.data).toEqual({ [PersistKey.AccessToken]: 'baz' });
-    expect(await unwrapSession(storage.config.getCookie('logtoCookies')!, encryptionKey)).toEqual({
+    const cookie = await storage.config.getCookie('logtoCookies');
+    expect(await unwrapSession(cookie ?? '', encryptionKey)).toEqual({
       [PersistKey.AccessToken]: 'baz',
     });
   });
@@ -85,7 +88,8 @@ describe('CookieStorage', () => {
 
     await storage.removeItem(PersistKey.AccessToken);
     expect(storage.data).toEqual({});
-    expect(await unwrapSession(storage.config.getCookie('foo')!, encryptionKey)).toEqual({});
+    const cookie = await storage.config.getCookie('foo');
+    expect(await unwrapSession(cookie ?? '', encryptionKey)).toEqual({});
   });
 });
 
@@ -137,7 +141,8 @@ describe('CookieStorage concurrency', () => {
     };
     expect(storage.data).toEqual(result);
 
-    const unwrapped = await unwrapSession(storage.config.getCookie('logtoCookies')!, encryptionKey);
+    const cookie = await storage.config.getCookie('logtoCookies');
+    const unwrapped = await unwrapSession(cookie ?? '', encryptionKey);
 
     if (StorageClass === NoQueueTestCookieStorage) {
       expect(unwrapped).not.toEqual(result);

packages/node/src/utils/cookie-storage.ts

@@ -14,12 +14,12 @@ export type CookieConfig = {
   cookieKey?: string;
   /** Set to true in https */
   isSecure?: boolean;
-  getCookie: (name: string) => string | undefined;
+  getCookie: (name: string) => Promise<string | undefined> | string | undefined;
   setCookie: (
     name: string,
     value: string,
     options: CookieSerializeOptions & { path: string }
-  ) => void;
+  ) => Promise<void> | void;
 };
 
 /**
@@ -56,7 +56,7 @@ export class CookieStorage implements Storage<PersistKey> {
   async init() {
     const { encryptionKey } = this.config;
     this.sessionData = await unwrapSession(
-      this.config.getCookie(this.cookieKey) ?? '',
+      (await this.config.getCookie(this.cookieKey)) ?? '',
       encryptionKey
     );
   }
@@ -88,6 +88,6 @@ export class CookieStorage implements Storage<PersistKey> {
   protected async write(data = this.sessionData) {
     const { encryptionKey } = this.config;
     const value = await wrapSession(data, encryptionKey);
-    this.config.setCookie(this.cookieKey, value, this.cookieOptions);
+    await this.config.setCookie(this.cookieKey, value, this.cookieOptions);
   }
 }

packages/nuxt/src/runtime/composables/use-logto-client.ts

@@ -1,6 +1,5 @@
-import type LogtoClient from '@logto/node';
-
 import { useNuxtApp } from '#app';
+import type LogtoClient from '@logto/node';
 
 /**
  * Get the Logto client instance in the current context. Returns `undefined` if the client is not

packages/nuxt/src/runtime/composables/use-logto-user.ts

@@ -1,9 +1,9 @@
+import { useState, useNuxtApp } from '#app';
 import type { UserInfoResponse } from '@logto/node';
+import { shallowRef } from 'vue';
 
 import { LogtoStateKey } from '../utils/constants';
 
-import { shallowRef as shallowReference, useNuxtApp, useState } from '#imports';
-
 /**
  * Get the Logto user information. If the user is not signed in, this composable will return
  * `undefined`.
@@ -25,7 +25,7 @@ import { shallowRef as shallowReference, useNuxtApp, useState } from '#imports';
 export default function useLogtoUser() {
   const nuxtApp = useNuxtApp();
   const user = useState<UserInfoResponse | undefined>(LogtoStateKey.User, () =>
-    shallowReference(nuxtApp.ssrContext?.event.context.logtoUser)
+    shallowRef(nuxtApp.ssrContext?.event.context.logtoUser)
   );
   return user.value;
 }

packages/nuxt/src/runtime/server/event-handler.ts

@@ -2,11 +2,11 @@ import LogtoClient, { CookieStorage } from '@logto/node';
 import { trySafe } from '@silverhand/essentials';
 import { defineEventHandler, getRequestURL, getCookie, setCookie, sendRedirect } from 'h3';
 
+import { useRuntimeConfig } from '#imports';
+
 import { defaults } from '../utils/constants';
 import { type LogtoRuntimeConfig } from '../utils/types';
 
-import { useRuntimeConfig } from '#imports';
-
 export default defineEventHandler(async (event) => {
   const config = useRuntimeConfig(event);
 
@@ -57,8 +57,8 @@ export default defineEventHandler(async (event) => {
     cookieKey: cookieName,
     encryptionKey: cookieEncryptionKey,
     isSecure: cookieSecure,
-    getCookie: (name) => getCookie(event, name),
-    setCookie: (name, value, options) => {
+    getCookie: async (name) => getCookie(event, name),
+    setCookie: async (name, value, options) => {
       setCookie(event, name, value, options);
     },
   });

packages/react/package.json

@@ -46,6 +46,7 @@
     "postcss": "^8.4.31",
     "prettier": "^3.0.0",
     "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "stylelint": "^16.0.0",
     "typescript": "^5.3.3",
     "vitest": "^1.6.0"