feat: support google login on desktop (#4053)

Co-authored-by: Alex Yang <himself65@outlook.com>

apps/core/src/pages/desktop-signin.tsx

@@ -0,0 +1,28 @@
+import type { LoaderFunction } from 'react-router-dom';
+import { z } from 'zod';
+
+import { signInCloud } from '../utils/cloud-utils';
+
+const supportedProvider = z.enum(['google']);
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const searchParams = url.searchParams;
+  const provider = searchParams.get('provider');
+  const callback_url = searchParams.get('callback_url');
+  if (!callback_url) {
+    return null;
+  }
+  const maybeProvider = supportedProvider.safeParse(provider);
+  if (maybeProvider.success) {
+    const provider = maybeProvider.data;
+    await signInCloud(provider, {
+      callbackUrl: callback_url,
+    });
+  }
+  return null;
+};
+
+export const Component = () => {
+  return null;
+};

apps/core/src/pages/open-app.tsx

@@ -1,9 +1,15 @@
+import { type GetCurrentUserQuery, getCurrentUserQuery } from '@affine/graphql';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { fetcher } from '@affine/workspace/affine/gql';
 import { Logo1Icon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import {
+  type LoaderFunction,
+  useLoaderData,
+  useSearchParams,
+} from 'react-router-dom';
 import { z } from 'zod';
 
 import * as styles from './open-app.css';
@@ -45,24 +51,26 @@ const appNames = {
   internal: 'AFFiNE Internal',
 } satisfies Record<Channel, string>;
 
-export const Component = () => {
+interface OpenAppProps {
+  urlToOpen?: string | null;
+  channel: Channel;
+}
+
+interface LoaderData {
+  action: 'url' | 'oauth-jwt';
+  currentUser?: GetCurrentUserQuery['currentUser'];
+}
+
+const OpenAppImpl = ({ urlToOpen, channel }: OpenAppProps) => {
   const t = useAFFiNEI18N();
-  const [params] = useSearchParams();
-  const urlToOpen = useMemo(() => params.get('url'), [params]);
-  const autoOpen = useMemo(() => params.get('open') !== 'false', [params]);
-  const channel = useMemo(() => {
-    const urlObj = new URL(urlToOpen || '');
-    const maybeSchema = appSchemas.safeParse(urlObj.protocol.replace(':', ''));
-    return schemaToChanel[maybeSchema.success ? maybeSchema.data : 'affine'];
-  }, [urlToOpen]);
-
-  const appIcon = appIconMap[channel];
-  const appName = appNames[channel];
-
   const openDownloadLink = useCallback(() => {
     const url = `https://affine.pro/download?channel=${channel}`;
     open(url, '_blank');
   }, [channel]);
+  const appIcon = appIconMap[channel];
+  const appName = appNames[channel];
+  const [params] = useSearchParams();
+  const autoOpen = useMemo(() => params.get('open') !== 'false', [params]);
 
   useEffect(() => {
     if (!urlToOpen || lastOpened === urlToOpen || !autoOpen) {
@@ -72,80 +80,133 @@ export const Component = () => {
     open(urlToOpen, '_blank');
   }, [urlToOpen, autoOpen]);
 
-  if (urlToOpen) {
-    return (
-      <div className={styles.root}>
-        <div className={styles.topNav}>
+  if (!urlToOpen) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.topNav}>
+        <a
+          href="https://affine.pro"
+          target="_blank"
+          rel="noreferrer"
+          className={styles.affineLogo}
+        >
+          <Logo1Icon width={24} height={24} />
+        </a>
+
+        <div className={styles.topNavLinks}>
           <a
             href="https://affine.pro"
             target="_blank"
             rel="noreferrer"
-            className={styles.affineLogo}
+            className={styles.topNavLink}
           >
-            <Logo1Icon width={24} height={24} />
+            Official Website
           </a>
-
-          <div className={styles.topNavLinks}>
-            <a
-              href="https://affine.pro"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.topNavLink}
-            >
-              Official Website
-            </a>
-            <a
-              href="https://community.affine.pro/home"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.topNavLink}
-            >
-              AFFiNE Community
-            </a>
-            <a
-              href="https://affine.pro/blog"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.topNavLink}
-            >
-              Blog
-            </a>
-            <a
-              href="https://affine.pro/about-us"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.topNavLink}
-            >
-              Contact us
-            </a>
-          </div>
-
-          <Button onClick={openDownloadLink}>
-            {t['com.affine.auth.open.affine.download-app']()}
-          </Button>
-        </div>
-
-        <div className={styles.centerContent}>
-          <img src={appIcon} alt={appName} width={120} height={120} />
-
-          <div className={styles.prompt}>
-            <Trans i18nKey="com.affine.auth.open.affine.prompt">
-              Open {appName} app now
-            </Trans>
-          </div>
-
           <a
-            className={styles.tryAgainLink}
-            href={urlToOpen}
+            href="https://community.affine.pro/home"
             target="_blank"
             rel="noreferrer"
+            className={styles.topNavLink}
           >
-            {t['com.affine.auth.open.affine.try-again']()}
+            AFFiNE Community
+          </a>
+          <a
+            href="https://affine.pro/blog"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.topNavLink}
+          >
+            Blog
+          </a>
+          <a
+            href="https://affine.pro/about-us"
+            target="_blank"
+            rel="noreferrer"
+            className={styles.topNavLink}
+          >
+            Contact us
           </a>
         </div>
+
+        <Button onClick={openDownloadLink}>
+          {t['com.affine.auth.open.affine.download-app']()}
+        </Button>
       </div>
-    );
-  } else {
+
+      <div className={styles.centerContent}>
+        <img src={appIcon} alt={appName} width={120} height={120} />
+
+        <div className={styles.prompt}>
+          <Trans i18nKey="com.affine.auth.open.affine.prompt">
+            Open {appName} app now
+          </Trans>
+        </div>
+
+        <a
+          className={styles.tryAgainLink}
+          href={urlToOpen}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t['com.affine.auth.open.affine.try-again']()}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+const OpenUrl = () => {
+  const [params] = useSearchParams();
+  const urlToOpen = useMemo(() => params.get('url'), [params]);
+  const channel = useMemo(() => {
+    const urlObj = new URL(urlToOpen || '');
+    const maybeSchema = appSchemas.safeParse(urlObj.protocol.replace(':', ''));
+    return schemaToChanel[maybeSchema.success ? maybeSchema.data : 'affine'];
+  }, [urlToOpen]);
+
+  return <OpenAppImpl urlToOpen={urlToOpen} channel={channel} />;
+};
+
+const OpenOAuthJwt = () => {
+  const { currentUser } = useLoaderData() as LoaderData;
+  const [params] = useSearchParams();
+  const schema = useMemo(() => {
+    const maybeSchema = appSchemas.safeParse(params.get('schema'));
+    return maybeSchema.success ? maybeSchema.data : 'affine';
+  }, [params]);
+  const channel = schemaToChanel[schema as Schema];
+
+  if (!currentUser || !currentUser?.token?.token) {
     return null;
   }
+
+  const urlToOpen = `${schema}://oauth-jwt?token=${currentUser.token.token}`;
+
+  return <OpenAppImpl urlToOpen={urlToOpen} channel={channel} />;
+};
+
+export const Component = () => {
+  const { action } = useLoaderData() as LoaderData;
+
+  if (action === 'url') {
+    return <OpenUrl />;
+  } else if (action === 'oauth-jwt') {
+    return <OpenOAuthJwt />;
+  }
+  return null;
+};
+
+export const loader: LoaderFunction = async args => {
+  const action = args.params.action || '';
+  const res = await fetcher({
+    query: getCurrentUserQuery,
+  }).catch(console.error);
+
+  return {
+    action,
+    currentUser: res?.currentUser || null,
+  };
 };