🐛 fix(auth): Refactor user authentication forms to remove global store dependency and improve type handling

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

@@ -4,7 +4,6 @@ import {
   NEXT_PUBLIC_DEFAULT_USER_EMAIL,
   NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
 } from '@/config/constants';
-import useGlobalStore from '@/config/use-global';
 import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
 import { getRedirectUrl, setAuthorization } from '@/utils/common';
 import { useTranslations } from 'next-intl';
@@ -18,8 +17,6 @@ import UserResetForm from './user-reset-form';
 
 export default function UserAuthForm() {
   const t = useTranslations('auth');
-  const { common } = useGlobalStore();
-  const { register } = common;
   const router = useRouter();
   const [type, setType] = useState<'login' | 'register' | 'reset'>();
   const [loading, startTransition] = useTransition();

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

@@ -8,30 +8,21 @@ 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>) {
-  loading?: boolean;
-  onSubmit: (data: any) => void;
-  initialValues: any;
-}) {
   const t = useTranslations('auth.check');
-  // const { common } = useGlobalStore();
+
-  // const { register } = common;
   const formSchema = z.object({
     email: z.string().email(t('email')),
-    // .refine(
-    //   (email) => {
-    //     if (!register.enable_email_domain_suffix) return true;
-    //     const domain = email.split('@')[1] as string;
-    //     return register.email_domain_suffix_list.split('\n').includes(domain);
-    //   },
-    //   {
-    //     message: t('whitelist'),
-    //   },
-    // ),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -61,7 +52,7 @@ export default function UserCheckForm({
   };
 
   useEffect(() => {
-    if (initialValues && initialValues.email) {
+    if (initialValues?.email) {
       handleEmailChange(initialValues.email);
     }
     return () => {

apps/user/app/auth/user-auth-form.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import useGlobalStore from '@/config/use-global';
+import { resetPassword, userLogin, userRegister } from '@/services/common/auth';
-import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import { ReactNode, useState, useTransition } from 'react';
@@ -19,8 +18,6 @@ import UserResetForm from './user-reset-form';
 
 export default function UserAuthForm() {
   const t = useTranslations('auth');
-  const { common } = useGlobalStore();
-  const { register } = common;
   const router = useRouter();
   const [type, setType] = useState<'login' | 'register' | 'reset'>();
   const [loading, startTransition] = useTransition();
@@ -42,33 +39,31 @@ export default function UserAuthForm() {
     startTransition(async () => {
       try {
         switch (type) {
-          case 'login':
+          case 'login': {
-            // eslint-disable-next-line no-case-declarations
             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:
+          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 */
@@ -116,6 +111,8 @@ export default function UserAuthForm() {
           loading={loading}
           onSubmit={handleFormSubmit}
           initialValues={initialValues}
+          type={type}
+          setType={setType}
         />
       );
       break;

apps/user/app/auth/user-check-form.tsx

@@ -1,4 +1,5 @@
 import useGlobalStore from '@/config/use-global';
+import { checkUser } from '@/services/common/auth';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Icon } from '@iconify/react/dist/iconify.js';
 import { Button } from '@workspace/ui/components/button';
@@ -9,32 +10,62 @@ 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;
+  type?: 'login' | 'register' | 'reset';
+  setType: (type: 'login' | 'register' | 'reset') => void;
+}
+
 export default function UserCheckForm({
   loading,
   onSubmit,
   initialValues,
-}: {
+  type,
-  loading?: boolean;
+  setType,
-  onSubmit: (data: any) => void;
+}: Readonly<UserCheckFormProps>) {
-  initialValues: any;
-}) {
   const t = useTranslations('auth.check');
   const { common } = useGlobalStore();
   const { register } = common;
+
+  const handleCheckUser = async (email: string) => {
+    try {
+      const response = await checkUser({ email });
+      const exist = response.data.data?.exist;
+
+      if (exist) {
+        setType('login');
+        return true;
+      }
+
+      if (!register.enable_email_domain_suffix) {
+        setType('register');
+        return true;
+      }
+
+      const domain = email.split('@')[1];
+      const isValid = register.email_domain_suffix_list.split('\n').includes(domain || '');
+
+      if (isValid) {
+        setType('register');
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.log('Error checking user:', error);
+      return false;
+    }
+  };
+
   const formSchema = z.object({
     email: z
       .string()
       .email(t('email'))
-      .refine(
+      .refine(handleCheckUser, {
-        (email) => {
+        message: t('whitelist'),
-          if (!register.enable_email_domain_suffix) return true;
+      }),
-          const domain = email.split('@')[1];
-          return register.email_domain_suffix_list.split('\n').includes(domain || '');
-        },
-        {
-          message: t('whitelist'),
-        },
-      ),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -45,7 +76,7 @@ export default function UserCheckForm({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleEmailChange = (value: string) => {
+  const handleEmailChange = async (value: string) => {
     form.setValue('email', value);
 
     if (typingTimeoutRef.current) {
@@ -60,11 +91,11 @@ export default function UserCheckForm({
       } else {
         setIsSubmitting(false);
       }
-    }, 500);
+    }, 1000);
   };
 
   useEffect(() => {
-    if (initialValues && initialValues.email) {
+    if (initialValues?.email) {
       handleEmailChange(initialValues.email);
     }
     return () => {