add: full auth functionality

add: zustand auth store
add: jwt auto refresh

src/app/auth/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider'
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {

src/app/auth/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, type FormEvent, type ChangeEvent, useEffect } from 'react'
-import { useAuthStore } from '@/zustand/userStore';
+import { useAuthStore } from '@/zustand/authStore';
 import { redirect } from 'next/navigation';
 import StepEnterPassword from '@/features/auth/components/StepEnterPassword';
 import StepEnterNumber from '@/features/auth/components/StepEnterNumber';
@@ -12,6 +12,8 @@ import StepNewPassword from '@/features/auth/components/StepNewPassword';
 import { useLogin } from '@/hooks/auth/useLogin';
 import { useSignup } from '@/hooks/auth/useSignup';
 import { useCheckUserExistsLazy } from '@/hooks/auth/useCheckUserExists';
+import { useOtpRequest } from '@/hooks/auth/useOtpRequest';
+import { useOtpValidation } from '@/hooks/auth/useOtpValidation';
 
 type Props = object
 
@@ -29,7 +31,9 @@ function AuthIndex({ }: Props) {
     const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
     const loginMutation = useLogin()
     const signupMutation = useSignup()
-    const checkUserExistsMuation = useCheckUserExistsLazy()
+    const { run: runUserExistCheck } = useCheckUserExistsLazy()
+    const { run: runOtpRequest } = useOtpRequest();
+    const { run: runOtpValidation } = useOtpValidation();
 
 
 
@@ -42,6 +46,7 @@ function AuthIndex({ }: Props) {
     useEffect(() => {
         if (step === AUTH_STEP.ENTER_OTP) {
             console.log("REQUEST OTP")
+            runOtpRequest(number);
         }
     }, [step]);
 
@@ -67,7 +72,7 @@ function AuthIndex({ }: Props) {
         }
     }
 
-    const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    const onClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.stopPropagation();
         const target = e.target as HTMLButtonElement;
 
@@ -82,7 +87,12 @@ function AuthIndex({ }: Props) {
         }
         else if (target.id === AUTH_PAGE_ELEMENT.RESEND_OTP) {
             if (!timerRunning) {
-                restart();
+                try {
+                    await runOtpRequest(number);
+                    restart();
+                } catch {
+
+                }
             }
         }
     };
@@ -91,7 +101,7 @@ function AuthIndex({ }: Props) {
         e.preventDefault();
         if (step == AUTH_STEP.ENTER_NUMBER) {
 
-            if (await checkUserExistsMuation.run(number)) {
+            if (await runUserExistCheck(number)) {
                 setStep(AUTH_STEP.ENTER_PASSWORD)
             } else {
                 setStep(AUTH_STEP.ENTER_OTP);
@@ -107,13 +117,16 @@ function AuthIndex({ }: Props) {
             }
         }
         else if (step == AUTH_STEP.ENTER_OTP) {
+            if (!await runOtpValidation({ phone: number, otp })) {
+                setOtp('');
+                console.log('Wrong otp');
+            }
             stop();
-            setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
-            // if (await validatePhoneNumber(number)) {
-            //     setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
-            // } else {
-            //     setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
-            // }
+            if (await runUserExistCheck(number)) {
+                setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
+            } else {
+                setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
+            }
         }
         else if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
             console.log("Password changed")

src/app/page.tsx

@@ -1,18 +1,24 @@
 'use client';
 
-import { useAuthStore } from "@/zustand/userStore";
+import { useAuthStore } from "@/zustand/authStore";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {
 
   const logout = useAuthStore((state) => state.logout);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
   return (
-    <div className="grid font-sans grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="grid font-sans grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Link href={"/auth"}>Login</Link>
-        <Link href={"/"} onClick={logout}>Logout</Link>
+        {!isAuthenticated && <Link href={"/auth"}>Login</Link>}
+        {isAuthenticated &&
+          <div>
+            <Link href={"/profile"}>Profile</Link>
+            <br />
+            <Link href={""} onClick={logout}>Logout</Link>
+          </div>}
         <Image
           className="dark:invert"
           src="/next.svg"

src/app/profile/layout.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider'
+
+export default function ProfileLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <ReactQueryProvider>
+            <div className="min-h-screen grid">
+                {children}
+            </div>
+        </ReactQueryProvider>
+    )
+}

src/app/profile/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useProfile } from '@/hooks/auth/useProfile';
+import { useAuthStore } from '@/zustand/authStore';
+import React, { useEffect } from 'react'
+
+type Props = object
+
+function ProfileIndex({ }: Props) {
+    const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
+    const { mutate, data, isPending } = useProfile();
+
+    useEffect(() => {
+        if (isAuthenticated) {
+            mutate();
+        }
+    }, [isAuthenticated])
+
+    return (
+        <div>
+            {isPending && 'Loading...'}
+            <br />
+            {data && JSON.stringify(data)}
+        </div>
+    )
+}
+
+export default ProfileIndex