(signin, signup, logout working),added middleware, multiple session h…

…andling
code100x · Feb 4, 2025 · 964b251 · 964b251
1 parent 68407be
commit 964b251
Show file tree

Hide file tree

Showing 22 changed files with 753 additions and 306 deletions.
diff --git a/apps/http-backend/src/middleware/index.ts b/apps/http-backend/src/middleware/index.ts
@@ -49,7 +49,7 @@ export async function otpRateLimitter(req : Request, res : Response, next  :Next
     const key = `otp_limit:${ip}`
     const maxRequest = 5;
     const expireTime = 5*60; 
-    if(process.env.NODE_ENV==="dev"){
+    if(process.env.NODE_ENV !=="production"){
         next()
         return
     }
@@ -79,7 +79,7 @@ export async function otpVerifyRateLimiter(req: Request, res: Response, next: Ne
     const maxAttempts = 7; // Allow more attempts than OTP requests
     const expireTime = 5 * 60; 
 
-    if (process.env.NODE_ENV === "dev") {
+    if (process.env.NODE_ENV !== "production") {
         next();
         return;
     }

diff --git a/apps/http-backend/src/routes/v1/user/index.ts b/apps/http-backend/src/routes/v1/user/index.ts
@@ -77,18 +77,12 @@ router.post("/signup/verify",otpVerifyRateLimiter, async (req, res) => {
         }
     })
 
-    const sessionId= crypto.randomUUID();
-    const token = jwt.sign({
-        userId: user.id,
-        plan : user.plan,
-        sessionId
-    }, JWT_PASSWORD)
-
+    const sessionId= crypto.randomUUID()
     // Set user sessions to validate login based on plan
     const sessionKey = `session:${user.id}`
     await setUserSessionsByPlan(sessionKey , user.plan , sessionId)
 
-    setCookie(res, token, 200, "LOGIN");
+    setCookie(res, 200, sessionId , user.id, user.plan,  "LOGIN");
 
 });
 
@@ -157,16 +151,9 @@ router.post("/signin/verify",otpVerifyRateLimiter, async (req, res) => {
         }
     })
     const sessionId= crypto.randomUUID();
-    const token = jwt.sign({
-        userId: user.id,
-        plan : user.plan,
-        sessionId
-
-    }, JWT_PASSWORD)
-
     const sessionKey = `session:${user.id}`
     await setUserSessionsByPlan(sessionKey , user.plan, sessionId)
-    setCookie(res,token, 200, "VERIFY")
+    setCookie(res, 200, sessionId , user.id, user.plan,  "VERIFY");
 
 });
 

diff --git a/apps/http-backend/src/utils/cookie.ts b/apps/http-backend/src/utils/cookie.ts
@@ -3,14 +3,18 @@ import { JWT_PASSWORD } from "../config";
 import { Response } from "express";
 
 
