fix: reload the page when login token expired (#1839)

apps/web/src/plugins/affine/__tests__/index.spec.tsx

@@ -0,0 +1,49 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import {
+  getLoginStorage,
+  isExpired,
+  loginResponseSchema,
+  parseIdToken,
+  setLoginStorage,
+} from '@affine/workspace/affine/login';
+import user1 from '@affine-test/fixtures/built-in-user1.json';
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import { useAffineRefreshAuthToken } from '../../../hooks/affine/use-affine-refresh-auth-token';
+
+afterEach(() => {
+  localStorage.clear();
+});
+
+describe('AFFiNE workspace', () => {
+  test('Provider', async () => {
+    expect(getLoginStorage()).toBeNull();
+    const data = await fetch('http://127.0.0.1:3000/api/user/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        type: 'DebugLoginUser',
+        email: user1.email,
+        password: user1.password,
+      }),
+    }).then(r => r.json());
+    loginResponseSchema.parse(data);
+    setLoginStorage({
+      // expired token that already expired
+      token:
+        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODA4MjE0OTQsImlkIjoiaFd0dkFoM1E3SGhiWVlNeGxyX1I0IiwibmFtZSI6ImRlYnVnMSIsImVtYWlsIjoiZGVidWcxQHRvZXZlcnl0aGluZy5pbmZvIiwiYXZhdGFyX3VybCI6bnVsbCwiY3JlYXRlZF9hdCI6MTY4MDgxNTcxMTAwMH0.fDSkbM-ovmGD21sKYSTuiqC1dTiceOfcgIUfI2dLsBk',
+      // but refresh is still valid
+      refresh: data.refresh,
+    });
+    renderHook(() => useAffineRefreshAuthToken(1));
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    const userData = parseIdToken(getLoginStorage()?.token as string);
+    expect(userData).not.toBeNull();
+    expect(isExpired(userData)).toBe(false);
+  });
+});

apps/web/src/plugins/affine/index.tsx

@@ -21,9 +21,10 @@ import { PageNotFoundError } from '../../components/affine/affine-error-eoundary
 import { WorkspaceSettingDetail } from '../../components/affine/workspace-setting-detail';
 import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list';
 import { PageDetailEditor } from '../../components/page-detail-editor';
+import { useAffineRefreshAuthToken } from '../../hooks/affine/use-affine-refresh-auth-token';
 import { AffineSWRConfigProvider } from '../../providers/AffineSWRConfigProvider';
 import { BlockSuiteWorkspace } from '../../shared';
-import { affineApis } from '../../shared/apis';
+import { affineApis, prefixUrl } from '../../shared/apis';
 import { initPage, toast } from '../../utils';
 import type { WorkspacePlugin } from '..';
 import { QueryKey } from './fetcher';
@@ -65,7 +66,7 @@ const getPersistenceAllWorkspace = () => {
   return allWorkspaces;
 };
 
-export const affineAuth = createAffineAuth();
+export const affineAuth = createAffineAuth(prefixUrl);
 
 export const AffinePlugin: WorkspacePlugin<WorkspaceFlavour.AFFINE> = {
   flavour: WorkspaceFlavour.AFFINE,
@@ -231,6 +232,7 @@ export const AffinePlugin: WorkspacePlugin<WorkspaceFlavour.AFFINE> = {
   },
   UI: {
     Provider: ({ children }) => {
+      useAffineRefreshAuthToken();
       return <AffineSWRConfigProvider>{children}</AffineSWRConfigProvider>;
     },
     PageDetail: ({ currentWorkspace, currentPageId }) => {