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

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

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 />