feat: gacha auth integration (#32)

* feat(gacha): register and login integration

* fix: navbar and gacha landing page

- display fullname when user authenticated
- fix styling and responsive

* fix: minor fix UI

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -2,6 +2,7 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { useLogin } from '../../_hooks/use-login';
+import ModalFormVerifyEmail from './modal-form-verify-email';
 
 interface IModalFormLogin {
   isOpen: boolean;
@@ -16,61 +17,87 @@ const ModalFormLogin = ({
   onForgotPassword,
   setIsOpenRegisterModal,
 }: IModalFormLogin) => {
-  const { form, onSubmit } = useLogin();
+  const {
+    form,
+    onSubmit,
+    isLoading,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useLogin();
 
   return (
-    <Modal
+    <>
-      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      <Modal
-      isOpen={isOpen}
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      onClose={onClose}
+        isOpen={isOpen && !showVerifyModal}
-    >
+        onClose={onClose}
-      <Modal.Header className="space-y-4">
+      >
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <Modal.Header className="space-y-4">
-        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-          Login
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
-        </h1>
-      </Modal.Header>
-      <Modal.Content>
-        <form className="space-y-4" onSubmit={onSubmit}>
-          <ControlledInputField
-            control={form.control}
-            label="Email"
-            placeholder="Masukkan Email"
-            type="email"
-            name="email"
-            size="lg"
-            className="w-full"
-          />
-          <ControlledInputField
-            control={form.control}
-            label="Password"
-            placeholder="Masukkan Password"
-            type="password"
-            name="password"
-            size="lg"
-            className="w-full"
-          />
-          <h1 className="text-end text-primary-500 text-xl font-medium">
-            <Button variant="text" onClick={onForgotPassword}>
-              Lupa Password?
-            </Button>
-          </h1>
-          <Button type="submit" size="md" className="w-full">
             Login
-          </Button>
+          </h1>
-          <div className="flex justify-center gap-2 pt-2.5 font-medium">
+        </Modal.Header>
-            <p className="text-neutral-500">Belum punya akun?</p>
+        <Modal.Content>
+          <form className="space-y-4" onSubmit={onSubmit}>
+            <ControlledInputField
+              control={form.control}
+              label="Email"
+              placeholder="Masukkan Email"
+              type="email"
+              name="email"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Password"
+              placeholder="Masukkan Password"
+              type="password"
+              name="password"
+              size="lg"
+              className="w-full"
+            />
+            <h1 className="text-end text-primary-500 text-xl font-medium">
+              <Button variant="text" type="button" onClick={onForgotPassword}>
+                Lupa Password?
+              </Button>
+            </h1>
             <Button
-              variant="text"
+              type="submit"
-              className="text-primary-500 hover:text-primary-600 m-0 p-0"
+              size="md"
-              onClick={() => setIsOpenRegisterModal(true)}
+              className="w-full"
+              disabled={isLoading}
             >
-              Daftar
+              {isLoading ? 'Loading...' : 'Login'}
             </Button>
-          </div>
+            <div className="flex justify-center gap-2 pt-2.5 font-medium">
-        </form>
+              <p className="text-neutral-500">Belum punya akun?</p>
-      </Modal.Content>
+              <Button
-    </Modal>
+                variant="text"
+                className="text-primary-500 hover:text-primary-600 m-0 p-0"
+                onClick={() => setIsOpenRegisterModal(true)}
+              >
+                Daftar
+              </Button>
+            </div>
+          </form>
+        </Modal.Content>
+      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={emailToVerify}
+      />
+    </>
   );
 };
 

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -1,11 +1,8 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useQueryState } from '@imphnen-frontend-service/utils';
 import { useRegister } from '../../_hooks/use-register';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { UseFormReturn } from 'react-hook-form';
+import ModalFormVerifyEmail from './modal-form-verify-email';
-import { TRegisterRequest } from '@imphnen-frontend-service/service';
-import { useEffect } from 'react';
 
 interface IModalFormRegisterProps {
   isOpen: boolean;
@@ -13,168 +10,100 @@ interface IModalFormRegisterProps {
 }
 
 const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
-  const { form, onSubmit, isStepOneValid } = useRegister();
-
   const {
-    step: currentStep,
+    form,
-    nextStep,
+    verifyForm,
-    prevStep,
+    onSubmit,
-    resetStep,
+    onVerifySubmit,
-  } = useQueryState('registerStep', {
+    showVerifyModal,
-    defaultValue: 1,
+    closeVerifyModal,
-    maxValue: 2,
+    isVerifying,
-    minValue: 1,
+    isRegistering,
-  });
+    registeredEmail,
+  } = useRegister();
 
-  useEffect(() => {
-    if (!isStepOneValid && currentStep === 2) {
-      prevStep();
-    }
-  }, [isStepOneValid, currentStep, prevStep]);
-
-  return (
-    <Modal
-      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
-      onClose={() => {
-        onClose();
-        resetStep();
-      }}
-    >
-      <Modal.Header className="space-y-4">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-        <h1 className="text-primary-500 text-p1 text-center font-semibold">
-          Register
-        </h1>
-        <h2 className="text-neutral-500 text-lg text-center">
-          {currentStep === 1 ? 'Info Akun' : 'Informasi Pengiriman Hadiah'}
-        </h2>
-      </Modal.Header>
-      <Modal.Content>
-        <form onSubmit={onSubmit} className="space-y-6">
-          {currentStep === 1 && (
-            <StepOne
-              form={form}
-              nextStep={nextStep}
-              isStepOneValid={isStepOneValid}
-            />
-          )}
-          {currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
-        </form>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-interface IStepOneProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  nextStep: () => void;
-  isStepOneValid: boolean;
-}
-
-const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
   return (
     <>
-      <ControlledInputField
+      <Modal
-        control={form.control}
+        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-        name="fullname"
+        isOpen={isOpen && !showVerifyModal}
-        label="Nama Lengkap"
+        onClose={onClose}
-        placeholder="Masukkan Nama Lengkap"
-        type="text"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        label="Email"
-        placeholder="Masukkan Email Anda"
-        type="email"
-        name="email"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        name="password"
-        label="Password"
-        placeholder="Masukkan Password"
-        type="password"
-        size="lg"
-        className="w-full"
-      />
-      <ControlledInputField
-        control={form.control}
-        name="confirm_password"
-        label="Ulangi Password"
-        placeholder="Masukkan Ulang Password"
-        type="password"
-        size="lg"
-        className="w-full"
-      />
-      <Button
-        size="md"
-        className="w-full"
-        onClick={nextStep}
-        disabled={!isStepOneValid}
       >
-        Selanjutnya
+        <Modal.Header className="space-y-4">
-      </Button>
+          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+          <h1 className="text-primary-500 text-p1 text-center font-semibold">
+            Register
+          </h1>
+        </Modal.Header>
+        <Modal.Content>
+          <form onSubmit={onSubmit} className="space-y-6">
+            <ControlledInputField
+              control={form.control}
+              name="fullname"
+              label="Nama Lengkap"
+              placeholder="Masukkan Nama Lengkap"
+              type="text"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              label="Email"
+              placeholder="Masukkan Email Anda"
+              type="email"
+              name="email"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="password"
+              label="Password"
+              placeholder="Masukkan Password"
+              type="password"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="confirm_password"
+              label="Ulangi Password"
+              placeholder="Masukkan Ulang Password"
+              type="password"
+              size="lg"
+              className="w-full"
+            />
+            <ControlledInputField
+              control={form.control}
+              name="phone_number"
+              label="Nomor Telepon"
+              placeholder="Masukkan Nomor Telepon Aktif"
+              type="text"
+              size="lg"
+              className="w-full"
+            />
+            <Button
+              size="md"
+              className="w-full"
+              type="submit"
+              disabled={isRegistering || !form.formState.isValid}
+            >
+              {isRegistering ? 'Mendaftar...' : 'Register'}
+            </Button>
+          </form>
+        </Modal.Content>
+      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={registeredEmail}
+      />
     </>
   );
 };
 
-interface IStepTwoProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  prevStep: () => void;
-}
-
-const StepTwo = ({ form, prevStep }: IStepTwoProps) => (
-  <>
-    <ControlledInputField
-      control={form.control}
-      name="phone_number"
-      label="Nomor Telepon"
-      placeholder="Masukkan Nomor Telepon Aktif"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="referral_code"
-      label="Kode Referral"
-      placeholder="Masukkan Kode Referral"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="referred_by"
-      label="Referral By"
-      placeholder="Masukkan Referral By"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="student_type"
-      label="Tipe Pelajar"
-      placeholder="Masukkan Tipe Pelajar"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <div className="flex gap-6">
-      <Button size="md" variant="text" className="w-[40%]" onClick={prevStep}>
-        Kembali
-      </Button>
-      <Button size="md" className="w-full" type="submit">
-        Gacha Sekarang
-      </Button>
-    </div>
-  </>
-);
-
 export default ModalFormRegister;

apps/gacha/src/app/_components/form/modal-form-verify-email.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { UseFormReturn } from 'react-hook-form';
+
+interface IModalFormVerifyEmailProps {
+  isOpen: boolean;
+  onClose: () => void;
+  verifyForm: UseFormReturn<{ otp: string }, any>;
+  onVerifySubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  isVerifying: boolean;
+  email?: string;
+}
+
+const ModalFormVerifyEmail = ({
+  isOpen,
+  onClose,
+  verifyForm,
+  onVerifySubmit,
+  isVerifying,
+  email,
+}: IModalFormVerifyEmailProps) => {
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Verifikasi Email
+        </h1>
+        <h2 className="text-neutral-500 text-lg text-center">
+          Masukkan kode OTP yang telah dikirim ke {email ? email : 'email Anda'}
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onVerifySubmit} className="space-y-6">
+          <ControlledInputField
+            control={verifyForm.control}
+            name="otp"
+            label="Kode OTP"
+            placeholder="Masukkan Kode OTP"
+            type="text"
+            size="lg"
+            className="w-full"
+          />
+          <Button
+            size="md"
+            className="w-full"
+            type="submit"
+            disabled={isVerifying}
+          >
+            {isVerifying ? 'Memverifikasi...' : 'Verifikasi'}
+          </Button>
+        </form>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalFormVerifyEmail;

apps/gacha/src/app/_hooks/use-login.ts

@@ -2,9 +2,13 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
+  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router';
+import { useVerifyEmail } from './use-verify-email';
 
 export const useLogin = () => {
   const form = useForm<TLoginRequest>({
@@ -12,12 +16,63 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const { signIn } = useSession();
+  const navigate = useNavigate();
+  const { mutate, isPending } = usePostLogin();
+  const { setLoading, setSession, clearSession } = useAuthStore();
 
-  const onSubmit = form.handleSubmit((data) => signIn(data));
+  const {
+    openVerifyModal,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
+  const onSubmit = form.handleSubmit((data) => {
+    setLoading(true);
+    mutate(data, {
+      onSuccess: (response) => {
+        toast.success('Login sukses');
+
+        if (response.data.token && response.data.user) {
+          setSession(response.data);
+        } else {
+          const { token, ...userData } = response.data;
+
+          const loginData = {
+            token,
+            userData,
+          };
+          setSession(loginData);
+        }
+
+        navigate(0);
+      },
+      onError: (error) => {
+        const errorMessage = error?.response?.data?.message;
+
+        if (errorMessage === 'Account not active, please verify your email') {
+          toast.error('Akun belum aktif, silakan verifikasi email Anda');
+          openVerifyModal(data.email);
+        } else {
+          toast.error(errorMessage ?? 'Terjadi Kesalahan yang tidak diketahui');
+          clearSession();
+        }
+      },
+    });
+  });
 
   return {
     form,
     onSubmit,
+    isLoading: isPending,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-register.ts

@@ -6,9 +6,20 @@ import {
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
+import { useVerifyEmail } from './use-verify-email';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
+  const {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
   const form = useForm<TRegisterRequest>({
     resolver: zodResolver(authRegisterSchema),
     mode: 'all',
@@ -23,13 +34,23 @@ export const useRegister = () => {
 
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
-      onSuccess: () => toast.success('Registrasi sukses'),
+      onSuccess: () => {
-      onError: (error) => toast.error(error.message),
+        toast.success('Registrasi sukses. Silakan verifikasi email Anda.');
+        openVerifyModal(data.email);
+      },
+      onError: (error) => toast.error(error.message || 'Registrasi gagal'),
     });
   });
 
   return {
     form,
+    verifyForm,
     onSubmit,
+    onVerifySubmit,
+    showVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    isRegistering: postRegister.isPending,
+    registeredEmail: emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-verify-email.ts

@@ -0,0 +1,62 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyEmailRequest,
+  usePostVerifyEmail,
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useVerifyEmail = () => {
+  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [emailToVerify, setEmailToVerify] = useState('');
+  const navigate = useNavigate();
+
+  const postVerifyEmail = usePostVerifyEmail();
+
+  const verifyForm = useForm<{ otp: string }>({
+    mode: 'all',
+    defaultValues: {
+      otp: '',
+    },
+  });
+
+  const onVerifySubmit = verifyForm.handleSubmit((data) => {
+    const otpNumber = data.otp;
+
+    const verifyData: TVerifyEmailRequest = {
+      email: emailToVerify,
+      otp: otpNumber,
+    };
+
+    postVerifyEmail.mutate(verifyData, {
+      onSuccess: () => {
+        toast.success('Verifikasi email sukses');
+
+        navigate(0);
+      },
+      onError: (error) =>
+        toast.error(error.message || 'Verifikasi email gagal'),
+    });
+  });
+
+  const openVerifyModal = (email: string) => {
+    setEmailToVerify(email);
+    setShowVerifyModal(true);
+  };
+
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+    verifyForm.reset();
+  };
+
+  return {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying: postVerifyEmail.isPending,
+    emailToVerify,
+  };
+};

apps/gacha/src/app/page.tsx

@@ -66,11 +66,15 @@ export const Components: FC = (): ReactElement => {
         <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[150px] md:h-[230px]">
             <img
+              width={400}
+              height={400}
               src="/merch/1.png"
               alt="Merch 1"
               className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
             />
             <img
+              width={400}
+              height={400}
               className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
               src="/merch/Vector-1.svg"
               alt=""
@@ -88,7 +92,7 @@ export const Components: FC = (): ReactElement => {
             ~ 175k ~
           </div>
         </div>
-        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[130px] md:h-[230px]">
             <img
               width={400}
@@ -105,8 +109,6 @@ export const Components: FC = (): ReactElement => {
               alt="Merch 3"
             />
             <img
-              width={400}
-              height={400}
               className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
               src="/landing-arrow-2.svg"
               alt="Merch 1"

apps/gacha/src/main.tsx

@@ -35,7 +35,7 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster />
+      <Toaster position="top-right"/>
       <RouterProvider router={router} />
     </QueryProvider>
   </StrictMode>

apps/gacha/src/middleware.ts

@@ -1,109 +1,15 @@
-import {
+// import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
-  PERMISSIONS,
+import { LoaderFunctionArgs } from 'react-router';
-  SessionToken,
-  SessionUser,
-} from '@imphnen-frontend-service/utils';
-import { LoaderFunctionArgs, redirect } from 'react-router';
 
-const mappingPublicRoutes = [
+// const mappingPublicRoutes = ['/'];
-  '/',
-  '/auth/login',
-  '/auth/forgot',
-  '/auth/new-password',
-];
 
-const mappingRoutePermissions = [
+// const mappingRoutePermissions = [
-  {
+//   {
-    path: '/dashboard',
+//     path: '/',
-    permissions: [],
+//     permissions: [],
-  },
+//   },
-  {
+// ];
-    path: '/users',
-    permissions: [PERMISSIONS.USERS.READ_LIST],
-  },
-  {
-    path: '/users/create',
-    permissions: [PERMISSIONS.USERS.CREATE],
-  },
-  {
-    path: '/users/update',
-    permissions: [PERMISSIONS.USERS.UPDATE],
-  },
-  {
-    path: '/users/detail',
-    permissions: [PERMISSIONS.USERS.READ_DETAIL],
-  },
-  {
-    path: '/roles',
-    permissions: [PERMISSIONS.ROLES.READ_LIST],
-  },
-  {
-    path: '/roles/create',
-    permissions: [PERMISSIONS.ROLES.CREATE],
-  },
-  {
-    path: '/roles/update',
-    permissions: [PERMISSIONS.ROLES.UPDATE],
-  },
-  {
-    path: '/roles/detail',
-    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
-  },
-  {
-    path: '/permissions',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
-  },
-  {
-    path: '/permissions/create',
-    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
-  },
-  {
-    path: '/permissions/update',
-    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
-  },
-  {
-    path: '/permissions/detail',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
-  },
-];
-
-//TODO : Fix this later
-// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
-//   const fallback = mappingRoutePermissions.find((route) =>
-//     route.permissions.some((perm) => userPermissions.includes(perm))
-//   );
-//   return redirect(fallback?.path ?? '/auth/login');
-// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-  const session = SessionUser.get();
-  const session_token = SessionToken.get();
-  const token = session_token?.token?.access_token;
-  const userPermissions =
-    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  if (mappingPublicRoutes.includes(pathname)) {
-    if (token) return redirect('/dashboard');
-    return null;
-  }
-
-  if (!session) return redirect('/auth/login');
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return '/dashboard';
-    }
-  }
-
   return null;
 };

libs/service/src/api/auth/index.ts

@@ -35,7 +35,7 @@ export const postVerifyEmail = async (
   const { data } = await api({
     method: 'POST',
     url: '/auth/verify-email',
-    data: {otp: parseInt(payload.otp), email: payload.email},
+    data: { otp: parseInt(payload.otp), email: payload.email },
   });
   return data;
 };

libs/ui/src/organisms/navbar/navbar.tsx

@@ -29,7 +29,7 @@ export const Navbar: FC = (): ReactElement => {
                 <Button
                   size="md"
                   variant="text"
-                  className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
                 >
                   <Link to="#">Home</Link>
                 </Button>
@@ -38,7 +38,7 @@ export const Navbar: FC = (): ReactElement => {
                 <Button
                   size="md"
                   variant="text"
-                  className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
                 >
                   <Link to="#">Merch Gacha</Link>
                 </Button>
@@ -49,13 +49,17 @@ export const Navbar: FC = (): ReactElement => {
                 </li>
               ) : (
                 <li className="flex gap-x-4">
-                  <span className="text-lg">{session.user?.fullname}</span>
+                  <span className="lg:text-p3 pb-[10px] self-end">
-                  <div
+                    {session?.user?.fullname}
+                  </span>
+                  <Button
                     onClick={signOut}
-                    className="text-lg text-red-500 font-bold"
+                    variant="text"
+                    size="md"
+                    className="lg:text-p2 text-red-500 font-bold hover:text-red-600"
                   >
                     Logout
-                  </div>
+                  </Button>
                 </li>
               )}
             </ul>
@@ -97,7 +101,19 @@ export const Navbar: FC = (): ReactElement => {
                         </Button>
                       </li>
                     ) : (
-                      <li>{session.user?.fullname}</li>
+                      <>
+                        <li className="px-4 py-2 text-center text-gray-600 font-semibold">
+                          {session?.user?.fullname}
+                        </li>
+                        <li>
+                          <div
+                            onClick={signOut}
+                            className="block text-red-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
+                          >
+                            Logout
+                          </div>
+                        </li>
+                      </>
                     )}
                   </ul>
                 </div>

libs/utils/src/hooks/use-auth-store.ts

@@ -25,7 +25,7 @@ export const useAuthStore = create<SessionState>((set) => {
 
   return {
     isLoading: false,
-    session: isAuthenticated ? { ...session, ...user } : undefined,
+    session: isAuthenticated ? { token: session.token, user } : undefined,
     status: isAuthenticated
       ? ESessionStatus.Authenticated
       : ESessionStatus.Unauthenticated,

libs/utils/src/hooks/use-session.ts

@@ -6,7 +6,10 @@ import { useNavigate } from 'react-router';
 export const useSession = () => {
   const navigate = useNavigate();
   const { mutate, isPending } = usePostLogin();
-  const { setLoading, setSession, clearSession, session } = useAuthStore();
+  const { setLoading, setSession, clearSession, session, status } =
+    useAuthStore();
+  const isAuthenticated = status === 'authenticated';
+
   const signIn = (payload: TLoginRequest) => {
     setLoading(true);
     mutate(payload, {
@@ -33,5 +36,6 @@ export const useSession = () => {
     signIn,
     signOut,
     isLoading: isPending,
+    isAuthenticated,
   };
 };