Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 20:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support google login on desktop (#4053)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
Peng Xiao
2023-08-31 12:51:49 +08:00
committed by GitHub
parent ba735d8b57
commit 4e45554585
14 changed files with 256 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/core/src/components/affine/auth/after-sign-in-send-email.tsx
View File

@@ -35,7 +35,7 @@ export const AfterSignInSendEmail: FC<AuthPanelProps> = ({
onClick={useCallback(() => {
signInCloud('email', {
email,
callbackUrl: buildCallbackUrl('signIn'),
callbackUrl: buildCallbackUrl('/auth/signIn'),
redirect: true,
}).catch(console.error);
}, [email])}

2
apps/core/src/components/affine/auth/after-sign-up-send-email.tsx
View File

@@ -34,7 +34,7 @@ export const AfterSignUpSendEmail: FC<AuthPanelProps> = ({
onClick={useCallback(() => {
signInCloud('email', {
email: email,
callbackUrl: buildCallbackUrl('signUp'),
callbackUrl: buildCallbackUrl('/auth/signUp'),
redirect: true,
}).catch(console.error);
}, [email])}

5
apps/core/src/components/affine/auth/callback-url.ts
View File

@@ -1,9 +1,6 @@
import { isDesktop } from '@affine/env/constant';
type Action = 'signUp' | 'changePassword' | 'signIn' | 'signUp';
export function buildCallbackUrl(action: Action) {
const callbackUrl = `/auth/${action}`;
export function buildCallbackUrl(callbackUrl: string) {
const params: string[][] = [];
if (isDesktop && window.appInfo.schema) {
params.push(['schema', window.appInfo.schema]);

16
apps/core/src/components/affine/auth/sign-in.tsx
View File

@@ -1,6 +1,7 @@
import { AuthInput, ModalHeader } from '@affine/component/auth-components';
import { pushNotificationAtom } from '@affine/component/notification-center';
import type { Notification } from '@affine/component/notification-center/index.jotai';
import { isDesktop } from '@affine/env/constant';
import { getUserQuery } from '@affine/graphql';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -69,7 +70,7 @@ export const SignIn: FC<AuthPanelProps> = ({
if (user) {
signInCloud('email', {
email: email,
callbackUrl: buildCallbackUrl('signIn'),
callbackUrl: buildCallbackUrl('/auth/signIn'),
redirect: false,
})
.then(res => handleSendEmailError(res, pushNotification))
@@ -78,7 +79,7 @@ export const SignIn: FC<AuthPanelProps> = ({
} else {
signInCloud('email', {
email: email,
callbackUrl: buildCallbackUrl('signUp'),
callbackUrl: buildCallbackUrl('/auth/signUp'),
redirect: false,
})
.then(res => handleSendEmailError(res, pushNotification))
@@ -103,7 +104,16 @@ export const SignIn: FC<AuthPanelProps> = ({
}}
icon={<GoogleDuotoneIcon />}
onClick={useCallback(() => {
signInCloud('google').catch(console.error);
if (isDesktop) {
open(
`/desktop-signin?provider=google&callback_url=${buildCallbackUrl(
'/open-app/oauth-jwt'
)}`,
'_target'
);
} else {
signInCloud('google').catch(console.error);
}
}, [])}
>
{t['Continue with Google']()}

28
apps/core/src/pages/desktop-signin.tsx Normal file
View File

@@ -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;
};

211
apps/core/src/pages/open-app.tsx
View File

@@ -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,
};
};

6
apps/core/src/router.ts
View File

@@ -49,9 +49,13 @@ export const routes = [
lazy: () => import('./pages/sign-in'),
},
{
path: '/open-app',
path: '/open-app/:action',
lazy: () => import('./pages/open-app'),
},
{
path: '/desktop-signin',
lazy: () => import('./pages/desktop-signin'),
},
{
path: '*',
lazy: () => import('./pages/404'),