refactor(next): use cookie storage (#783)

Author: wangsijie

packages/next-server-actions-sample/next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

packages/next/edge/index.ts

@@ -1,5 +1,5 @@
 import { RequestCookies, ResponseCookies } from '@edge-runtime/cookies';
-import { createSession, type GetContextParameters, type InteractionMode } from '@logto/node';
+import { CookieStorage, type GetContextParameters, type InteractionMode } from '@logto/node';
 import NodeClient from '@logto/node/edge';
 import { type NextRequest } from 'next/server';
 
@@ -30,7 +30,6 @@ export default class LogtoClient extends BaseClient {
     async (request: Request) => {
       const { nodeClient, headers } = await this.createNodeClientFromEdgeRequest(request);
       await nodeClient.signIn(redirectUri, interactionMode);
-      await this.storage?.save();
 
       const response = new Response(null, {
         headers,
@@ -50,7 +49,6 @@ export default class LogtoClient extends BaseClient {
       const { nodeClient, headers } = await this.createNodeClientFromEdgeRequest(request);
       await nodeClient.signOut(redirectUri);
       await this.storage?.destroy();
-      await this.storage?.save();
 
       const response = new Response(null, {
         headers,
@@ -78,7 +76,6 @@ export default class LogtoClient extends BaseClient {
           this.config.baseUrl
         );
         await nodeClient.handleSignInCallback(callbackUrl.toString());
-        await this.storage?.save();
       }
 
       const response = new Response(null, {
@@ -102,33 +99,35 @@ export default class LogtoClient extends BaseClient {
   getLogtoContext = async (request: NextRequest, config: GetContextParameters = {}) => {
     const { nodeClient } = await this.createNodeClientFromEdgeRequest(request);
     const context = await nodeClient.getContext(config);
-    await this.storage?.save();
 
     return context;
   };
 
   async createNodeClientFromEdgeRequest(request: Request) {
-    const cookieName = `logto:${this.config.appId}`;
     const cookies = new RequestCookies(request.headers);
     const headers = new Headers();
     const responseCookies = new ResponseCookies(headers);
 
-    const nodeClient = super.createNodeClient(
-      await createSession(
-        {
-          secret: this.config.cookieSecret,
-          crypto,
-        },
-        cookies.get(cookieName)?.value ?? '',
-        (value) => {
-          responseCookies.set(cookieName, value, {
-            maxAge: 14 * 3600 * 24,
-            secure: this.config.cookieSecure,
-            sameSite: this.config.cookieSecure ? 'lax' : undefined,
-          });
-        }
-      )
-    );
+    this.storage = new CookieStorage({
+      encryptionKey: this.config.cookieSecret,
+      cookieKey: `logto:${this.config.appId}`,
+      isSecure: this.config.cookieSecure,
+      getCookie: (name) => {
+        return cookies.get(name)?.value ?? '';
+      },
+      setCookie: (name, value, options) => {
+        responseCookies.set(name, value, options);
+      },
+    });
+
+    await this.storage.init();
+
+    const nodeClient = new this.adapters.NodeClient(this.config, {
+      storage: this.storage,
+      navigate: (url) => {
+        this.navigateUrl = url;
+      },
+    });
 
     return { nodeClient, headers };
   }

packages/next/package.json

@@ -57,12 +57,14 @@
   },
   "dependencies": {
     "@edge-runtime/cookies": "^4.0.0",
-    "@logto/node": "workspace:^"
+    "@logto/node": "workspace:^",
+    "cookie": "^0.6.0"
   },
   "devDependencies": {
     "@silverhand/eslint-config": "^6.0.1",
     "@silverhand/ts-config": "^6.0.0",
     "@silverhand/ts-config-react": "^6.0.0",
+    "@types/cookie": "^0.6.0",
     "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
     "lint-staged": "^15.0.0",

packages/next/server-actions/client.test.ts

@@ -1,5 +1,3 @@
-import { type SessionData } from '@logto/node';
-
 import { type LogtoNextConfig } from '../src/types.js';
 
 import LogtoClient from './client.js';
@@ -15,8 +13,6 @@ const configs: LogtoNextConfig = {
   cookieSecure: false,
 };
 
-const setItem = vi.fn();
-const getItem = vi.fn();
 const signIn = vi.fn();
 const handleSignInCallback = vi.fn();
 const getIdTokenClaims = vi.fn(() => ({
@@ -25,27 +21,12 @@ const getIdTokenClaims = vi.fn(() => ({
 const signOut = vi.fn();
 const getContext = vi.fn(async () => ({ isAuthenticated: true }));
 
-vi.mock('../src/storage', () => ({
-  default: vi.fn(() => ({
-    setItem,
-    getItem,
-    removeItem: vi.fn(),
-    destroy: vi.fn(),
-    save: vi.fn(),
-  })),
-}));
-
 vi.mock('@logto/node', () => ({
-  createSession: vi.fn((_, cookie: string) => {
-    const data = JSON.parse(cookie) as SessionData;
-
-    const session = {
-      ...data,
-      save: vi.fn(),
-      getValues: vi.fn(async () => JSON.stringify(data)),
+  CookieStorage: vi.fn((_, cookie: string) => {
+    return {
+      init: vi.fn(),
+      destroy: vi.fn(),
     };
-
-    return session;
   }),
 }));
 
@@ -76,18 +57,17 @@ describe('Next (server actions)', () => {
   });
 
   describe('handleSignIn', () => {
-    it('should get redirect url and new cookie', async () => {
+    it('should get redirect url', async () => {
       const client = new LogtoClient(configs);
-      const { url, newCookie } = await client.handleSignIn('{}', signInUrl);
+      const { url } = await client.handleSignIn(signInUrl);
       expect(url).toEqual(signInUrl);
-      expect(newCookie).not.toBeUndefined();
     });
   });
 
   describe('handleSignInCallback', () => {
     it('should call nodClient.handleSignInCallback', async () => {
       const client = new LogtoClient(configs);
-      await client.handleSignInCallback('{}', callbackUrl);
+      await client.handleSignInCallback(callbackUrl);
       expect(handleSignInCallback).toHaveBeenCalledWith(callbackUrl);
     });
   });
@@ -103,15 +83,15 @@ describe('Next (server actions)', () => {
   describe('getLogtoContext', () => {
     it('should get context', async () => {
       const client = new LogtoClient(configs);
-      const context = await client.getLogtoContext('{}');
+      const context = await client.getLogtoContext();
       expect(context).toHaveProperty('isAuthenticated', true);
     });
   });
 
-  describe('createNodeClientFromHeaders', () => {
+  describe('createNodeClient', () => {
     it('should get node client', async () => {
       const client = new LogtoClient(configs);
-      const nodeClient = await client.createNodeClientFromHeaders('{}');
+      const nodeClient = await client.createNodeClient();
       expect(nodeClient).toBeDefined();
     });
   });

packages/next/server-actions/client.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { createSession, type GetContextParameters, type InteractionMode } from '@logto/node';
+import { CookieStorage, type GetContextParameters, type InteractionMode } from '@logto/node';
 import NodeClient from '@logto/node/edge';
 
 import BaseClient from '../src/client';
@@ -18,17 +18,15 @@ export default class LogtoClient extends BaseClient {
   /**
    * Init sign-in and return the url to redirect to Logto.
    *
-   * @param cookie the raw cookie string
    * @param redirectUri the uri (callbackUri) to redirect to after sign in
    * @param interactionMode OIDC interaction mode
-   * @returns the url to redirect to and new cookie if any
+   * @returns the url to redirect
    */
   async handleSignIn(
-    cookie: string,
     redirectUri: string,
     interactionMode?: InteractionMode
   ): Promise<{ url: string; newCookie?: string }> {
-    const { nodeClient, session } = await this.createNodeClientFromHeaders(cookie);
+    const nodeClient = await this.createNodeClient();
     await nodeClient.signIn(redirectUri, interactionMode);
 
     if (!this.navigateUrl) {
@@ -38,20 +36,19 @@ export default class LogtoClient extends BaseClient {
 
     return {
       url: this.navigateUrl,
-      newCookie: await session.getValues?.(),
     };
   }
 
   /**
    * Init sign-out and return the url to redirect to Logto.
    *
-   * @param cookie the raw cookie string
    * @param redirectUri the uri (postSignOutUri) to redirect to after sign out
    * @returns the url to redirect to
    */
-  async handleSignOut(cookie: string, redirectUri = this.config.baseUrl): Promise<string> {
-    const { nodeClient } = await this.createNodeClientFromHeaders(cookie);
+  async handleSignOut(redirectUri = this.config.baseUrl): Promise<string> {
+    const nodeClient = await this.createNodeClient();
     await nodeClient.signOut(redirectUri);
+    await this.storage?.destroy();
 
     if (!this.navigateUrl) {
       // Not expected to happen
@@ -64,42 +61,51 @@ export default class LogtoClient extends BaseClient {
   /**
    * Handle sign-in callback from Logto.
    *
-   * @param cookie the raw cookie string
    * @param callbackUrl the uri (callbackUri) to redirect to after sign in, should match the one used in handleSignIn
-   * @returns new cookie if any
    */
-  async handleSignInCallback(cookie: string, callbackUrl: string): Promise<string | undefined> {
-    const { nodeClient, session } = await this.createNodeClientFromHeaders(cookie);
+  async handleSignInCallback(callbackUrl: string) {
+    const nodeClient = await this.createNodeClient();
 
     await nodeClient.handleSignInCallback(callbackUrl);
-    return session.getValues?.();
   }
 
   /**
    * Get Logto context from cookies.
    *
-   * @param cookie the raw cookie string
    * @param config additional configs of GetContextParameters
    * @returns LogtoContext
    */
-  async getLogtoContext(cookie: string, config: GetContextParameters = {}) {
-    const { nodeClient } = await this.createNodeClientFromHeaders(cookie);
+  async getLogtoContext(config: GetContextParameters = {}) {
+    const nodeClient = await this.createNodeClient({ ignoreCookieChange: true });
     const context = await nodeClient.getContext(config);
 
     return context;
   }
 
-  async createNodeClientFromHeaders(cookie: string) {
-    const session = await createSession(
-      {
-        secret: this.config.cookieSecret,
-        crypto,
+  async createNodeClient({ ignoreCookieChange }: { ignoreCookieChange?: boolean } = {}) {
+    const { cookies } = await import('next/headers');
+    this.storage = new CookieStorage({
+      encryptionKey: this.config.cookieSecret,
+      cookieKey: `logto:${this.config.appId}`,
+      isSecure: this.config.cookieSecure,
+      getCookie: (...args) => {
+        return cookies().get(...args)?.value ?? '';
       },
-      cookie
-    );
+      setCookie: (...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 nodeClient = super.createNodeClient(session);
+    await this.storage.init();
 
-    return { nodeClient, session };
+    return new this.adapters.NodeClient(this.config, {
+      storage: this.storage,
+      navigate: (url) => {
+        this.navigateUrl = url;
+      },
+    });
   }
 }