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

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

packages/frontend/apps/ios/src/app.tsx

@@ -4,14 +4,21 @@ import { Telemetry } from '@affine/core/components/telemetry';
 import { configureMobileModules } from '@affine/core/mobile/modules';
 import { router } from '@affine/core/mobile/router';
 import { configureCommonModules } from '@affine/core/modules';
+import { AuthService, WebSocketAuthProvider } from '@affine/core/modules/cloud';
 import { I18nProvider } from '@affine/core/modules/i18n';
 import { configureLocalStorageStateStorageImpls } from '@affine/core/modules/storage';
+import {
+  ClientSchemaProvider,
+  PopupWindowProvider,
+} from '@affine/core/modules/url';
 import { configureIndexedDBUserspaceStorageProvider } from '@affine/core/modules/userspace';
 import { configureBrowserWorkbenchModule } from '@affine/core/modules/workbench';
 import {
   configureBrowserWorkspaceFlavours,
   configureIndexedDBWorkspaceEngineStorageProvider,
 } from '@affine/core/modules/workspace-engine';
+import { App as CapacitorApp } from '@capacitor/app';
+import { Browser } from '@capacitor/browser';
 import {
   Framework,
   FrameworkRoot,
@@ -21,6 +28,9 @@ import {
 import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
+import { configureFetchProvider } from './fetch';
+import { Cookie } from './plugins/cookie';
+
 const future = {
   v7_startTransition: true,
 } as const;
@@ -33,6 +43,31 @@ configureBrowserWorkspaceFlavours(framework);
 configureIndexedDBWorkspaceEngineStorageProvider(framework);
 configureIndexedDBUserspaceStorageProvider(framework);
 configureMobileModules(framework);
+framework.impl(PopupWindowProvider, {
+  open: (url: string) => {
+    Browser.open({
+      url,
+      presentationStyle: 'popover',
+    }).catch(console.error);
+  },
+});
+framework.impl(ClientSchemaProvider, {
+  getClientSchema() {
+    return 'affine';
+  },
+});
+configureFetchProvider(framework);
+framework.impl(WebSocketAuthProvider, {
+  getAuthToken: async url => {
+    const cookies = await Cookie.getCookies({
+      url,
+    });
+    return {
+      userId: cookies['affine_user_id'],
+      token: cookies['affine_session'],
+    };
+  },
+});
 const frameworkProvider = framework.provider();
 
 // setup application lifecycle events, and emit application start event
@@ -41,6 +76,38 @@ window.addEventListener('focus', () => {
 });
 frameworkProvider.get(LifecycleService).applicationStart();
 
+CapacitorApp.addListener('appUrlOpen', ({ url }) => {
+  // try to close browser if it's open
+  Browser.close().catch(e => console.error('Failed to close browser', e));
+
+  const urlObj = new URL(url);
+
+  if (urlObj.hostname === 'authentication') {
+    const method = urlObj.searchParams.get('method');
+    const payload = JSON.parse(urlObj.searchParams.get('payload') ?? 'false');
+
+    if (
+      !method ||
+      (method !== 'magic-link' && method !== 'oauth') ||
+      !payload
+    ) {
+      console.error('Invalid authentication url', url);
+      return;
+    }
+
+    const authService = frameworkProvider.get(AuthService);
+    if (method === 'oauth') {
+      authService
+        .signInOauth(payload.code, payload.state, payload.provider)
+        .catch(console.error);
+    } else if (method === 'magic-link') {
+      authService
+        .signInMagicLink(payload.email, payload.token)
+        .catch(console.error);
+    }
+  }
+});
+
 export function App() {
   return (
     <Suspense>

packages/frontend/apps/ios/src/fetch.ts

@@ -0,0 +1,194 @@
+/**
+ * this file is modified from part of https://github.com/ionic-team/capacitor/blob/74c3e9447e1e32e73f818d252eb12f453d849e8d/ios/Capacitor/Capacitor/assets/native-bridge.js#L466
+ *
+ * for support arraybuffer response type
+ */
+import { FetchProvider } from '@affine/core/modules/cloud/provider/fetch';
+import { CapacitorHttp } from '@capacitor/core';
+import type { Framework } from '@toeverything/infra';
+
+const readFileAsBase64 = (file: File) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const data = reader.result;
+      if (data === null) {
+        reject(new Error('Failed to read file'));
+      } else {
+        resolve(btoa(data as string));
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsBinaryString(file);
+  });
+const convertFormData = async (formData: FormData) => {
+  const newFormData = [];
+  // @ts-expect-error FormData.entries
+  for (const pair of formData.entries()) {
+    const [key, value] = pair;
+    if (value instanceof File) {
+      const base64File = await readFileAsBase64(value);
+      newFormData.push({
+        key,
+        value: base64File,
+        type: 'base64File',
+        contentType: value.type,
+        fileName: value.name,
+      });
+    } else {
+      newFormData.push({ key, value, type: 'string' });
+    }
+  }
+  return newFormData;
+};
+const convertBody = async (body: unknown, contentType: string) => {
+  if (body instanceof ReadableStream || body instanceof Uint8Array) {
+    let encodedData;
+    if (body instanceof ReadableStream) {
+      const reader = body.getReader();
+      const chunks = [];
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+      }
+      const concatenated = new Uint8Array(
+        chunks.reduce((acc, chunk) => acc + chunk.length, 0)
+      );
+      let position = 0;
+      for (const chunk of chunks) {
+        concatenated.set(chunk, position);
+        position += chunk.length;
+      }
+      encodedData = concatenated;
+    } else {
+      encodedData = body;
+    }
+    let data = new TextDecoder().decode(encodedData);
+    let type;
+    if (contentType === 'application/json') {
+      try {
+        data = JSON.parse(data);
+      } catch {
+        // ignore
+      }
+      type = 'json';
+    } else if (contentType === 'multipart/form-data') {
+      type = 'formData';
+    } else if (
+      contentType === null || contentType === void 0
+        ? void 0
+        : contentType.startsWith('image')
+    ) {
+      type = 'image';
+    } else if (contentType === 'application/octet-stream') {
+      type = 'binary';
+    } else {
+      type = 'text';
+    }
+    return {
+      data,
+      type,
+      headers: { 'Content-Type': contentType || 'application/octet-stream' },
+    };
+  } else if (body instanceof URLSearchParams) {
+    return {
+      data: body.toString(),
+      type: 'text',
+    };
+  } else if (body instanceof FormData) {
+    const formData = await convertFormData(body);
+    return {
+      data: formData,
+      type: 'formData',
+    };
+  } else if (body instanceof File) {
+    const fileData = await readFileAsBase64(body);
+    return {
+      data: fileData,
+      type: 'file',
+      headers: { 'Content-Type': body.type },
+    };
+  }
+  return { data: body, type: 'json' };
+};
+function base64ToUint8Array(base64: string) {
+  const binaryString = atob(base64);
+  const binaryArray = binaryString.split('').map(function (char) {
+    return char.charCodeAt(0);
+  });
+  return new Uint8Array(binaryArray);
+}
+export function configureFetchProvider(framework: Framework) {
+  framework.override(FetchProvider, {
+    fetch: async (input, init) => {
+      const request = new Request(input, init);
+      const { method } = request;
+      const tag = `CapacitorHttp fetch ${Date.now()} ${input}`;
+      console.time(tag);
+      try {
+        const { body } = request;
+        // @ts-expect-error Headers.entries
+        const optionHeaders = Object.fromEntries(request.headers.entries());
+        const {
+          data: requestData,
+          type,
+          headers,
+        } = await convertBody(
+          (init === null || init === void 0 ? void 0 : init.body) ||
+            body ||
+            undefined,
+          optionHeaders['Content-Type'] || optionHeaders['content-type']
+        );
+        const nativeResponse = await CapacitorHttp.request({
+          url: request.url,
+          method: method,
+          data: requestData,
+          dataType: type as any,
+          responseType:
+            (optionHeaders['Accept'] || optionHeaders['accept']) ===
+            'application/octet-stream'
+              ? 'arraybuffer'
+              : undefined,
+          headers: Object.assign(Object.assign({}, headers), optionHeaders),
+        });
+        const contentType =
+          nativeResponse.headers['Content-Type'] ||
+          nativeResponse.headers['content-type'];
+        let data = (
+          contentType === null || contentType === void 0
+            ? void 0
+            : contentType.startsWith('application/json')
+        )
+          ? JSON.stringify(nativeResponse.data)
+          : contentType === 'application/octet-stream'
+            ? base64ToUint8Array(nativeResponse.data)
+            : nativeResponse.data;
+
+        // use null data for 204 No Content HTTP response
+        if (nativeResponse.status === 204) {
+          data = null;
+        }
+        // intercept & parse response before returning
+        const response = new Response(data, {
+          headers: nativeResponse.headers,
+          status: nativeResponse.status,
+        });
+        /*
+         * copy url to response, `cordova-plugin-ionic` uses this url from the response
+         * we need `Object.defineProperty` because url is an inherited getter on the Response
+         * see: https://stackoverflow.com/a/57382543
+         * */
+        Object.defineProperty(response, 'url', {
+          value: nativeResponse.url,
+        });
+        console.timeEnd(tag);
+        return response;
+      } catch (error) {
+        console.timeEnd(tag);
+        throw error;
+      }
+    },
+  });
+}

packages/frontend/apps/ios/src/index.tsx

@@ -18,6 +18,15 @@ import { App } from './app';
 
 function main() {
   if (BUILD_CONFIG.debug || window.SENTRY_RELEASE) {
+    // workaround for Capacitor HttpPlugin
+    // capacitor-http-plugin will replace window.XMLHttpRequest with its own implementation
+    // but XMLHttpRequest.prototype is not defined which is used by sentry
+    // see: https://github.com/ionic-team/capacitor/blob/74c3e9447e1e32e73f818d252eb12f453d849e8d/core/native-bridge.ts#L581
+    if ('CapacitorWebXMLHttpRequest' in window) {
+      window.XMLHttpRequest.prototype = (
+        window.CapacitorWebXMLHttpRequest as any
+      ).prototype;
+    }
     // https://docs.sentry.io/platforms/javascript/guides/react/#configure
     init({
       dsn: process.env.SENTRY_DSN,

packages/frontend/apps/ios/src/plugins/cookie/definitions.ts

@@ -0,0 +1,6 @@
+export interface CookiePlugin {
+  /**
+   * Returns the screen's current orientation.
+   */
+  getCookies(options: { url: string }): Promise<Record<string, string>>;
+}

packages/frontend/apps/ios/src/plugins/cookie/index.ts

@@ -0,0 +1,8 @@
+import { registerPlugin } from '@capacitor/core';
+
+import type { CookiePlugin } from './definitions';
+
+const Cookie = registerPlugin<CookiePlugin>('Cookie');
+
+export * from './definitions';
+export { Cookie };