fix: stay loading when refresh token fail (#1194)

apps/web/src/components/message-center-handler/index.tsx

@@ -1,11 +1,22 @@
 import { toast } from '@affine/component';
-import { MessageCenter } from '@affine/datacenter';
+import { DataCenter, MessageCenter } from '@affine/datacenter';
 import { AffineProvider } from '@affine/datacenter';
+import { DebugLogger } from '@affine/debug';
 import { useRouter } from 'next/router';
 import { ReactNode, useCallback, useEffect } from 'react';
 
 import { useGlobalState } from '@/store/app';
 
+const logger = new DebugLogger('messageCenter');
+
+const clearAuth = (dataCenter: DataCenter, providerName: string) => {
+  const affineProvider = dataCenter.providers.find(p => p.id === providerName);
+  if (affineProvider && affineProvider instanceof AffineProvider) {
+    affineProvider.apis.auth.clear();
+  } else {
+    logger.error('cannot find affine provider, please fix this ASAP');
+  }
+};
 export function MessageCenterHandler({ children }: { children?: ReactNode }) {
   const router = useRouter();
   const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
@@ -19,14 +30,7 @@ export function MessageCenterHandler({ children }: { children?: ReactNode }) {
           // todo: error toast style
           toast('You have no permission to access this workspace');
           // todo(himself65): remove dynamic lookup
-          const affineProvider = dataCenter.providers.find(
-            p => p.id === 'affine'
-          );
-          if (affineProvider && affineProvider instanceof AffineProvider) {
-            affineProvider.apis.auth.clear();
-          } else {
-            console.error('cannot find affine provider, please fix this ASAP');
-          }
+          clearAuth(dataCenter, 'affine');
           // the status of the app right now is unknown, and it won't help if we let
           // the app continue and let the user auth the app.
           // that's why so we need to reload the page for now.
@@ -36,9 +40,16 @@ export function MessageCenterHandler({ children }: { children?: ReactNode }) {
           await router.push('/');
           router.reload();
         }
+
+        if (message.code === MessageCenter.messageCode.refreshTokenError) {
+          toast('Automatic login fail, please login self later');
+          clearAuth(dataCenter, 'affine');
+          await router.push('/');
+          router.reload();
+        }
       });
     }
-  }, [dataCenter?.providers, router]);
+  }, [dataCenter, router]);
 
   return <>{children}</>;
 }

packages/data-center/src/message/code.ts

@@ -13,6 +13,7 @@ export enum MessageCode {
   getBlobFailed,
   leaveWorkspaceFailed,
   downloadWorkspaceFailed,
+  refreshTokenError,
 }
 
 export const messages = {
@@ -58,4 +59,7 @@ export const messages = {
   [MessageCode.downloadWorkspaceFailed]: {
     message: 'Download workspace failed',
   },
+  [MessageCode.refreshTokenError]: {
+    message: 'Refresh token failed',
+  },
 };

packages/data-center/src/provider/affine/apis/google.ts

@@ -11,7 +11,9 @@ import {
 import { decode } from 'js-base64';
 import { KyInstance } from 'ky/distribution/types/ky';
 
+import { MessageCenter } from '../../../message';
 import { storage } from '../storage';
+import { RequestError } from './request-error';
 
 export interface AccessTokenMessage {
   created_at: number;
@@ -38,6 +40,9 @@ type LoginResponse = {
 
 // TODO: organize storage keys in a better way
 const AFFINE_LOGIN_STORAGE_KEY = 'affine:login';
+const messageCenter = MessageCenter.getInstance();
+const sendMessage = messageCenter.getMessageSender('affine');
+const { messageCode } = MessageCenter;
 
 /**
  * Use refresh token to get a new access token (JWT)
@@ -98,9 +103,17 @@ export class GoogleAuth {
   }
 
   async initToken(token: string) {
-    const res = await this._doLogin({ token, type: 'Google' });
-    this.setLogin(res);
-    return this._user;
+    try {
+      const res = await this._doLogin({
+        token,
+        type: 'Google',
+      });
+      this.setLogin(res);
+      return this._user;
+    } catch (error) {
+      sendMessage(messageCode.loginError);
+      throw new RequestError('Login failed', error);
+    }
   }
 
   async refreshToken(refreshToken?: string) {
@@ -117,8 +130,9 @@ export class GoogleAuth {
         this.setLogin(res);
       }
       return true;
-    } catch {
-      this._logger.warn('Failed to refresh token');
+    } catch (error) {
+      sendMessage(messageCode.refreshTokenError);
+      throw new RequestError('Refresh token failed', error);
     } finally {
       // clear on settled
       this._padding = undefined;

packages/data-center/src/provider/affine/apis/request-error.ts

@@ -0,0 +1,9 @@
+export class RequestError extends Error {
+  constructor(message: string, cause: unknown | null = null) {
+    super(message);
+    this.name = 'RequestError';
+    this.cause = cause;
+  }
+}
+
+export default RequestError;

packages/data-center/src/provider/affine/apis/workspace.ts

@@ -3,22 +3,14 @@ import { KyInstance } from 'ky/distribution/types/ky';
 import { MessageCenter } from '../../../message';
 import { createBlocksuiteWorkspace as _createBlocksuiteWorkspace } from '../../../utils';
 import { GoogleAuth } from './google';
+import RequestError from './request-error';
 import type { User } from './user';
-
 const messageCenter = MessageCenter.getInstance();
 
 const sendMessage = messageCenter.getMessageSender('affine');
 
 const { messageCode } = MessageCenter;
 
-class RequestError extends Error {
-  constructor(message: string, cause: unknown | null = null) {
-    super(message);
-    this.name = 'RequestError';
-    this.cause = cause;
-  }
-}
-
 export interface GetWorkspaceDetailParams {
   id: string;
 }