feat(account-center): email and phone verification (#8001)

Author: wangsijie

packages/account-center/src/App.tsx

@@ -28,16 +28,17 @@ const Main = () => {
   const isInCallback = Boolean(params.get('code'));
   const { isAuthenticated, isLoading, signIn } = useLogto();
   const { isLoadingExperience, experienceError, userInfoError } = useContext(PageContext);
+  const isInitialAuthLoading = !isAuthenticated && isLoading;
 
   useEffect(() => {
-    if (isInCallback || isLoading) {
+    if (isInCallback || isInitialAuthLoading) {
       return;
     }
 
     if (!isAuthenticated) {
       void signIn({ redirectUri });
     }
-  }, [isAuthenticated, isInCallback, isLoading, signIn]);
+  }, [isAuthenticated, isInCallback, isInitialAuthLoading, signIn]);
 
   if (isInCallback) {
     return <Callback />;
@@ -52,7 +53,7 @@ const Main = () => {
     );
   }
 
-  if (isLoading || isLoadingExperience) {
+  if (isInitialAuthLoading || isLoadingExperience) {
     return <div className={styles.status}>Loading…</div>;
   }
 

packages/account-center/src/apis/verification.ts

@@ -1,3 +1,5 @@
+import { SignInIdentifier, TemplateType } from '@logto/schemas';
+
 import { createAuthenticatedKy } from './base-ky';
 
 export const verifyPassword = async (accessToken: string, password: string) => {
@@ -10,3 +12,89 @@ export const verifyPassword = async (accessToken: string, password: string) => {
       expiresAt: string;
     }>();
 };
+
+export const sendEmailVerificationCode = async (accessToken: string, email: string) => {
+  return createAuthenticatedKy(accessToken)
+    .post('/api/verifications/verification-code', {
+      json: {
+        identifier: {
+          type: SignInIdentifier.Email,
+          value: email,
+        },
+        templateType: TemplateType.UserPermissionValidation,
+      },
+    })
+    .json<{
+      verificationRecordId: string;
+      expiresAt: string;
+    }>();
+};
+
+export const sendPhoneVerificationCode = async (accessToken: string, phone: string) => {
+  return createAuthenticatedKy(accessToken)
+    .post('/api/verifications/verification-code', {
+      json: {
+        identifier: {
+          type: SignInIdentifier.Phone,
+          value: phone,
+        },
+        templateType: TemplateType.UserPermissionValidation,
+      },
+    })
+    .json<{
+      verificationRecordId: string;
+      expiresAt: string;
+    }>();
+};
+
+export const verifyEmailVerificationCode = async (
+  accessToken: string,
+  payload: {
+    verificationRecordId: string;
+    code: string;
+    email: string;
+  }
+) => {
+  const { verificationRecordId, code, email } = payload;
+
+  return createAuthenticatedKy(accessToken)
+    .post('/api/verifications/verification-code/verify', {
+      json: {
+        identifier: {
+          type: SignInIdentifier.Email,
+          value: email,
+        },
+        verificationId: verificationRecordId,
+        code,
+      },
+    })
+    .json<{
+      verificationRecordId: string;
+    }>();
+};
+
+export const verifyPhoneVerificationCode = async (
+  accessToken: string,
+  payload: {
+    verificationRecordId: string;
+    code: string;
+    phone: string;
+  }
+) => {
+  const { verificationRecordId, code, phone } = payload;
+
+  return createAuthenticatedKy(accessToken)
+    .post('/api/verifications/verification-code/verify', {
+      json: {
+        identifier: {
+          type: SignInIdentifier.Phone,
+          value: phone,
+        },
+        verificationId: verificationRecordId,
+        code,
+      },
+    })
+    .json<{
+      verificationRecordId: string;
+    }>();
+};

packages/account-center/src/assets/icons/email.svg

@@ -0,0 +1,61 @@
+@use '@experience/shared/scss/underscore' as _;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(4);
+  width: 100%;
+  max-width: _.unit(100);
+}
+
+.prepare {
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(4);
+  width: 100%;
+  max-width: _.unit(100);
+}
+
+.identifierInput {
+  width: 100%;
+}
+
+.helper {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.codeInput {
+  width: 100%;
+}
+
+.message {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  min-height: _.unit(5);
+  display: flex;
+  align-items: center;
+}
+
+.resendButton {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font: var(--font-body-2-medium);
+  color: var(--color-primary-50);
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--color-text-secondary);
+  }
+}
+
+.submit {
+  align-self: flex-start;
+}
+
+.prepareAction {
+  width: 100%;
+}