From 5828eb53b6b9b914e56bfce7a9a21c6ed6cb0a21 Mon Sep 17 00:00:00 2001
From: forehalo <forehalo@gmail.com>
Date: Wed, 22 Jan 2025 07:33:09 +0000
Subject: [PATCH] feat(core): support one time password (#9798)

---
 .../__tests__/__snapshots__/mailer.spec.ts.md | 134 ++++++++++++++++--
 .../__snapshots__/mailer.spec.ts.snap         | Bin 3787 -> 4004 bytes
 .../__tests__/nestjs/error-handler.spec.ts    |   6 +-
 packages/backend/server/src/base/error/def.ts |   8 +-
 .../backend/server/src/base/helpers/crypto.ts |  15 ++
 .../server/src/core/auth/controller.ts        |  35 ++++-
 .../backend/server/src/core/auth/service.ts   |  11 +-
 .../server/src/mails/components/template.tsx  |  32 +++++
 .../server/src/mails/users/sign-in.tsx        |  33 ++++-
 .../server/src/mails/users/sign-up.tsx        |  29 +++-
 .../auth-components/count-down-render.tsx     |  25 ----
 .../src/components/auth-components/index.tsx  |   1 -
 .../components/sign-in/sign-in-with-email.tsx | 100 +++++++++----
 .../core/src/components/sign-in/style.css.ts  |  28 +---
 packages/frontend/i18n/src/i18n.gen.ts        |  24 ++--
 packages/frontend/i18n/src/resources/en.json  |  12 +-
 16 files changed, 362 insertions(+), 131 deletions(-)
 delete mode 100644 packages/frontend/component/src/components/auth-components/count-down-render.tsx

diff --git a/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.md b/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.md
index 713f23958..f34bd485c 100644
--- a/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.md
+++ b/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.md
@@ -932,7 +932,7 @@ Generated by [AVA](https://avajs.dev).
             <p␊
               style="font-size:20px;line-height:28px;margin:24px 0 0;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
             >␊
-              Sign in to AFFiNE␊
+              Sign in to AFFiNE Cloud␊
             </p>␊
           </td>␊
         </tr>␊
@@ -962,8 +962,44 @@ Generated by [AVA](https://avajs.dev).
                   <p␊
                     style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
                   >␊
-                    Click the button below to securely sign in. The magic link will␊
-                    expire in 30 minutes.␊
+                    You are signing in to AFFiNE. Here is your code:␊
+                  </p>␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <pre␊
+                    style="font-size:15px;font-weight:400;line-height:24px;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#141414;white-space:nowrap;border:1px solid rgba(0,0,0,.1);padding:8px 10px;border-radius:4px;background-color:#F5F5F5"␊
+                  >␊
+    123456</pre␊
+                  >␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <p␊
+                    style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
+                  >␊
+                    Alternatively, you can sign in directly by clicking the magic␊
+                    link below:␊
                   </p>␊
                 </tr>␊
               </tbody>␊
@@ -979,6 +1015,7 @@ Generated by [AVA](https://avajs.dev).
               <tbody style="width:100%">␊
                 <tr style="width:100%">␊
                   <a␊
+                    href="https://app.affine.pro/magic-link?token=123456&amp;email=test@test.com"␊
                     style="line-height:24px;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;font-size:15px;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#FFFFFF;background-color:#1E96EB;padding:8px 18px 8px 18px;border-radius:8px;border:1px solid rgba(0,0,0,.1);margin-right:4px"␊
                     target="_blank"␊
                     ><span␊
@@ -989,7 +1026,7 @@ Generated by [AVA](https://avajs.dev).
                       [endif]--></span␊
                     ><span␊
                       style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:6px"␊
-                      >Sign in to AFFiNE</span␊
+                      >Sign in with Magic Link</span␊
                     ><span␊
                       ><!--[if mso␊
                         ]><i style="mso-font-width:450%" hidden␊
@@ -1001,6 +1038,27 @@ Generated by [AVA](https://avajs.dev).
                 </tr>␊
               </tbody>␊
             </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <p␊
+                    style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
+                  >␊
+                    <span␊
+                      style="font-size:14px;font-weight:400;line-height:22px;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#7A7A7A"␊
+                      >This code and link will expire in 30 minutes.</span␊
+                    >␊
+                  </p>␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
           </td>␊
         </tr>␊
       </tbody>␊
@@ -1026,7 +1084,7 @@ Generated by [AVA](https://avajs.dev).
             <p␊
               style="font-size:20px;line-height:28px;margin:24px 0 0;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
             >␊
-              Create AFFiNE Account␊
+              Sign up to AFFiNE Cloud␊
             </p>␊
           </td>␊
         </tr>␊
@@ -1056,9 +1114,44 @@ Generated by [AVA](https://avajs.dev).
                   <p␊
                     style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
                   >␊
-                    Click the button below to complete your account creation and␊
-                    sign in. This magic link will expire in␊
-                    <span style="font-weight:600">30 minutes</span>.␊
+                    You are signing up to AFFiNE. Here is your code:␊
+                  </p>␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <pre␊
+                    style="font-size:15px;font-weight:400;line-height:24px;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#141414;white-space:nowrap;border:1px solid rgba(0,0,0,.1);padding:8px 10px;border-radius:4px;background-color:#F5F5F5"␊
+                  >␊
+    123456</pre␊
+                  >␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <p␊
+                    style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
+                  >␊
+                    Alternatively, you can sign up directly by clicking the magic␊
+                    link below:␊
                   </p>␊
                 </tr>␊
               </tbody>␊
@@ -1074,7 +1167,7 @@ Generated by [AVA](https://avajs.dev).
               <tbody style="width:100%">␊
                 <tr style="width:100%">␊
                   <a␊
-                    href="https://app.affine.pro"␊
+                    href="https://app.affine.pro/magic-link?token=123456&amp;email=test@test.com"␊
                     style="line-height:24px;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;font-size:15px;font-weight:600;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#FFFFFF;background-color:#1E96EB;padding:8px 18px 8px 18px;border-radius:8px;border:1px solid rgba(0,0,0,.1);margin-right:4px"␊
                     target="_blank"␊
                     ><span␊
@@ -1085,7 +1178,7 @@ Generated by [AVA](https://avajs.dev).
                       [endif]--></span␊
                     ><span␊
                       style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:6px"␊
-                      >Create account and sign in</span␊
+                      >Sign up with Magic Link</span␊
                     ><span␊
                       ><!--[if mso␊
                         ]><i style="mso-font-width:450%" hidden␊
@@ -1097,6 +1190,27 @@ Generated by [AVA](https://avajs.dev).
                 </tr>␊
               </tbody>␊
             </table>␊
+            <table␊
+              align="center"␊
+              width="100%"␊
+              border="0"␊
+              cellpadding="0"␊
+              cellspacing="0"␊
+              role="presentation"␊
+            >␊
+              <tbody style="width:100%">␊
+                <tr style="width:100%">␊
+                  <p␊
+                    style="font-size:15px;line-height:24px;margin:24px 0 0;font-weight:400;font-family:Inter, Arial, Helvetica, sans-serif;color:#141414"␊
+                  >␊
+                    <span␊
+                      style="font-size:14px;font-weight:400;line-height:22px;font-family:Inter, Arial, Helvetica, sans-serif;margin:24px 0 0;color:#7A7A7A"␊
+                      >This code and link will expire in 30 minutes.</span␊
+                    >␊
+                  </p>␊
+                </tr>␊
+              </tbody>␊
+            </table>␊
           </td>␊
         </tr>␊
       </tbody>␊
diff --git a/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.snap b/packages/backend/server/src/__tests__/__snapshots__/mailer.spec.ts.snap
index 965d18d7c863a9ddefccf6c44be448bd475be4f0..4c90e4f6a7010283a9ad9b429c9436e181be09fd 100644
GIT binary patch
literal 4004
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
K;897A0s#PW>&-*}

literal 3787
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
BV;KMd

diff --git a/packages/backend/server/src/__tests__/nestjs/error-handler.spec.ts b/packages/backend/server/src/__tests__/nestjs/error-handler.spec.ts
index e45c67588..31c252bb3 100644
--- a/packages/backend/server/src/__tests__/nestjs/error-handler.spec.ts
+++ b/packages/backend/server/src/__tests__/nestjs/error-handler.spec.ts
@@ -140,7 +140,7 @@ test('should be able to handle unknown internal error in graphql query', async t
   t.is(err.message, 'An internal error occurred.');
   t.is(err.extensions.status, HttpStatus.INTERNAL_SERVER_ERROR);
   t.is(err.extensions.name, 'INTERNAL_SERVER_ERROR');
-  t.true(t.context.logger.error.calledOnceWith('Internal server error'));
+  t.true(t.context.logger.error.calledOnceWith('internal_server_error'));
 });
 
 test('should be able to respond request', async t => {
@@ -166,7 +166,7 @@ test('should be able to handle unknown internal error in http request', async t
     .expect(HttpStatus.INTERNAL_SERVER_ERROR);
   t.is(res.body.message, 'An internal error occurred.');
   t.is(res.body.name, 'INTERNAL_SERVER_ERROR');
-  t.true(t.context.logger.error.calledOnceWith('Internal server error'));
+  t.true(t.context.logger.error.calledOnceWith('internal_server_error'));
 });
 
 // Hard to test through websocket, will call event handler directly
@@ -196,5 +196,5 @@ test('should be able to handle unknown internal error in websocket event', async
   };
   t.is(error.message, 'An internal error occurred.');
   t.is(error.name, 'INTERNAL_SERVER_ERROR');
-  t.true(t.context.logger.error.calledOnceWith('Internal server error'));
+  t.true(t.context.logger.error.calledOnceWith('internal_server_error'));
 });
diff --git a/packages/backend/server/src/base/error/def.ts b/packages/backend/server/src/base/error/def.ts
index 10f86e41e..d02c5b7c5 100644
--- a/packages/backend/server/src/base/error/def.ts
+++ b/packages/backend/server/src/base/error/def.ts
@@ -136,8 +136,12 @@ export class UserFriendlyError extends Error {
       return;
     }
 
-    new Logger(context).error(
-      'Internal server error',
+    const logger = new Logger(context);
+    const fn = this.status >= 500 ? logger.error : logger.log;
+
+    fn.call(
+      logger,
+      this.name,
       this.cause ? ((this.cause as any).stack ?? this.cause) : this.stack
     );
   }
diff --git a/packages/backend/server/src/base/helpers/crypto.ts b/packages/backend/server/src/base/helpers/crypto.ts
index d9835794f..e9abc160f 100644
--- a/packages/backend/server/src/base/helpers/crypto.ts
+++ b/packages/backend/server/src/base/helpers/crypto.ts
@@ -5,6 +5,7 @@ import {
   createSign,
   createVerify,
   randomBytes,
+  randomInt,
   timingSafeEqual,
 } from 'node:crypto';
 
@@ -109,6 +110,20 @@ export class CryptoHelper {
     return randomBytes(length);
   }
 
+  randomInt(min: number, max: number) {
+    return randomInt(min, max);
+  }
+
+  otp(length = 6) {
+    let otp = '';
+
+    for (let i = 0; i < length; i++) {
+      otp += this.randomInt(0, 9).toString();
+    }
+
+    return otp;
+  }
+
   sha256(data: string) {
     return createHash('sha256').update(data).digest();
   }
diff --git a/packages/backend/server/src/core/auth/controller.ts b/packages/backend/server/src/core/auth/controller.ts
index 4ba205609..4dd0abbc4 100644
--- a/packages/backend/server/src/core/auth/controller.ts
+++ b/packages/backend/server/src/core/auth/controller.ts
@@ -14,7 +14,9 @@ import {
 import type { Request, Response } from 'express';
 
 import {
+  Cache,
   Config,
+  CryptoHelper,
   EarlyAccessRequired,
   EmailTokenNotFound,
   InternalServerError,
@@ -49,6 +51,8 @@ interface MagicLinkCredential {
   token: string;
 }
 
+const OTP_CACHE_KEY = (otp: string) => `magic-link-otp:${otp}`;
+
 @Throttle('strict')
 @Controller('/api/auth')
 export class AuthController {
@@ -57,7 +61,9 @@ export class AuthController {
     private readonly auth: AuthService,
     private readonly models: Models,
     private readonly config: Config,
-    private readonly runtime: Runtime
+    private readonly runtime: Runtime,
+    private readonly cache: Cache,
+    private readonly crypto: CryptoHelper
   ) {
     if (config.node.dev) {
       // set DNS servers in dev mode
@@ -190,13 +196,20 @@ export class AuthController {
       }
     }
 
+    const ttlInSec = 30 * 60;
     const token = await this.models.verificationToken.create(
       TokenType.SignIn,
-      email
+      email,
+      ttlInSec
     );
 
+    const otp = this.crypto.otp();
+    // TODO(@forehalo): this is a temporary solution, we should not rely on cache to store the otp
+    const cacheKey = OTP_CACHE_KEY(otp);
+    await this.cache.set(cacheKey, token, { ttl: ttlInSec * 1000 });
+
     const magicLink = this.url.link(callbackUrl, {
-      token,
+      token: otp,
       email,
       ...(redirectUrl
         ? {
@@ -205,7 +218,12 @@ export class AuthController {
         : {}),
     });
 
-    const result = await this.auth.sendSignInEmail(email, magicLink, !user);
+    const result = await this.auth.sendSignInEmail(
+      email,
+      magicLink,
+      otp,
+      !user
+    );
 
     if (result.rejected.length) {
       throw new InternalServerError('Failed to send sign-in email.');
@@ -247,9 +265,16 @@ export class AuthController {
 
     validators.assertValidEmail(email);
 
+    const cacheKey = OTP_CACHE_KEY(token);
+    const cachedToken = await this.cache.get<string>(cacheKey);
+
+    if (!cachedToken) {
+      throw new InvalidEmailToken();
+    }
+
     const tokenRecord = await this.models.verificationToken.verify(
       TokenType.SignIn,
-      token,
+      cachedToken,
       {
         credential: email,
       }
diff --git a/packages/backend/server/src/core/auth/service.ts b/packages/backend/server/src/core/auth/service.ts
index d2fdfa62f..59ca9197c 100644
--- a/packages/backend/server/src/core/auth/service.ts
+++ b/packages/backend/server/src/core/auth/service.ts
@@ -322,9 +322,14 @@ export class AuthService implements OnApplicationBootstrap {
     });
   }
 
-  async sendSignInEmail(email: string, link: string, signUp: boolean) {
+  async sendSignInEmail(
+    email: string,
+    link: string,
+    otp: string,
+    signUp: boolean
+  ) {
     return signUp
-      ? await this.mailer.sendSignUpMail(email, { url: link })
-      : await this.mailer.sendSignInMail(email, { url: link });
+      ? await this.mailer.sendSignUpMail(email, { url: link, otp })
+      : await this.mailer.sendSignInMail(email, { url: link, otp });
   }
 }
diff --git a/packages/backend/server/src/mails/components/template.tsx b/packages/backend/server/src/mails/components/template.tsx
index 908350f9b..b09e641ea 100644
--- a/packages/backend/server/src/mails/components/template.tsx
+++ b/packages/backend/server/src/mails/components/template.tsx
@@ -46,6 +46,21 @@ export function Text(props: PropsWithChildren) {
   return <span style={BasicTextStyle}>{props.children}</span>;
 }
 
+export function SecondaryText(props: PropsWithChildren) {
+  return (
+    <span
+      style={{
+        ...BasicTextStyle,
+        color: '#7A7A7A',
+        fontSize: '14px',
+        lineHeight: '22px',
+      }}
+    >
+      {props.children}
+    </span>
+  );
+}
+
 export function Bold(props: PropsWithChildren) {
   return <span style={{ fontWeight: 600 }}>{props.children}</span>;
 }
@@ -70,6 +85,23 @@ export const Avatar = (props: {
   );
 };
 
+export const OnelineCodeBlock = (props: PropsWithChildren) => {
+  return (
+    <pre
+      style={{
+        ...BasicTextStyle,
+        whiteSpace: 'nowrap',
+        border: '1px solid rgba(0,0,0,.1)',
+        padding: '8px 10px',
+        borderRadius: '4px',
+        backgroundColor: '#F5F5F5',
+      }}
+    >
+      {props.children}
+    </pre>
+  );
+};
+
 export const Name = (props: PropsWithChildren) => {
   return <Bold>{props.children}</Bold>;
 };
diff --git a/packages/backend/server/src/mails/users/sign-in.tsx b/packages/backend/server/src/mails/users/sign-in.tsx
index 1a7799cbd..479579638 100644
--- a/packages/backend/server/src/mails/users/sign-in.tsx
+++ b/packages/backend/server/src/mails/users/sign-in.tsx
@@ -1,20 +1,41 @@
-import { Button, Content, P, Template, Title } from '../components';
+import {
+  Button,
+  Content,
+  OnelineCodeBlock,
+  P,
+  SecondaryText,
+  Template,
+  Title,
+} from '../components';
 
 export type SignInProps = {
   url: string;
+  otp: string;
 };
 
-export default function SignUp(props: SignInProps) {
+export default function SignIn(props: SignInProps) {
   return (
     <Template>
-      <Title>Sign in to AFFiNE</Title>
+      <Title>Sign in to AFFiNE Cloud</Title>
       <Content>
+        <P>You are signing in to AFFiNE. Here is your code:</P>
+        <OnelineCodeBlock>{props.otp}</OnelineCodeBlock>
         <P>
-          Click the button below to securely sign in. The magic link will expire
-          in 30 minutes.
+          Alternatively, you can sign in directly by clicking the magic link
+          below:
+        </P>
+        <Button href={props.url}>Sign in with Magic Link</Button>
+        <P>
+          <SecondaryText>
+            This code and link will expire in 30 minutes.
+          </SecondaryText>
         </P>
-        <Button href={props.url}>Sign in to AFFiNE</Button>
       </Content>
     </Template>
   );
 }
+
+SignIn.PreviewProps = {
+  url: 'https://app.affine.pro/magic-link?token=123456&email=test@test.com',
+  otp: '123456',
+};
diff --git a/packages/backend/server/src/mails/users/sign-up.tsx b/packages/backend/server/src/mails/users/sign-up.tsx
index 66dab2716..2c1ecb40d 100644
--- a/packages/backend/server/src/mails/users/sign-up.tsx
+++ b/packages/backend/server/src/mails/users/sign-up.tsx
@@ -1,24 +1,41 @@
-import { Bold, Button, Content, P, Template, Title } from '../components';
+import {
+  Button,
+  Content,
+  OnelineCodeBlock,
+  P,
+  SecondaryText,
+  Template,
+  Title,
+} from '../components';
 
 export type SignUpProps = {
   url: string;
+  otp: string;
 };
 
 export default function SignUp(props: SignUpProps) {
   return (
     <Template>
-      <Title>Create AFFiNE Account</Title>
+      <Title>Sign up to AFFiNE Cloud</Title>
       <Content>
+        <P>You are signing up to AFFiNE. Here is your code:</P>
+        <OnelineCodeBlock>{props.otp}</OnelineCodeBlock>
         <P>
-          Click the button below to complete your account creation and sign in.
-          This magic link will expire in <Bold>30 minutes</Bold>.
+          Alternatively, you can sign up directly by clicking the magic link
+          below:
+        </P>
+        <Button href={props.url}>Sign up with Magic Link</Button>
+        <P>
+          <SecondaryText>
+            This code and link will expire in 30 minutes.
+          </SecondaryText>
         </P>
-        <Button href={props.url}>Create account and sign in</Button>
       </Content>
     </Template>
   );
 }
 
 SignUp.PreviewProps = {
-  url: 'https://app.affine.pro',
+  url: 'https://app.affine.pro/magic-link?token=123456&email=test@test.com',
+  otp: '123456',
 };
diff --git a/packages/frontend/component/src/components/auth-components/count-down-render.tsx b/packages/frontend/component/src/components/auth-components/count-down-render.tsx
deleted file mode 100644
index dbb378030..000000000
--- a/packages/frontend/component/src/components/auth-components/count-down-render.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-const formatTime = (time: number): string => {
-  const minutes = Math.floor(time / 60);
-  const seconds = time % 60;
-
-  const formattedMinutes = minutes.toString().padStart(2, '0');
-  const formattedSeconds = seconds.toString().padStart(2, '0');
-
-  return `${formattedMinutes}:${formattedSeconds}`;
-};
-
-export const CountDownRender = forwardRef<
-  HTMLDivElement,
-  { timeLeft: number } & HTMLAttributes<HTMLDivElement>
->(({ timeLeft, ...props }, ref) => {
-  return (
-    <div {...props} ref={ref}>
-      {formatTime(timeLeft)}
-    </div>
-  );
-});
-
-CountDownRender.displayName = 'CountDownRender';
diff --git a/packages/frontend/component/src/components/auth-components/index.tsx b/packages/frontend/component/src/components/auth-components/index.tsx
index a4a90bff9..3d2622a01 100644
--- a/packages/frontend/component/src/components/auth-components/index.tsx
+++ b/packages/frontend/component/src/components/auth-components/index.tsx
@@ -4,7 +4,6 @@ export * from './auth-page-container';
 export * from './back-button';
 export * from './change-email-page';
 export * from './change-password-page';
-export * from './count-down-render';
 export * from './modal-header';
 export * from './onboarding-page';
 export * from './password-input';
diff --git a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
index 5c190e6f6..695753559 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
+++ b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx
@@ -1,13 +1,17 @@
 import { notify } from '@affine/component';
 import {
   AuthContent,
+  AuthInput,
   BackButton,
-  CountDownRender,
   ModalHeader,
 } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { AuthService, CaptchaService } from '@affine/core/modules/cloud';
+import {
+  AuthService,
+  BackendError,
+  CaptchaService,
+} from '@affine/core/modules/cloud';
 import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 import { Unreachable } from '@affine/env/constant';
 import { Trans, useI18n } from '@affine/i18n';
@@ -54,6 +58,9 @@ export const SignInWithEmailStep = ({
   }, []);
 
   const [isSending, setIsSending] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [otp, setOtp] = useState('');
+  const [otpError, setOtpError] = useState<string | undefined>();
 
   const t = useI18n();
   const authService = useService(AuthService);
@@ -120,6 +127,35 @@ export const SignInWithEmailStep = ({
     changeState(prev => ({ ...prev, step: 'signIn' }));
   }, [changeState]);
 
+  const onOtpChanged = useCallback((value: string) => {
+    setOtp(value);
+    setOtpError(undefined);
+  }, []);
+
+  const onContinue = useAsyncCallback(async () => {
+    if (isVerifying) return;
+
+    if (otp.length !== 6 || !/[0-9]{6}/.test(otp)) {
+      setOtpError(t['com.affine.auth.sign.auth.code.invalid']());
+      return;
+    }
+
+    setIsVerifying(true);
+
+    try {
+      await authService.signInMagicLink(email, otp);
+    } catch (e) {
+      if (e instanceof BackendError) {
+        notify.error({
+          title: e.originError.message,
+        });
+        setOtpError(t['com.affine.auth.sign.auth.code.invalid']());
+      }
+    } finally {
+      setIsVerifying(false);
+    }
+  }, [authService, email, isVerifying, otp, t]);
+
   return !verifyToken && needCaptcha ? (
     <>
       <ModalHeader title={t['com.affine.auth.sign.in']()} />
@@ -136,34 +172,50 @@ export const SignInWithEmailStep = ({
       />
       <AuthContent style={{ height: 100 }}>
         <Trans
-          i18nKey="com.affine.auth.sign.sent.email.message.sent-tips"
+          i18nKey="com.affine.auth.sign.auth.code.hint"
           values={{ email }}
           components={{ a: <a href={`mailto:${email}`} /> }}
         />
-        {t['com.affine.auth.sign.sent.email.message.sent-tips.sign-in']()}
       </AuthContent>
 
-      <div className={style.resendWrapper}>
-        {resendCountDown <= 0 ? (
-          <Button
-            disabled={isSending}
-            variant="plain"
-            size="large"
-            onClick={sendEmail}
-          >
-            {t['com.affine.auth.sign.auth.code.resend.hint']()}
-          </Button>
-        ) : (
-          <div className={style.sentRow}>
-            <div className={style.sentMessage}>
-              {t['com.affine.auth.sent']()}
-            </div>
-            <CountDownRender
-              className={style.resendCountdown}
-              timeLeft={resendCountDown}
+      <AuthInput
+        placeholder={t['com.affine.auth.sign.auth.code']()}
+        onChange={onOtpChanged}
+        error={!!otpError}
+        errorHint={otpError}
+        onEnter={onContinue}
+        type="text"
+        required={true}
+        maxLength={6}
+      />
+
+      <Button
+        style={{ width: '100%' }}
+        data-testid="continue-code-button"
+        size="extraLarge"
+        block={true}
+        onClick={onContinue}
+        disabled={!!otpError || isVerifying}
+        loading={isVerifying}
+      >
+        {t['com.affine.auth.sign.auth.code.continue']()}
+      </Button>
+
+      <div className={style.resendButtonWrapper}>
+        <Button
+          disabled={resendCountDown > 0}
+          variant="plain"
+          onClick={sendEmail}
+        >
+          {resendCountDown <= 0 ? (
+            t['com.affine.auth.sign.auth.code.resend']()
+          ) : (
+            <Trans
+              i18nKey="com.affine.auth.sign.auth.code.resend.hint"
+              values={{ second: resendCountDown }}
             />
-          </div>
-        )}
+          )}
+        </Button>
       </div>
 
       <div className={style.authMessage} style={{ marginTop: 20 }}>
diff --git a/packages/frontend/core/src/components/sign-in/style.css.ts b/packages/frontend/core/src/components/sign-in/style.css.ts
index c19e97061..931ccfdd1 100644
--- a/packages/frontend/core/src/components/sign-in/style.css.ts
+++ b/packages/frontend/core/src/components/sign-in/style.css.ts
@@ -15,6 +15,7 @@ export const authMessage = style({
 globalStyle(`${authMessage} a`, {
   color: cssVar('linkColor'),
 });
+
 globalStyle(`${authMessage} .link`, {
   cursor: 'pointer',
   color: cssVar('linkColor'),
@@ -41,31 +42,8 @@ export const linkButton = style({
   userSelect: 'none',
 });
 
-export const resendWrapper = style({
-  height: 77,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginTop: 30,
-});
-
-export const sentRow = style({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: '8px',
-  lineHeight: '22px',
-  fontSize: cssVar('fontSm'),
-});
-
-export const sentMessage = style({
-  color: cssVar('textPrimaryColor'),
-  fontWeight: 600,
-});
-
-export const resendCountdown = style({
-  width: 45,
-  textAlign: 'center',
+export const resendButtonWrapper = style({
+  marginTop: 20,
 });
 
 export const addSelfhostedButton = style({
diff --git a/packages/frontend/i18n/src/i18n.gen.ts b/packages/frontend/i18n/src/i18n.gen.ts
index b982422cc..d3dc1782e 100644
--- a/packages/frontend/i18n/src/i18n.gen.ts
+++ b/packages/frontend/i18n/src/i18n.gen.ts
@@ -1061,9 +1061,15 @@ export function useAFFiNEI18N(): {
       */
     ["com.affine.auth.send.verify.email.hint"](): string;
     /**
-      * `Sent`
+      * `Resend code`
       */
-    ["com.affine.auth.sent"](): string;
+    ["com.affine.auth.sign.auth.code.resend"](): string;
+    /**
+      * `Resend in {{second}}s`
+      */
+    ["com.affine.auth.sign.auth.code.resend.hint"](options: {
+        readonly second: string;
+    }): string;
     /**
       * `The verification link failed to be sent, please try again later.`
       */
@@ -1161,10 +1167,6 @@ export function useAFFiNEI18N(): {
       * `If you haven't received the email, please check your spam folder.`
       */
     ["com.affine.auth.sign.auth.code.message"](): string;
-    /**
-      * `Resend link`
-      */
-    ["com.affine.auth.sign.auth.code.resend.hint"](): string;
     /**
       * `Sign in with magic link`
       */
@@ -1217,14 +1219,6 @@ export function useAFFiNEI18N(): {
       * ` You can click the link to create an account automatically.`
       */
     ["com.affine.auth.sign.sent.email.message.end"](): string;
-    /**
-      * `You can click the link to sign in automatically.`
-      */
-    ["com.affine.auth.sign.sent.email.message.sent-tips.sign-in"](): string;
-    /**
-      * `You can click the link to create an account automatically.`
-      */
-    ["com.affine.auth.sign.sent.email.message.sent-tips.sign-up"](): string;
     /**
       * `Sign up`
       */
@@ -6660,7 +6654,7 @@ export const TypedTrans: {
         ["3"]: JSX.Element;
     }>>;
     /**
-      * `An email with a magic link has been sent to <a>{{email}}</a>.`
+      * `To continue signing in, please enter the code that was sent to <a>{{email}}</a>.`
       */
     ["com.affine.auth.sign.sent.email.message.sent-tips"]: ComponentType<TypedTransProps<{
         readonly email: string;
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 0ac6aed2c..122bd541c 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -256,7 +256,12 @@
   "com.affine.auth.send.reset.password.link": "Send reset link",
   "com.affine.auth.send.set.password.link": "Send set link",
   "com.affine.auth.send.verify.email.hint": "Send verification link",
-  "com.affine.auth.sent": "Sent",
+  "com.affine.auth.sign.auth.code": "Verification code",
+  "com.affine.auth.sign.auth.code.hint": "To continue signing in, please enter the code that was sent to <a>{{email}}</a>.",
+  "com.affine.auth.sign.auth.code.invalid": "Invalid verification code",
+  "com.affine.auth.sign.auth.code.continue": "Continue with code",
+  "com.affine.auth.sign.auth.code.resend": "Resend code",
+  "com.affine.auth.sign.auth.code.resend.hint": "Resend in {{second}}s",
   "com.affine.auth.sent.change.email.fail": "The verification link failed to be sent, please try again later.",
   "com.affine.auth.sent.change.email.hint": "Verification link has been sent.",
   "com.affine.auth.sent.change.password.hint": "Reset password link has been sent.",
@@ -280,7 +285,6 @@
   "com.affine.auth.sign-out.confirm-modal.title": "Sign out?",
   "com.affine.auth.sign.auth.code.message": "If you haven't received the email, please check your spam folder.",
   "com.affine.auth.sign.auth.code.message.password": "Or <1>sign in with password</1> instead.",
-  "com.affine.auth.sign.auth.code.resend.hint": "Resend link",
   "com.affine.auth.sign.auth.code.send-email.sign-in": "Sign in with magic link",
   "com.affine.auth.sign.condition": "Terms of conditions",
   "com.affine.auth.sign.email.continue": "Continue with email",
@@ -295,10 +299,6 @@
   "com.affine.auth.sign.add-selfhosted.description": "The Self-Hosted instance is not hosted or deployed by AFFiNE. Your data will be stored on these instances.  <1>Learn more about Self-Host details.</1>",
   "com.affine.auth.sign.message": "By clicking “Continue with Google/Email” above, you acknowledge that you agree to AFFiNE's <1>Terms of Conditions</1> and <3>Privacy Policy</3>.",
   "com.affine.auth.sign.policy": "Privacy policy",
-  "com.affine.auth.sign.sent.email.message.end": " You can click the link to create an account automatically.",
-  "com.affine.auth.sign.sent.email.message.sent-tips": "An email with a magic link has been sent to <a>{{email}}</a>.",
-  "com.affine.auth.sign.sent.email.message.sent-tips.sign-in": "You can click the link to sign in automatically.",
-  "com.affine.auth.sign.sent.email.message.sent-tips.sign-up": "You can click the link to create an account automatically.",
   "com.affine.auth.sign.up": "Sign up",
   "com.affine.auth.sign.up.sent.email.subtitle": "Create your account",
   "com.affine.auth.sign.up.success.subtitle": "The app will automatically open or redirect to the web version. If you encounter any issues, you can also click the button below to manually open the AFFiNE app.",