🐛 fix(auth): Update user authentication flow to include email and phone code verification

apps/admin/app/(auth)/email/auth-form.tsx

@@ -1,24 +1,24 @@
 'use client';
 
+import { resetPassword, userLogin, userRegister } from '@/services/common/auth';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
 import {
   NEXT_PUBLIC_DEFAULT_USER_EMAIL,
   NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
 } from '@/config/constants';
-import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
 import { getRedirectUrl, setAuthorization } from '@/utils/common';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { ReactNode, useState, useTransition } from 'react';
-import { toast } from 'sonner';
-import UserCheckForm from './user-check-form';
-import UserLoginForm from './user-login-form';
-import UserRegisterForm from './user-register-form';
-import UserResetForm from './user-reset-form';
+import LoginForm from './login-form';
+import RegisterForm from './register-form';
+import ResetForm from './reset-form';
 
-export default function UserAuthForm() {
+export default function EmailAuthForm() {
   const t = useTranslations('auth');
   const router = useRouter();
-  const [type, setType] = useState<'login' | 'register' | 'reset'>();
+  const [type, setType] = useState<'login' | 'register' | 'reset'>('login');
   const [loading, startTransition] = useTransition();
   const [initialValues, setInitialValues] = useState<{
     email?: string;
@@ -38,44 +38,35 @@ export default function UserAuthForm() {
     startTransition(async () => {
       try {
         switch (type) {
-          case 'login':
-            // eslint-disable-next-line no-case-declarations
+          case 'login': {
             const login = await userLogin(params);
             toast.success(t('login.success'));
             onLogin(login.data.data?.token);
             break;
-          case 'register':
-            // eslint-disable-next-line no-case-declarations
+          }
+          case 'register': {
             const create = await userRegister(params);
             toast.success(t('register.success'));
             onLogin(create.data.data?.token);
             break;
+          }
           case 'reset':
             await resetPassword(params);
             toast.success(t('reset.success'));
             setType('login');
             break;
-          default:
-            if (type === 'reset') break;
-            // eslint-disable-next-line no-case-declarations
-            const response = await checkUser(params);
-            setInitialValues({
-              ...initialValues,
-              ...params,
-            });
-            setType(response.data.data?.exist ? 'login' : 'register');
-            break;
         }
       } catch (error) {
         /* empty */
       }
     });
   };
+
   let UserForm: ReactNode = null;
   switch (type) {
     case 'login':
       UserForm = (
-        <UserLoginForm
+        <LoginForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -86,7 +77,7 @@ export default function UserAuthForm() {
       break;
     case 'register':
       UserForm = (
-        <UserRegisterForm
+        <RegisterForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -97,7 +88,7 @@ export default function UserAuthForm() {
       break;
     case 'reset':
       UserForm = (
-        <UserResetForm
+        <ResetForm
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
@@ -106,15 +97,6 @@ export default function UserAuthForm() {
         />
       );
       break;
-    default:
-      UserForm = (
-        <UserCheckForm
-          loading={loading}
-          onSubmit={handleFormSubmit}
-          initialValues={initialValues}
-        />
-      );
-      break;
   }
 
   return (
@@ -125,34 +107,6 @@ export default function UserAuthForm() {
           {t(`${type || 'check'}.description`)}
         </div>
       </div>
-      {/* {!((type === 'register' && register.stop_register) || type === 'reset') && (
-        <>
-          <div className='mb-3 flex flex-wrap items-center justify-center gap-3 font-bold'>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:telegram' className='mr-2 size-5' />
-              Telegram
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:google' className='mr-2 size-5' />
-              Google
-            </Button>
-            <Button type='button' variant='outline'>
-              <Icon icon='uil:apple' className='mr-2 size-5' />
-              Apple
-            </Button>
-          </div>
-          <div
-            className={cn(
-              'my-14 flex h-0 items-center text-center',
-              'before:mr-4 before:block before:w-1/2 before:border-b-[1px]',
-              'after:ml-4 after:w-1/2 after:border-b-[1px]',
-            )}
-          >
-            <span className='text-muted-foreground w-[125px] text-sm'>{t('orWithEmail')}</span>
-          </div>
-        </>
-      )} */}
-
       {UserForm}
     </>
   );

apps/admin/app/(auth)/email/login-form.tsx

@@ -1,6 +1,6 @@
 import useGlobalStore from '@/config/use-global';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
+import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
@@ -8,9 +8,9 @@ import { useTranslations } from 'next-intl';
 import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserLoginForm({
+export default function LoginForm({
   loading,
   onSubmit,
   initialValues,
@@ -21,14 +21,14 @@ export default function UserLoginForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.login');
   const { common } = useGlobalStore();
   const { verify } = common;
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
     cf_token:
       verify.enable_login_verify && verify.turnstile_site_key ? z.string() : z.string().optional(),
@@ -48,7 +48,7 @@ export default function UserLoginForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -100,10 +100,10 @@ export default function UserLoginForm({
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('register');
           }}
         >
-          {t('switchAccount')}
+          {t('registerAccount')}
         </Button>
       </div>
     </>

apps/admin/app/(auth)/email/register-form.tsx

@@ -1,19 +1,18 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
+import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
 import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserRegisterForm({
+export default function RegisterForm({
   loading,
   onSubmit,
   initialValues,
@@ -24,33 +23,36 @@ export default function UserRegisterForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.register');
   const { common } = useGlobalStore();
-  const { verify, register, invite } = common;
+  const { verify, auth, invite } = common;
 
-  const [targetDate, setTargetDate] = useState<number>();
-  const [, { seconds }] = useCountDown({
-    targetDate,
-    onEnd: () => {
-      setTargetDate(undefined);
-    },
-  });
-  const handleSendCode = async () => {
-    await sendEmailCode({
-      email: initialValues.email,
-      type: 1,
-    });
-    setTargetDate(Date.now() + 60000);
+  const handleCheckUser = async (email: string) => {
+    try {
+      const domain = email.split('@')[1];
+      const isValid =
+        !auth.email.email_enable_verify ||
+        auth.email?.email_domain_suffix_list.split('\n').includes(domain || '');
+      return !isValid;
+    } catch (error) {
+      console.log('Error checking user:', error);
+      return false;
+    }
   };
 
   const formSchema = z
     .object({
-      email: z.string(),
+      email: z
+        .string()
+        .email(t('email'))
+        .refine(handleCheckUser, {
+          message: t('whitelist'),
+        }),
       password: z.string(),
       repeat_password: z.string(),
-      code: register.enable_email_verify ? z.string() : z.string().nullish(),
+      code: auth.email.email_enable_verify ? z.string() : z.string().nullish(),
       invite: invite.forced_invite ? z.string() : z.string().nullish(),
       cf_token:
         verify.enable_register_verify && verify.turnstile_site_key
@@ -66,17 +68,18 @@ export default function UserRegisterForm({
         });
       }
     });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       ...initialValues,
-      invite: sessionStorage.getItem('invite'),
+      invite: localStorage.getItem('invite') || '',
     },
   });
 
   return (
     <>
-      {register.stop_register ? (
+      {auth.register.stop_register ? (
         <Markdown>{t('message')}</Markdown>
       ) : (
         <Form {...form}>
@@ -87,7 +90,7 @@ export default function UserRegisterForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                    <Input placeholder='Enter your email...' type='email' {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -127,7 +130,7 @@ export default function UserRegisterForm({
                 </FormItem>
               )}
             />
-            {register.enable_email_verify && (
+            {auth.email.email_enable_verify && (
               <FormField
                 control={form.control}
                 name='code'
@@ -142,9 +145,13 @@ export default function UserRegisterForm({
                           {...field}
                           value={field.value as string}
                         />
-                        <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
-                          {seconds > 0 ? `${seconds}s` : t('get')}
-                        </Button>
+                        <SendCode
+                          type='email'
+                          params={{
+                            ...form.getValues(),
+                            type: 1,
+                          }}
+                        />
                       </div>
                     </FormControl>
                     <FormMessage />
@@ -159,7 +166,7 @@ export default function UserRegisterForm({
                 <FormItem>
                   <FormControl>
                     <Input
-                      disabled={loading}
+                      disabled={loading || !!localStorage.getItem('invite')}
                       placeholder={t('invite')}
                       {...field}
                       value={field.value || ''}
@@ -191,13 +198,13 @@ export default function UserRegisterForm({
         </Form>
       )}
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/admin/app/(auth)/email/reset-form.tsx

@@ -1,18 +1,17 @@
 import useGlobalStore from '@/config/use-global';
-import { sendEmailCode } from '@/services/common/common';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
+import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
 import { Input } from '@workspace/ui/components/input';
-import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import CloudFlareTurnstile from './turnstile';
+import SendCode from '../send-code';
+import CloudFlareTurnstile from '../turnstile';
 
-export default function UserResetForm({
+export default function ResetForm({
   loading,
   onSubmit,
   initialValues,
@@ -23,32 +22,17 @@ export default function UserResetForm({
   onSubmit: (data: any) => void;
   initialValues: any;
   setInitialValues: Dispatch<SetStateAction<any>>;
-  onSwitchForm: (type?: 'register' | 'reset') => void;
+  onSwitchForm: Dispatch<SetStateAction<'register' | 'reset' | 'login'>>;
 }) {
   const t = useTranslations('auth.reset');
 
   const { common } = useGlobalStore();
-  const { verify, register } = common;
-
-  const [targetDate, setTargetDate] = useState<number>();
-  const [, { seconds }] = useCountDown({
-    targetDate,
-    onEnd: () => {
-      setTargetDate(undefined);
-    },
-  });
-  const handleSendCode = async () => {
-    await sendEmailCode({
-      email: initialValues.email,
-      type: 2,
-    });
-    setTargetDate(Date.now() + 60000); // 60秒倒计时
-  };
+  const { verify, auth } = common;
 
   const formSchema = z.object({
-    email: z.string(),
+    email: z.string().email(t('email')),
     password: z.string(),
-    code: register.enable_email_verify ? z.string() : z.string().nullish(),
+    code: auth?.email?.email_enable_verify ? z.string() : z.string().nullish(),
     cf_token:
       verify.enable_register_verify && verify.turnstile_site_key
         ? z.string()
@@ -69,7 +53,7 @@ export default function UserResetForm({
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Input disabled placeholder='Enter your email...' type='email' {...field} />
+                  <Input placeholder='Enter your email...' type='email' {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -93,7 +77,7 @@ export default function UserResetForm({
             )}
           />
 
-          {register.enable_email_verify && (
+          {auth?.email?.email_enable_verify && (
             <FormField
               control={form.control}
               name='code'
@@ -108,9 +92,13 @@ export default function UserResetForm({
                         {...field}
                         value={field.value as string}
                       />
-                      <Button type='button' onClick={handleSendCode} disabled={seconds > 0}>
-                        {seconds > 0 ? `${seconds}s` : t('get')}
-                      </Button>
+                      <SendCode
+                        type='email'
+                        params={{
+                          ...form.getValues(),
+                          type: 2,
+                        }}
+                      />
                     </div>
                   </FormControl>
                   <FormMessage />
@@ -139,13 +127,13 @@ export default function UserResetForm({
         </form>
       </Form>
       <div className='mt-4 text-right text-sm'>
-        {t('existingAccount')}
+        {t('existingAccount')}&nbsp;
         <Button
           variant='link'
           className='p-0'
           onClick={() => {
             setInitialValues(undefined);
-            onSwitchForm(undefined);
+            onSwitchForm('login');
           }}
         >
           {t('switchToLogin')}

apps/admin/app/(auth)/page.tsx

@@ -8,7 +8,7 @@ import LoginLottie from '@workspace/ui/lotties/login.json';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import Link from 'next/link';
-import UserAuthForm from './user-auth-form';
+import EmailAuthForm from './email/auth-form';
 
 export default function Page() {
   const t = useTranslations('auth');
@@ -45,7 +45,7 @@ export default function Page() {
           <div className='lg:bg-background flex flex-col items-center rounded-2xl md:w-[600px] lg:flex-auto lg:p-10 lg:shadow'>
             <div className='flex flex-col items-stretch justify-center md:w-[400px] lg:h-full'>
               <div className='flex flex-col justify-center pb-14 lg:flex-auto lg:pb-20'>
-                <UserAuthForm />
+                <EmailAuthForm />
               </div>
               <div className='flex items-center justify-end'>
                 {/* <div className='text-primary flex gap-5 text-sm font-semibold'>

apps/admin/app/(auth)/send-code.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { sendEmailCode, sendSmsCode } from '@/services/common/common';
+import { Button } from '@workspace/ui/components/button';
+import { useCountDown } from 'ahooks';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface SendCodeProps {
+  type: 'email' | 'phone';
+  params: {
+    email?: string;
+    type?: 1 | 2;
+    telephone_area_code?: string;
+    telephone?: string;
+  };
+}
+export default function SendCode({ type, params }: SendCodeProps) {
+  const t = useTranslations('auth');
+  const [targetDate, setTargetDate] = useState<number>();
+
+  const [, { seconds }] = useCountDown({
+    targetDate,
+    onEnd: () => {
+      setTargetDate(undefined);
+    },
+  });
+
+  const getEmailCode = async () => {
+    if (params.email && params.type) {
+      await sendEmailCode({
+        email: params.email,
+        type: params.type,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const getPhoneCode = async () => {
+    if (params.telephone && params.telephone_area_code) {
+      await sendSmsCode({
+        telephone: params.telephone,
+        telephone_area_code: params.telephone_area_code,
+      });
+      setTargetDate(Date.now() + 60000);
+    }
+  };
+
+  const handleSendCode = async () => {
+    if (type === 'email') {
+      getEmailCode();
+    } else {
+      getPhoneCode();
+    }
+  };
+  const disabled =
+    seconds > 0 ||
+    (type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
+
+  return (
+    <Button type='button' onClick={handleSendCode} disabled={disabled}>
+      {seconds > 0 ? `${seconds}s` : t('get')}
+    </Button>
+  );
+}

apps/admin/app/(auth)/user-check-form.tsx

@@ -1,100 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Icon } from '@iconify/react';
-import { Button } from '@workspace/ui/components/button';
-import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
-import { Input } from '@workspace/ui/components/input';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-interface UserCheckFormProps {
-  loading?: boolean;
-  onSubmit: (data: any) => void;
-  initialValues: any;
-}
-
-export default function UserCheckForm({
-  loading,
-  onSubmit,
-  initialValues,
-}: Readonly<UserCheckFormProps>) {
-  const t = useTranslations('auth.check');
-
-  const formSchema = z.object({
-    email: z.string().email(t('email')),
-  });
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
-  });
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handleEmailChange = (value: string) => {
-    form.setValue('email', value);
-
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    typingTimeoutRef.current = setTimeout(async () => {
-      const isValid = await form.trigger('email');
-      if (isValid) {
-        setIsSubmitting(true);
-        form.handleSubmit(onSubmit)();
-      } else {
-        setIsSubmitting(false);
-      }
-    }, 500);
-  };
-
-  useEffect(() => {
-    if (initialValues?.email) {
-      handleEmailChange(initialValues.email);
-    }
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
-        <FormField
-          control={form.control}
-          name='email'
-          render={({ field }) => (
-            <FormItem>
-              <FormControl>
-                <Input
-                  disabled={loading}
-                  placeholder='Enter your email...'
-                  type='email'
-                  {...field}
-                  onChange={(e) => handleEmailChange(e.target.value)}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type='submit' disabled={!isSubmitting}>
-          {isSubmitting ? (
-            <>
-              <Icon icon='mdi:loading' className='mr-2 size-5 animate-spin' />
-              {t('checking')}
-            </>
-          ) : (
-            t('continue')
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/admin/app/layout.tsx

@@ -93,7 +93,12 @@ export default async function RootLayout({
       user = await currentUser({
         skipErrorHandler: true,
         Authorization,
-      }).then((res) => res.data.data);
+      }).then((res) => {
+        if (res.data.data?.is_admin) {
+          return res.data.data;
+        }
+        return undefined;
+      });
     } catch (error) {
       console.log('Error fetching current user:', error);
     }