-export const setCookie = (res: Response, token: string, statusCode: number, cookieType: "SIGNUP" | "LOGIN" | "VERIFY") => {
-
+export const setCookie = (res: Response, statusCode: number, sessionId : string,userId :string, plan : string, cookieType: "SIGNUP" | "LOGIN" | "VERIFY") => {
+    const token = jwt.sign({
+        userId,
+        plan ,
+        sessionId
+    }, JWT_PASSWORD)
     res
         .status(statusCode)
         .cookie("token", token, {
             httpOnly: true,
             maxAge: 10*24*60*60*1000,
-            sameSite: "lax",
+            sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
             secure: process.env.NODE_ENV === "production",
         })
         .json({

diff --git a/apps/user-fe/app/_common/navbar.tsx b/apps/user-fe/app/_common/navbar.tsx
@@ -4,24 +4,33 @@ import { NavLogo } from "../assets";
 import Image from "next/image";
 import { figtree, manrope } from "../lib/fonts";
 import { cn } from "@repo/ui/utils";
-import { usePathname } from "next/navigation";
-import { useState, useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import { LoginDialog } from "../_components/signup/singupDialog";
-import Cookies from "js-cookie"; // Make sure to install this package
-import { getCookies } from "../../actions/auth";
+import { Button } from "@repo/ui/button";
+import { useDispatch, useSelector } from "react-redux";
+import { IDispatchType, IRootType } from "../lib/redux/store";
+import { setIsLoginOpen, setIsSignup } from "../lib/redux/signInDialog";
+import { logout } from "../lib/actions/getUser";
+import { logoutState } from "../lib/redux/authSlice";
+import { toast } from "sonner";
 
 export default function Navbar() {
   const pathname = usePathname();
-  const [isLoginOpen, setIsLoginOpen] = useState(false);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-
-
-  useEffect(() => {
-    const cookie  = getCookies();
-    setIsAuthenticated(!!cookie);
-  }, []);
+  const dispatch = useDispatch<IDispatchType>()
+  const isAuthorized = useSelector((state: IRootType) => state.auth.isAuthorized);
+  const isLoading = useSelector((state: IRootType) => state.auth.isLoading);
+  const router = useRouter()
 
+  //Handle Logout
+  const handleLogout =async()=>{
+    try{
+      await logout()
+      dispatch(logoutState())
+      router.push('/')
+    }catch(e){
+      toast.error('Cannot logout')
+    }
+  }
   return (
     <nav className="w-full bg-black">
       <div className="max-w-[1440px] mx-auto h-24 px-6 lg:px-24 flex items-center justify-between">
@@ -74,37 +83,56 @@ export default function Navbar() {
           </Link>
         </div>
 
-        {isAuthenticated ? (
-          <Link
-            href="/episodes"
-            className={cn(
-              "px-6 py-2 bg-gradient-to-r from-[#aa823d] via-[#efe188] to-[#d1b759]",
-              "rounded-lg text-neutral-950 font-semibold",
-              "hover:opacity-90 transition-opacity",
-              figtree.className
+        {!isLoading ? (
+          <div>
+            {!isAuthorized ? (
+              <div className="space-x-2">
+                <Button
+                  onClick={() => {
+                    dispatch(setIsSignup(false));
+                    dispatch(setIsLoginOpen(true))
+                  }}
+                  className={cn(
+                    "px-6 py-2 bg-gradient-to-r from-[#aa823d] via-[#efe188] to-[#d1b759]",
+                    "rounded-lg text-neutral-950 font-semibold hover:opacity-90 transition-opacity",
+                    figtree.className
+                  )}
+                >
+                  Login
+                </Button>
+                <Button
+                  onClick={() => {
+                    dispatch(setIsLoginOpen(true));
+                    dispatch(setIsSignup(true));
+                  }}
+                  className={cn(
+                    "px-6 py-2 bg-gradient-to-r from-[#aa823d] via-[#efe188] to-[#d1b759]",
+                    "rounded-lg text-neutral-950 font-semibold hover:opacity-90 transition-opacity",
+                    figtree.className
+                  )}
+                >
+                  Signup
+                </Button>
+              </div>
+            ) : (
+              // Logout Button
+              <Button
+                className={cn(
+                  "px-6 py-2 bg-gradient-to-r from-[#aa823d] via-[#efe188] to-[#d1b759]",
+                  "rounded-lg text-neutral-950 font-semibold hover:opacity-90 transition-opacity",
+                  figtree.className
+                )}
+                onClick={handleLogout}
+              >
+                Logout
+              </Button>
             )}
-          >
-            Book Now
-          </Link>
+          </div>
         ) : (
-          <button
-            onClick={() => setIsLoginOpen(true)}
-            className={cn(
-              "px-6 py-2 bg-gradient-to-r from-[#aa823d] via-[#efe188] to-[#d1b759]",
-              "rounded-lg text-neutral-950 font-semibold",
-              "hover:opacity-90 transition-opacity",
-              figtree.className
-            )}
-          >
-            Login
-          </button>
+          <div />
         )}
 
-        {/* Login Dialog */}
-        <LoginDialog
-          isOpen={isLoginOpen}
-          onClose={() => setIsLoginOpen(false)}
-        />
+        <LoginDialog/>
       </div>
     </nav>
   );