refactor(core): auth (#7999)

closes AF-753 AF-1227

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

@@ -30,7 +30,7 @@ const OAuthProviderMap: Record<
   },
 };
 
-export function OAuth({ redirectUri }: { redirectUri?: string | null }) {
+export function OAuth() {
   const serverConfig = useService(ServerConfigService).serverConfig;
   const oauth = useLiveData(serverConfig.features$.map(r => r?.oauth));
   const oauthProviders = useLiveData(
@@ -47,21 +47,11 @@ export function OAuth({ redirectUri }: { redirectUri?: string | null }) {
   }
 
   return oauthProviders?.map(provider => (
-    <OAuthProvider
-      key={provider}
-      provider={provider}
-      redirectUri={redirectUri}
-    />
+    <OAuthProvider key={provider} provider={provider} />
   ));
 }
 
-function OAuthProvider({
-  provider,
-  redirectUri,
-}: {
-  provider: OAuthProviderType;
-  redirectUri?: string | null;
-}) {
+function OAuthProvider({ provider }: { provider: OAuthProviderType }) {
   const { icon } = OAuthProviderMap[provider];
   const authService = useService(AuthService);
   const [isConnecting, setIsConnecting] = useState(false);
@@ -69,7 +59,7 @@ function OAuthProvider({
   const onClick = useAsyncCallback(async () => {
     try {
       setIsConnecting(true);
-      await authService.signInOauth(provider, redirectUri);
+      await authService.signInOauth(provider);
     } catch (err) {
       console.error(err);
       notify.error({ title: 'Failed to sign in, please try again.' });
@@ -77,7 +67,7 @@ function OAuthProvider({
       setIsConnecting(false);
       track.$.$.auth.oauth({ provider });
     }
-  }, [authService, provider, redirectUri]);
+  }, [authService, provider]);
 
   return (
     <Button

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -38,6 +38,7 @@ export const SignIn: FC<AuthPanelProps> = ({
 
   const [isValidEmail, setIsValidEmail] = useState(true);
   const { openModal } = useAtomValue(authAtom);
+  const errorMsg = searchParams.get('error');
 
   useEffect(() => {
     const timeout = setInterval(() => {
@@ -65,32 +66,22 @@ export const SignIn: FC<AuthPanelProps> = ({
 
     setAuthEmail(email);
     try {
-      const { hasPassword, isExist: isUserExist } =
+      const { hasPassword, registered } =
         await authService.checkUserByEmail(email);
 
       if (verifyToken) {
-        if (isUserExist) {
+        if (registered) {
           // provider password sign-in if user has by default
           //  If with payment, onl support email sign in to avoid redirect to affine app
           if (hasPassword) {
             setAuthState('signInWithPassword');
           } else {
             track.$.$.auth.signIn();
-            await authService.sendEmailMagicLink(
-              email,
-              verifyToken,
-              challenge,
-              searchParams.get('redirect_uri')
-            );
+            await authService.sendEmailMagicLink(email, verifyToken, challenge);
             setAuthState('afterSignInSendEmail');
           }
         } else {
-          await authService.sendEmailMagicLink(
-            email,
-            verifyToken,
-            challenge,
-            searchParams.get('redirect_uri')
-          );
+          await authService.sendEmailMagicLink(email, verifyToken, challenge);
           track.$.$.auth.signUp();
           setAuthState('afterSignUpSendEmail');
         }
@@ -105,15 +96,7 @@ export const SignIn: FC<AuthPanelProps> = ({
     }
 
     setIsMutating(false);
-  }, [
-    authService,
-    challenge,
-    email,
-    searchParams,
-    setAuthEmail,
-    setAuthState,
-    verifyToken,
-  ]);
+  }, [authService, challenge, email, setAuthEmail, setAuthState, verifyToken]);
 
   return (
     <>
@@ -122,7 +105,7 @@ export const SignIn: FC<AuthPanelProps> = ({
         subTitle={t['com.affine.brand.affineCloud']()}
       />
 
-      <OAuth redirectUri={searchParams.get('redirect_uri')} />
+      <OAuth />
 
       <div className={style.authModalContent}>
         <AuthInput
@@ -142,8 +125,6 @@ export const SignIn: FC<AuthPanelProps> = ({
           onEnter={onContinue}
         />
 
-        {verifyToken ? null : <Captcha />}
-
         {verifyToken ? (
           <Button
             style={{ width: '100%' }}
@@ -157,7 +138,11 @@ export const SignIn: FC<AuthPanelProps> = ({
           >
             {t['com.affine.auth.sign.email.continue']()}
           </Button>
-        ) : null}
+        ) : (
+          <Captcha />
+        )}
+
+        {errorMsg && <div className={style.errorMessage}>{errorMsg}</div>}
 
         <div className={style.authMessage}>
           {/*prettier-ignore*/}

packages/frontend/core/src/components/affine/auth/style.css.ts

@@ -14,6 +14,14 @@ export const authMessage = style({
   fontSize: cssVar('fontXs'),
   lineHeight: 1.5,
 });
+
+export const errorMessage = style({
+  marginTop: '30px',
+  color: cssVar('textHighlightForegroundRed'),
+  fontSize: cssVar('fontXs'),
+  lineHeight: 1.5,
+});
+
 globalStyle(`${authMessage} a`, {
   color: cssVar('linkColor'),
 });