feat(mobile): ios oauth & magic-link login (#8581)

Co-authored-by: EYHN <cneyhn@gmail.com>

packages/frontend/core/src/commands/affine-help.tsx

@@ -4,15 +4,17 @@ import { ContactWithUsIcon, NewIcon } from '@blocksuite/icons/rc';
 import type { createStore } from 'jotai';
 
 import { openSettingModalAtom } from '../components/atoms';
-import { popupWindow } from '../utils';
+import type { UrlService } from '../modules/url';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineHelpCommands({
   t,
   store,
+  urlService,
 }: {
   t: ReturnType<typeof useI18n>;
   store: ReturnType<typeof createStore>;
+  urlService: UrlService;
 }) {
   const unsubs: Array<() => void> = [];
   unsubs.push(
@@ -23,7 +25,7 @@ export function registerAffineHelpCommands({
       label: t['com.affine.cmdk.affine.whats-new'](),
       run() {
         track.$.cmdk.help.openChangelog();
-        popupWindow(BUILD_CONFIG.changelogUrl);
+        urlService.openPopupWindow(BUILD_CONFIG.changelogUrl);
       },
     })
   );

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -1,7 +1,6 @@
 import { Skeleton } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
-import { popupWindow } from '@affine/core/utils';
-import { appInfo } from '@affine/electron-api';
+import { UrlService } from '@affine/core/modules/url';
 import { OAuthProviderType } from '@affine/graphql';
 import { GithubIcon, GoogleDuotoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -31,10 +30,12 @@ const OAuthProviderMap: Record<
 
 export function OAuth({ redirectUrl }: { redirectUrl?: string }) {
   const serverConfig = useService(ServerConfigService).serverConfig;
+  const urlService = useService(UrlService);
   const oauth = useLiveData(serverConfig.features$.map(r => r?.oauth));
   const oauthProviders = useLiveData(
     serverConfig.config$.map(r => r?.oauthProviders)
   );
+  const schema = urlService.getClientSchema();
 
   if (!oauth) {
     return <Skeleton height={50} />;
@@ -45,6 +46,10 @@ export function OAuth({ redirectUrl }: { redirectUrl?: string }) {
       key={provider}
       provider={provider}
       redirectUrl={redirectUrl}
+      schema={schema}
+      popupWindow={url => {
+        urlService.openPopupWindow(url);
+      }}
     />
   ));
 }
@@ -52,9 +57,13 @@ export function OAuth({ redirectUrl }: { redirectUrl?: string }) {
 function OAuthProvider({
   provider,
   redirectUrl,
+  schema,
+  popupWindow,
 }: {
   provider: OAuthProviderType;
   redirectUrl?: string;
+  schema?: string;
+  popupWindow: (url: string) => void;
 }) {
   const { icon } = OAuthProviderMap[provider];
 
@@ -67,17 +76,18 @@ function OAuthProvider({
       params.set('redirect_uri', redirectUrl);
     }
 
-    if (BUILD_CONFIG.isElectron && appInfo) {
-      params.set('client', appInfo.schema);
+    if (schema) {
+      params.set('client', schema);
     }
 
+    // TODO: Android app scheme not implemented
+    // if (BUILD_CONFIG.isAndroid) {}
+
     const oauthUrl =
-      (BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid
-        ? BUILD_CONFIG.serverUrlPrefix
-        : '') + `/oauth/login?${params.toString()}`;
+      BUILD_CONFIG.serverUrlPrefix + `/oauth/login?${params.toString()}`;
 
     popupWindow(oauthUrl);
-  }, [provider, redirectUrl]);
+  }, [popupWindow, provider, redirectUrl, schema]);
 
   return (
     <Button

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -121,9 +121,7 @@ const useSendEmail = (emailType: AuthPanelProps<'sendEmail'>['emailType']) => {
         // TODO(@eyhn): add error handler
         return trigger({
           email,
-          callbackUrl: `/auth/${callbackUrl}?isClient=${
-            BUILD_CONFIG.isElectron ? 'true' : 'false'
-          }`,
+          callbackUrl: `/auth/${callbackUrl}`,
         });
       },
       [

packages/frontend/core/src/components/affine/page-history-modal/data.ts

@@ -1,12 +1,13 @@
 import { useDocMetaHelper } from '@affine/core/components/hooks/use-block-suite-page-meta';
 import { useDocCollectionPage } from '@affine/core/components/hooks/use-block-suite-workspace-page';
+import { FetchService } from '@affine/core/modules/cloud';
 import { DebugLogger } from '@affine/debug';
 import type { ListHistoryQuery } from '@affine/graphql';
 import { listHistoryQuery, recoverDocMutation } from '@affine/graphql';
 import { i18nTime } from '@affine/i18n';
 import { assertEquals } from '@blocksuite/affine/global/utils';
 import { DocCollection } from '@blocksuite/affine/store';
-import { getAFFiNEWorkspaceSchema } from '@toeverything/infra';
+import { getAFFiNEWorkspaceSchema, useService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
 import useSWRImmutable from 'swr/immutable';
 import {
@@ -99,10 +100,13 @@ const snapshotFetcher = async (
 const docCollectionMap = new Map<string, DocCollection>();
 
 // assume the workspace is a cloud workspace since the history feature is only enabled for cloud workspace
-const getOrCreateShellWorkspace = (workspaceId: string) => {
+const getOrCreateShellWorkspace = (
+  workspaceId: string,
+  fetchService: FetchService
+) => {
   let docCollection = docCollectionMap.get(workspaceId);
   if (!docCollection) {
-    const blobStorage = new CloudBlobStorage(workspaceId);
+    const blobStorage = new CloudBlobStorage(workspaceId, fetchService);
     docCollection = new DocCollection({
       id: workspaceId,
       blobSources: {
@@ -139,13 +143,17 @@ export const useSnapshotPage = (
   pageDocId: string,
   ts?: string
 ) => {
+  const fetchService = useService(FetchService);
   const snapshot = usePageHistory(docCollection.id, pageDocId, ts);
   const page = useMemo(() => {
     if (!ts) {
       return;
     }
     const pageId = pageDocId + '-' + ts;
-    const historyShellWorkspace = getOrCreateShellWorkspace(docCollection.id);
+    const historyShellWorkspace = getOrCreateShellWorkspace(
+      docCollection.id,
+      fetchService
+    );
     let page = historyShellWorkspace.getDoc(pageId);
     if (!page && snapshot) {
       page = historyShellWorkspace.createDoc({
@@ -159,15 +167,18 @@ export const useSnapshotPage = (
       }); // must load before applyUpdate
     }
     return page ?? undefined;
-  }, [pageDocId, snapshot, ts, docCollection]);
+  }, [ts, pageDocId, docCollection.id, fetchService, snapshot]);
 
   useEffect(() => {
-    const historyShellWorkspace = getOrCreateShellWorkspace(docCollection.id);
+    const historyShellWorkspace = getOrCreateShellWorkspace(
+      docCollection.id,
+      fetchService
+    );
     // apply the rootdoc's update to the current workspace
     // this makes sure the page reference links are not deleted ones in the preview
     const update = encodeStateAsUpdate(docCollection.doc);
     applyUpdate(historyShellWorkspace.doc, update);
-  }, [docCollection]);
+  }, [docCollection, fetchService]);
 
   return page;
 };

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -5,20 +5,22 @@ import {
   SettingWrapper,
 } from '@affine/component/setting-components';
 import { useAppUpdater } from '@affine/core/components/hooks/use-app-updater';
+import { UrlService } from '@affine/core/modules/url';
 import { useI18n } from '@affine/i18n';
 import { mixpanel } from '@affine/track';
 import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
 import { useCallback } from 'react';
 
 import { useAppSettingHelper } from '../../../../../components/hooks/affine/use-app-setting-helper';
 import { appIconMap, appNames } from '../../../../../desktop/pages/open-app';
-import { popupWindow } from '../../../../../utils';
 import { relatedLinks } from './config';
 import * as styles from './style.css';
 import { UpdateCheckSection } from './update-check-section';
 
 export const AboutAffine = () => {
   const t = useI18n();
+  const urlService = useService(UrlService);
   const { appSettings, updateSettings } = useAppSettingHelper();
   const { toggleAutoCheck, toggleAutoDownload } = useAppUpdater();
   const channel = BUILD_CONFIG.appBuildType;
@@ -100,7 +102,7 @@ export const AboutAffine = () => {
               desc={t['com.affine.aboutAFFiNE.changelog.description']()}
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                popupWindow(BUILD_CONFIG.changelogUrl);
+                urlService.openPopupWindow(BUILD_CONFIG.changelogUrl);
               }}
             >
               <ArrowRightSmallIcon />
@@ -144,7 +146,7 @@ export const AboutAffine = () => {
               <div
                 className={styles.communityItem}
                 onClick={() => {
-                  popupWindow(link);
+                  urlService.openPopupWindow(link);
                 }}
                 key={title}
               >

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { ThemeEditorService } from '@affine/core/modules/theme-editor';
-import { popupWindow } from '@affine/core/utils';
+import { UrlService } from '@affine/core/modules/url';
 import { apis } from '@affine/electron-api';
 import { DeleteIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -11,14 +11,15 @@ import { useCallback } from 'react';
 export const ThemeEditorSetting = () => {
   const themeEditor = useService(ThemeEditorService);
   const modified = useLiveData(themeEditor.modified$);
+  const urlService = useService(UrlService);
 
   const open = useCallback(() => {
     if (BUILD_CONFIG.isElectron) {
       apis?.ui.openThemeEditor().catch(console.error);
-    } else {
-      popupWindow('/theme-editor');
+    } else if (BUILD_CONFIG.isMobileWeb || BUILD_CONFIG.isWeb) {
+      urlService.openPopupWindow(location.origin + '/theme-editor');
     }
-  }, []);
+  }, [urlService]);
 
   return (
     <SettingRow

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -14,6 +14,7 @@ import {
   InvoicesService,
   SubscriptionService,
 } from '@affine/core/modules/cloud';
+import { UrlService } from '@affine/core/modules/url';
 import type { InvoicesQuery } from '@affine/graphql';
 import {
   createCustomerPortalMutation,
@@ -32,7 +33,6 @@ import { useSetAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 
 import { useMutation } from '../../../../../components/hooks/use-mutation';
-import { popupWindow } from '../../../../../utils';
 import {
   openSettingModalAtom,
   type PlansScrollAnchor,
@@ -456,15 +456,16 @@ const PaymentMethodUpdater = () => {
   const { isMutating, trigger } = useMutation({
     mutation: createCustomerPortalMutation,
   });
+  const urlService = useService(UrlService);
   const t = useI18n();
 
   const update = useAsyncCallback(async () => {
     await trigger(null, {
       onSuccess: data => {
-        popupWindow(data.createCustomerPortal);
+        urlService.openPopupWindow(data.createCustomerPortal);
       },
     });
-  }, [trigger]);
+  }, [trigger, urlService]);
 
   return (
     <Button onClick={update} loading={isMutating} disabled={isMutating}>
@@ -575,12 +576,13 @@ const InvoiceLine = ({
   invoice: NonNullable<InvoicesQuery['currentUser']>['invoices'][0];
 }) => {
   const t = useI18n();
+  const urlService = useService(UrlService);
 
   const open = useCallback(() => {
     if (invoice.link) {
-      popupWindow(invoice.link);
+      urlService.openPopupWindow(invoice.link);
     }
-  }, [invoice.link]);
+  }, [invoice.link, urlService]);
 
   const planText =
     invoice.plan === SubscriptionPlan.AI

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/checkout-slot.tsx

@@ -1,6 +1,6 @@
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { SubscriptionService } from '@affine/core/modules/cloud';
-import { popupWindow } from '@affine/core/utils';
+import { UrlService } from '@affine/core/modules/url';
 import type { CreateCheckoutSessionInput } from '@affine/graphql';
 import { useService } from '@toeverything/infra';
 import { nanoid } from 'nanoid';
@@ -32,6 +32,7 @@ export const CheckoutSlot = ({
   const [idempotencyKey, setIdempotencyKey] = useState(nanoid());
   const [isMutating, setMutating] = useState(false);
   const [isOpenedExternalWindow, setOpenedExternalWindow] = useState(false);
+  const urlService = useService(UrlService);
 
   const subscriptionService = useService(SubscriptionService);
 
@@ -63,7 +64,7 @@ export const CheckoutSlot = ({
         idempotencyKey,
         ...checkoutOptions,
       });
-      popupWindow(session);
+      urlService.openPopupWindow(session);
       setOpenedExternalWindow(true);
       setIdempotencyKey(nanoid());
       onCheckoutSuccess?.();
@@ -79,6 +80,7 @@ export const CheckoutSlot = ({
     onCheckoutError,
     onCheckoutSuccess,
     subscriptionService,
+    urlService,
   ]);
 
   return <Renderer onClick={subscribe} loading={isMutating} />;

packages/frontend/core/src/components/hooks/use-app-updater.ts

@@ -1,13 +1,13 @@
+import { UrlService } from '@affine/core/modules/url';
 import type { UpdateMeta } from '@affine/electron-api';
 import { apis, events } from '@affine/electron-api';
 import { track } from '@affine/track';
-import { appSettingAtom } from '@toeverything/infra';
+import { appSettingAtom, useService } from '@toeverything/infra';
 import { atom, useAtom, useAtomValue } from 'jotai';
 import { atomWithObservable, atomWithStorage } from 'jotai/utils';
 import { useCallback, useState } from 'react';
 import { Observable } from 'rxjs';
 
-import { popupWindow } from '../../utils';
 import { useAsyncCallback } from './affine-async-hooks';
 
 function rpcToObservable<
@@ -104,6 +104,7 @@ const currentChangelogUnreadAtom = atom(
 export const useAppUpdater = () => {
   const [appQuitting, setAppQuitting] = useState(false);
   const updateReady = useAtomValue(updateReadyAtom);
+  const urlService = useService(UrlService);
   const [setting, setSetting] = useAtom(appSettingAtom);
   const downloadProgress = useAtomValue(downloadProgressAtom);
   const [changelogUnread, setChangelogUnread] = useAtom(
@@ -177,9 +178,9 @@ export const useAppUpdater = () => {
 
   const openChangelog = useAsyncCallback(async () => {
     track.$.navigationPanel.bottomButtons.openChangelog();
-    popupWindow(BUILD_CONFIG.changelogUrl);
+    urlService.openPopupWindow(BUILD_CONFIG.changelogUrl);
     await setChangelogUnread(true);
-  }, [setChangelogUnread]);
+  }, [setChangelogUnread, urlService]);
 
   const dismissChangelog = useAsyncCallback(async () => {
     track.$.navigationPanel.bottomButtons.dismissChangelog();

packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts

@@ -1,5 +1,6 @@
 import { AppSidebarService } from '@affine/core/modules/app-sidebar';
 import { I18nService } from '@affine/core/modules/i18n';
+import { UrlService } from '@affine/core/modules/url';
 import { useI18n } from '@affine/i18n';
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { useService, WorkspaceService } from '@toeverything/infra';
@@ -66,6 +67,7 @@ export function useRegisterWorkspaceCommands() {
   const t = useI18n();
   const theme = useTheme();
   const currentWorkspace = useService(WorkspaceService).workspace;
+  const urlService = useService(UrlService);
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
   const navigationHelper = useNavigateHelper();
   const [editor] = useActiveBlocksuiteEditor();
@@ -162,10 +164,11 @@ export function useRegisterWorkspaceCommands() {
     const unsub = registerAffineHelpCommands({
       store,
       t,
+      urlService,
     });
 
     return () => {
       unsub();
     };
-  }, [store, t]);
+  }, [store, t, urlService]);
 }

packages/frontend/core/src/components/pure/help-island/index.tsx

@@ -1,5 +1,5 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { popupWindow } from '@affine/core/utils';
+import { UrlService } from '@affine/core/modules/url';
 import { useI18n } from '@affine/i18n';
 import { CloseIcon, NewIcon } from '@blocksuite/icons/rc';
 import {
@@ -34,8 +34,9 @@ const showList = BUILD_CONFIG.isElectron
   : DEFAULT_SHOW_LIST;
 
 export const HelpIsland = () => {
-  const { globalContextService } = useServices({
+  const { globalContextService, urlService } = useServices({
     GlobalContextService,
+    UrlService,
   });
   const docId = useLiveData(globalContextService.globalContext.docId.$);
   const docMode = useLiveData(globalContextService.globalContext.docMode.$);
@@ -79,7 +80,7 @@ export const HelpIsland = () => {
             <StyledIconWrapper
               data-testid="right-bottom-change-log-icon"
               onClick={() => {
-                popupWindow(BUILD_CONFIG.changelogUrl);
+                urlService.openPopupWindow(BUILD_CONFIG.changelogUrl);
               }}
             >
               <NewIcon />

packages/frontend/core/src/desktop/pages/workspace/share/share-page.tsx

@@ -7,7 +7,7 @@ import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-he
 import { PageDetailEditor } from '@affine/core/components/page-detail-editor';
 import { SharePageNotFoundError } from '@affine/core/components/share-page-not-found-error';
 import { AppContainer, MainContainer } from '@affine/core/components/workspace';
-import { AuthService } from '@affine/core/modules/cloud';
+import { AuthService, FetchService } from '@affine/core/modules/cloud';
 import {
   type Editor,
   type EditorSelector,
@@ -147,6 +147,7 @@ const SharePageInner = ({
   templateSnapshotUrl?: string;
 }) => {
   const workspacesService = useService(WorkspacesService);
+  const fetchService = useService(FetchService);
 
   const [workspace, setWorkspace] = useState<Workspace | null>(null);
   const [page, setPage] = useState<Doc | null>(null);
@@ -181,7 +182,7 @@ const SharePageInner = ({
           return EmptyBlobStorage;
         },
         getRemoteBlobStorages() {
-          return [new CloudBlobStorage(workspaceId)];
+          return [new CloudBlobStorage(workspaceId, fetchService)];
         },
       }
     );
@@ -220,6 +221,7 @@ const SharePageInner = ({
     selector,
     workspaceBinary,
     docBinary,
+    fetchService,
   ]);
 
   const pageTitle = useLiveData(page?.title$);

packages/frontend/core/src/mobile/router.tsx

@@ -85,6 +85,10 @@ export const topLevelRoutes = [
         path: '/redirect-proxy',
         lazy: () => import('@affine/core/desktop/pages/redirect'),
       },
+      {
+        path: '/open-app/:action',
+        lazy: () => import('@affine/core/desktop/pages/open-app'),
+      },
       {
         path: '*',
         lazy: () => import('./pages/404'),

packages/frontend/core/src/modules/app-sidebar/views/app-updater-button/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from '@affine/component';
 import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
-import { popupWindow } from '@affine/core/utils';
+import { UrlService } from '@affine/core/modules/url';
 import { Unreachable } from '@affine/env/constant';
 import { useI18n } from '@affine/i18n';
 import {
@@ -9,6 +9,7 @@ import {
   NewIcon,
   ResetIcon,
 } from '@blocksuite/icons/rc';
+import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
 
@@ -186,6 +187,7 @@ export function AppUpdaterButton({
   className,
   style,
 }: AddPageButtonProps) {
+  const urlService = useService(UrlService);
   const handleClick = useCallback(() => {
     if (updateReady) {
       onQuitAndInstall();
@@ -197,7 +199,7 @@ export function AppUpdaterButton({
           onDownloadUpdate();
         }
       } else {
-        popupWindow(
+        urlService.openPopupWindow(
           `https://github.com/toeverything/AFFiNE/releases/tag/v${updateAvailable.version}`
         );
       }
@@ -213,6 +215,7 @@ export function AppUpdaterButton({
     onQuitAndInstall,
     autoDownload,
     onDownloadUpdate,
+    urlService,
     onOpenChangelog,
   ]);
 

packages/frontend/core/src/modules/cloud/index.ts

@@ -6,6 +6,7 @@ export {
   isNetworkError,
   NetworkError,
 } from './error';
+export { WebSocketAuthProvider } from './provider/websocket-auth';
 export { AccountChanged, AuthService } from './services/auth';
 export { FetchService } from './services/fetch';
 export { GraphQLService } from './services/graphql';
@@ -26,6 +27,7 @@ import {
   WorkspaceScope,
 } from '@toeverything/infra';
 
+import { UrlService } from '../url';
 import { CloudDocMeta } from './entities/cloud-doc-meta';
 import { Invoices } from './entities/invoices';
 import { ServerConfig } from './entities/server-config';
@@ -35,6 +37,8 @@ import { SubscriptionPrices } from './entities/subscription-prices';
 import { UserCopilotQuota } from './entities/user-copilot-quota';
 import { UserFeature } from './entities/user-feature';
 import { UserQuota } from './entities/user-quota';
+import { DefaultFetchProvider, FetchProvider } from './provider/fetch';
+import { WebSocketAuthProvider } from './provider/websocket-auth';
 import { AuthService } from './services/auth';
 import { CloudDocMetaService } from './services/cloud-doc-meta';
 import { FetchService } from './services/fetch';
@@ -57,17 +61,25 @@ import { UserQuotaStore } from './stores/user-quota';
 
 export function configureCloudModule(framework: Framework) {
   framework
-    .service(FetchService)
+    .service(FetchService, [FetchProvider])
+    .impl(FetchProvider, DefaultFetchProvider)
     .service(GraphQLService, [FetchService])
-    .service(WebSocketService, [AuthService])
+    .service(
+      WebSocketService,
+      f =>
+        new WebSocketService(
+          f.get(AuthService),
+          f.getOptional(WebSocketAuthProvider)
+        )
+    )
     .service(ServerConfigService)
     .entity(ServerConfig, [ServerConfigStore])
     .store(ServerConfigStore, [GraphQLService])
-    .service(AuthService, [FetchService, AuthStore])
+    .service(AuthService, [FetchService, AuthStore, UrlService])
     .store(AuthStore, [FetchService, GraphQLService, GlobalState])
     .entity(AuthSession, [AuthStore])
     .service(SubscriptionService, [SubscriptionStore])
-    .store(SubscriptionStore, [GraphQLService, GlobalCache])
+    .store(SubscriptionStore, [GraphQLService, GlobalCache, UrlService])
     .entity(Subscription, [AuthService, ServerConfigService, SubscriptionStore])
     .entity(SubscriptionPrices, [ServerConfigService, SubscriptionStore])
     .service(UserQuotaService)

packages/frontend/core/src/modules/cloud/provider/fetch.ts

@@ -0,0 +1,16 @@
+import { createIdentifier } from '@toeverything/infra';
+
+import type { FetchInit } from '../services/fetch';
+
+export interface FetchProvider {
+  /**
+   * standard fetch, in ios&android, we can use native fetch to implement this
+   */
+  fetch: (input: string | URL, init?: FetchInit) => Promise<Response>;
+}
+
+export const FetchProvider = createIdentifier<FetchProvider>('FetchProvider');
+
+export const DefaultFetchProvider = {
+  fetch: globalThis.fetch.bind(globalThis),
+};

packages/frontend/core/src/modules/cloud/provider/websocket-auth.ts

@@ -0,0 +1,22 @@
+import { createIdentifier } from '@toeverything/infra';
+
+export interface WebSocketAuthProvider {
+  /**
+   * Returns the token and userId for WebSocket authentication
+   *
+   * Useful when cookies are not available for WebSocket connections
+   *
+   * @param url - The URL of the WebSocket endpoint
+   */
+  getAuthToken: (url: string) => Promise<
+    | {
+        token?: string;
+        userId?: string;
+      }
+    | undefined
+  >;
+}
+
+export const WebSocketAuthProvider = createIdentifier<WebSocketAuthProvider>(
+  'WebSocketAuthProvider'
+);

packages/frontend/core/src/modules/cloud/services/auth.ts

@@ -1,6 +1,6 @@
 import { notify } from '@affine/component';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
-import { apis, appInfo, events } from '@affine/electron-api';
+import { apis, events } from '@affine/electron-api';
 import type { OAuthProviderType } from '@affine/graphql';
 import { I18n } from '@affine/i18n';
 import { track } from '@affine/track';
@@ -13,6 +13,7 @@ import {
 } from '@toeverything/infra';
 import { distinctUntilChanged, map, skip } from 'rxjs';
 
+import type { UrlService } from '../../url';
 import { type AuthAccountInfo, AuthSession } from '../entities/session';
 import type { AuthStore } from '../stores/auth';
 import type { FetchService } from './fetch';
@@ -44,7 +45,8 @@ export class AuthService extends Service {
 
   constructor(
     private readonly fetchService: FetchService,
-    private readonly store: AuthStore
+    private readonly store: AuthStore,
+    private readonly urlService: UrlService
   ) {
     super();
 
@@ -117,14 +119,14 @@ export class AuthService extends Service {
   ) {
     track.$.$.auth.signIn({ method: 'magic-link' });
     try {
+      const scheme = this.urlService.getClientSchema();
       const magicLinkUrlParams = new URLSearchParams();
       if (redirectUrl) {
         magicLinkUrlParams.set('redirect_uri', redirectUrl);
       }
-      magicLinkUrlParams.set(
-        'client',
-        BUILD_CONFIG.isElectron && appInfo ? appInfo.schema : 'web'
-      );
+      if (scheme) {
+        magicLinkUrlParams.set('client', scheme);
+      }
       await this.fetchService.fetch('/api/auth/sign-in', {
         method: 'POST',
         body: JSON.stringify({

packages/frontend/core/src/modules/cloud/services/fetch.ts

@@ -3,6 +3,7 @@ import { UserFriendlyError } from '@affine/graphql';
 import { fromPromise, Service } from '@toeverything/infra';
 
 import { BackendError, NetworkError } from '../error';
+import type { FetchProvider } from '../provider/fetch';
 
 export function getAffineCloudBaseUrl(): string {
   if (BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid) {
@@ -17,6 +18,9 @@ const logger = new DebugLogger('affine:fetch');
 export type FetchInit = RequestInit & { timeout?: number };
 
 export class FetchService extends Service {
+  constructor(private readonly fetchProvider: FetchProvider) {
+    super();
+  }
   rxFetch = (
     input: string,
     init?: RequestInit & {
@@ -50,13 +54,15 @@ export class FetchService extends Service {
       abortController.abort('timeout');
     }, timeout);
 
-    const res = await fetch(new URL(input, getAffineCloudBaseUrl()), {
-      ...init,
-      signal: abortController.signal,
-    }).catch(err => {
-      logger.debug('network error', err);
-      throw new NetworkError(err);
-    });
+    const res = await this.fetchProvider
+      .fetch(new URL(input, getAffineCloudBaseUrl()), {
+        ...init,
+        signal: abortController.signal,
+      })
+      .catch(err => {
+        logger.debug('network error', err);
+        throw new NetworkError(err);
+      });
     clearTimeout(timeoutId);
     if (res.status === 504) {
       const error = new Error('Gateway Timeout');

packages/frontend/core/src/modules/cloud/services/websocket.ts

@@ -1,6 +1,7 @@
 import { ApplicationStarted, OnEvent, Service } from '@toeverything/infra';
 import { Manager } from 'socket.io-client';
 
+import type { WebSocketAuthProvider } from '../provider/websocket-auth';
 import { getAffineCloudBaseUrl } from '../services/fetch';
 import type { AuthService } from './auth';
 import { AccountChanged } from './auth';
@@ -13,10 +14,26 @@ export class WebSocketService extends Service {
     transports: ['websocket'],
     secure: location.protocol === 'https:',
   });
-  socket = this.ioManager.socket('/');
+  socket = this.ioManager.socket('/', {
+    auth: this.webSocketAuthProvider
+      ? cb => {
+          this.webSocketAuthProvider
+            ?.getAuthToken(`${getAffineCloudBaseUrl()}/`)
+            .then(v => {
+              cb(v ?? {});
+            })
+            .catch(e => {
+              console.error('Failed to get auth token for websocket', e);
+            });
+        }
+      : undefined,
+  });
   refCount = 0;
 
-  constructor(private readonly authService: AuthService) {
+  constructor(
+    private readonly authService: AuthService,
+    private readonly webSocketAuthProvider?: WebSocketAuthProvider
+  ) {
     super();
   }
 

packages/frontend/core/src/modules/cloud/stores/subscription.ts

@@ -1,4 +1,3 @@
-import { appInfo } from '@affine/electron-api';
 import type {
   CreateCheckoutSessionInput,
   SubscriptionRecurring,
@@ -15,6 +14,7 @@ import {
 import type { GlobalCache } from '@toeverything/infra';
 import { Store } from '@toeverything/infra';
 
+import type { UrlService } from '../../url';
 import type { SubscriptionType } from '../entities/subscription';
 import { getAffineCloudBaseUrl } from '../services/fetch';
 import type { GraphQLService } from '../services/graphql';
@@ -22,14 +22,15 @@ import type { GraphQLService } from '../services/graphql';
 const SUBSCRIPTION_CACHE_KEY = 'subscription:';
 
 const getDefaultSubscriptionSuccessCallbackLink = (
-  plan: SubscriptionPlan | null
+  plan: SubscriptionPlan | null,
+  schema?: string
 ) => {
   const path =
     plan === SubscriptionPlan.AI ? '/ai-upgrade-success' : '/upgrade-success';
   const urlString = getAffineCloudBaseUrl() + path;
   const url = new URL(urlString);
-  if (BUILD_CONFIG.isElectron && appInfo) {
-    url.searchParams.set('schema', appInfo.schema);
+  if (schema) {
+    url.searchParams.set('schema', schema);
   }
   return url.toString();
 };
@@ -37,7 +38,8 @@ const getDefaultSubscriptionSuccessCallbackLink = (
 export class SubscriptionStore extends Store {
   constructor(
     private readonly gqlService: GraphQLService,
-    private readonly globalCache: GlobalCache
+    private readonly globalCache: GlobalCache,
+    private readonly urlService: UrlService
   ) {
     super();
   }
@@ -129,7 +131,10 @@ export class SubscriptionStore extends Store {
           ...input,
           successCallbackLink:
             input.successCallbackLink ||
-            getDefaultSubscriptionSuccessCallbackLink(input.plan),
+            getDefaultSubscriptionSuccessCallbackLink(
+              input.plan,
+              this.urlService.getClientSchema()
+            ),
         },
       },
     });

packages/frontend/core/src/modules/index.ts

@@ -28,6 +28,7 @@ import { configureSystemFontFamilyModule } from './system-font-family';
 import { configureTagModule } from './tag';
 import { configureTelemetryModule } from './telemetry';
 import { configureThemeEditorModule } from './theme-editor';
+import { configureUrlModule } from './url';
 import { configureUserspaceModule } from './userspace';
 
 export function configureCommonModules(framework: Framework) {
@@ -61,4 +62,5 @@ export function configureCommonModules(framework: Framework) {
   configureDocInfoModule(framework);
   configureAppSidebarModule(framework);
   configureJournalModule(framework);
+  configureUrlModule(framework);
 }

packages/frontend/core/src/modules/url/index.ts

@@ -0,0 +1,20 @@
+import type { Framework } from '@toeverything/infra';
+
+import { ClientSchemaProvider } from './providers/client-schema';
+import { PopupWindowProvider } from './providers/popup-window';
+import { UrlService } from './services/url';
+
+export { ClientSchemaProvider } from './providers/client-schema';
+export { PopupWindowProvider } from './providers/popup-window';
+export { UrlService } from './services/url';
+
+export const configureUrlModule = (container: Framework) => {
+  container.service(
+    UrlService,
+    f =>
+      new UrlService(
+        f.getOptional(PopupWindowProvider),
+        f.getOptional(ClientSchemaProvider)
+      )
+  );
+};

packages/frontend/core/src/modules/url/providers/client-schema.ts

@@ -0,0 +1,12 @@
+import { createIdentifier } from '@toeverything/infra';
+
+export interface ClientSchemaProvider {
+  /**
+   * Get the client schema in the current environment, used for the user to complete the authentication process in the browser and redirect back to the app.
+   */
+  getClientSchema(): string | undefined;
+}
+
+export const ClientSchemaProvider = createIdentifier<ClientSchemaProvider>(
+  'ClientSchemaProvider'
+);

packages/frontend/core/src/modules/url/providers/popup-window.ts

@@ -0,0 +1,13 @@
+import { createIdentifier } from '@toeverything/infra';
+
+export interface PopupWindowProvider {
+  /**
+   * open a popup window, provide different implementations in different environments.
+   * e.g. in electron, use system default browser to open a popup window.
+   */
+  open(url: string): void;
+}
+
+export const PopupWindowProvider = createIdentifier<PopupWindowProvider>(
+  'PopupWindowProvider'
+);

packages/frontend/core/src/modules/url/services/url.ts

@@ -0,0 +1,31 @@
+import { Service } from '@toeverything/infra';
+
+import type { ClientSchemaProvider } from '../providers/client-schema';
+import type { PopupWindowProvider } from '../providers/popup-window';
+
+export class UrlService extends Service {
+  constructor(
+    // those providers are optional, because they are not always available in some environments
+    private readonly popupWindowProvider?: PopupWindowProvider,
+    private readonly clientSchemaProvider?: ClientSchemaProvider
+  ) {
+    super();
+  }
+
+  getClientSchema() {
+    return this.clientSchemaProvider?.getClientSchema();
+  }
+
+  /**
+   * open a popup window, provide different implementations in different environments.
+   * e.g. in electron, use system default browser to open a popup window.
+   *
+   * @param url only full url with http/https protocol is supported
+   */
+  openPopupWindow(url: string) {
+    if (!url.startsWith('http')) {
+      throw new Error('only full url with http/https protocol is supported');
+    }
+    this.popupWindowProvider?.open(url);
+  }
+}

packages/frontend/core/src/modules/workbench/services/workbench-new-tab-handler.ts

@@ -1,4 +1,3 @@
-import { popupWindow } from '@affine/core/utils';
 import { apis } from '@affine/electron-api';
 import { createIdentifier } from '@toeverything/infra';
 import { parsePath, type To } from 'history';
@@ -20,7 +19,7 @@ export const BrowserWorkbenchNewTabHandler: WorkbenchNewTabHandler = ({
   const link =
     basename +
     (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
-  popupWindow(link);
+  window.open(link, '_blank');
 };
 
 export const DesktopWorkbenchNewTabHandler: WorkbenchNewTabHandler = ({

packages/frontend/core/src/modules/workspace-engine/impls/cloud.ts

@@ -32,6 +32,7 @@ import { applyUpdate, encodeStateAsUpdate } from 'yjs';
 
 import type {
   AuthService,
+  FetchService,
   GraphQLService,
   WebSocketService,
 } from '../../cloud';
@@ -59,7 +60,8 @@ export class CloudWorkspaceFlavourProviderService
     private readonly authService: AuthService,
     private readonly storageProvider: WorkspaceEngineStorageProvider,
     private readonly graphqlService: GraphQLService,
-    private readonly webSocketService: WebSocketService
+    private readonly webSocketService: WebSocketService,
+    private readonly fetchService: FetchService
   ) {
     super();
   }
@@ -200,7 +202,7 @@ export class CloudWorkspaceFlavourProviderService
     // get information from both cloud and local storage
 
     // we use affine 'static' storage here, which use http protocol, no need to websocket.
-    const cloudStorage = new CloudStaticDocStorage(id);
+    const cloudStorage = new CloudStaticDocStorage(id, this.fetchService);
     const docStorage = this.storageProvider.getDocStorage(id);
     // download root doc
     const localData = await docStorage.doc.get(id);
@@ -235,7 +237,7 @@ export class CloudWorkspaceFlavourProviderService
       return localBlob;
     }
 
-    const cloudBlob = new CloudBlobStorage(id);
+    const cloudBlob = new CloudBlobStorage(id, this.fetchService);
     return await cloudBlob.get(blob);
   }
   getEngineProvider(workspaceId: string): WorkspaceEngineProvider {
@@ -255,8 +257,11 @@ export class CloudWorkspaceFlavourProviderService
       getLocalBlobStorage: () => {
         return this.storageProvider.getBlobStorage(workspaceId);
       },
-      getRemoteBlobStorages() {
-        return [new CloudBlobStorage(workspaceId), new StaticBlobStorage()];
+      getRemoteBlobStorages: () => {
+        return [
+          new CloudBlobStorage(workspaceId, this.fetchService),
+          new StaticBlobStorage(),
+        ];
       },
     };
   }

packages/frontend/core/src/modules/workspace-engine/impls/engine/blob-cloud.ts

@@ -1,7 +1,7 @@
+import type { FetchService } from '@affine/core/modules/cloud';
 import {
   deleteBlobMutation,
   fetcher,
-  getBaseUrl,
   listBlobsQuery,
   setBlobMutation,
   UserFriendlyError,
@@ -12,7 +12,10 @@ import { BlobStorageOverCapacity } from '@toeverything/infra';
 import { bufferToBlob } from '../../utils/buffer-to-blob';
 
 export class CloudBlobStorage implements BlobStorage {
-  constructor(private readonly workspaceId: string) {}
+  constructor(
+    private readonly workspaceId: string,
+    private readonly fetchService: FetchService
+  ) {}
 
   name = 'cloud';
   readonly = false;
@@ -22,15 +25,23 @@ export class CloudBlobStorage implements BlobStorage {
       ? key
       : `/api/workspaces/${this.workspaceId}/blobs/${key}`;
 
-    return fetch(getBaseUrl() + suffix, { cache: 'default' }).then(
-      async res => {
+    return this.fetchService
+      .fetch(suffix, {
+        cache: 'default',
+        headers: {
+          Accept: 'application/octet-stream', // this is necessary for ios native fetch to return arraybuffer
+        },
+      })
+      .then(async res => {
         if (!res.ok) {
           // status not in the range 200-299
           return null;
         }
         return bufferToBlob(await res.arrayBuffer());
-      }
-    );
+      })
+      .catch(() => {
+        return null;
+      });
   }
 
   async set(key: string, value: Blob) {

packages/frontend/core/src/modules/workspace-engine/impls/engine/doc-cloud-static.ts

@@ -1,15 +1,23 @@
+import type { FetchService } from '@affine/core/modules/cloud';
+
 export class CloudStaticDocStorage {
   name = 'cloud-static';
-  constructor(private readonly workspaceId: string) {}
+  constructor(
+    private readonly workspaceId: string,
+    private readonly fetchService: FetchService
+  ) {}
 
   async pull(
     docId: string
   ): Promise<{ data: Uint8Array; state?: Uint8Array | undefined } | null> {
-    const response = await fetch(
+    const response = await this.fetchService.fetch(
       `/api/workspaces/${this.workspaceId}/docs/${docId}`,
       {
         priority: 'high',
-      } as any
+        headers: {
+          Accept: 'application/octet-stream', // this is necessary for ios native fetch to return arraybuffer
+        },
+      }
     );
     if (response.ok) {
       const arrayBuffer = await response.arrayBuffer();

packages/frontend/core/src/modules/workspace-engine/index.ts

@@ -1,5 +1,6 @@
 import {
   AuthService,
+  FetchService,
   GraphQLService,
   WebSocketService,
 } from '@affine/core/modules/cloud';
@@ -33,6 +34,7 @@ export function configureBrowserWorkspaceFlavours(framework: Framework) {
       WorkspaceEngineStorageProvider,
       GraphQLService,
       WebSocketService,
+      FetchService,
     ])
     .impl(WorkspaceFlavourProvider('CLOUD'), p =>
       p.get(CloudWorkspaceFlavourProviderService)

packages/frontend/core/src/utils/index.ts

@@ -1,8 +1,6 @@
 export * from './create-emotion-cache';
 export * from './event';
 export * from './extract-emoji-icon';
-export * from './popup';
 export * from './string2color';
 export * from './toast';
 export * from './unflatten-object';
-export * from './url';

packages/frontend/core/src/utils/popup.ts

@@ -1,41 +0,0 @@
-import { DebugLogger } from '@affine/debug';
-import { apis } from '@affine/electron-api';
-
-const logger = new DebugLogger('popup');
-
-const origin =
-  BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid
-    ? BUILD_CONFIG.serverUrlPrefix
-    : location.origin;
-
-/**
- * @deprecated need to be refactored as [UrlService] dependencies on [ServerConfigService]
- */
-export function popupWindow(target: string) {
-  const isFullUrl = /^https?:\/\//.test(target);
-
-  const redirectProxy = origin + '/redirect-proxy';
-  target = isFullUrl ? target : origin + target;
-
-  const targetUrl = new URL(target);
-
-  let url: string;
-  // safe to open directly if in the same origin
-  if (targetUrl.origin === origin) {
-    url = target;
-  } else {
-    const search = new URLSearchParams({
-      redirect_uri: target,
-    });
-
-    url = `${redirectProxy}?${search.toString()}`;
-  }
-
-  if (BUILD_CONFIG.isElectron) {
-    apis?.ui.openExternal(url).catch(e => {
-      logger.error('Failed to open external URL', e);
-    });
-  } else {
-    window.open(url, '_blank', `noreferrer noopener`);
-  }
-}

packages/frontend/core/src/utils/url.ts

@@ -1,33 +0,0 @@
-import { appInfo } from '@affine/electron-api';
-
-interface AppUrlOptions {
-  desktop?: boolean | string;
-  openInHiddenWindow?: boolean;
-  redirectFromWeb?: boolean;
-}
-
-export function buildAppUrl(path: string, opts: AppUrlOptions = {}) {
-  // TODO(@EYHN): should use server base url
-  const webBase = BUILD_CONFIG.serverUrlPrefix;
-  // TODO(@pengx17): how could we know the corresponding app schema in web environment
-  if (opts.desktop && appInfo?.schema) {
-    const urlCtor = new URL(path, webBase);
-
-    if (opts.openInHiddenWindow) {
-      urlCtor.searchParams.set('hidden', 'true');
-    }
-
-    const url = `${appInfo.schema}://${urlCtor.pathname}${urlCtor.search}`;
-
-    if (opts.redirectFromWeb) {
-      const redirect_uri = new URL('/open-app/url', webBase);
-      redirect_uri.searchParams.set('url', url);
-
-      return redirect_uri.toString();
-    }
-
-    return url;
-  } else {
-    return new URL(path, webBase).toString();
-  }
-}