Fixed cookie

.env.example

@@ -1,2 +1 @@
-NEXT_PUBLIC_API_URL=localhost:3000/api
-NEXT_PUBLIC_DOMAIN=localhost
+NEXT_PUBLIC_API_URL=localhost:3000/api

README.md

@@ -66,13 +66,11 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 ### Env
 
-The .env file has two variables that you might want to update
+The .env file has one variable that you might want to update
 
 ```env
 # The base API URL to make any request
 NEXT_PUBLIC_API_URL=/api
-# For cookie
-NEXT_PUBLIC_DOMAIN=localhost
 ```
 
 ### Authentication

src/api/auth.ts

@@ -1,12 +1,11 @@
 import { apiClient } from "@/features/Auth/AxiosProvider";
-import { deleteCookie } from "cookies-next";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { User } from "@/features/Auth/types";
 import { AxiosError } from "axios";
 import useAuthToken from "@/features/Auth/hooks/useAuthToken";
 import { RegisterType } from "@/features/Auth/modals/RegisterModal";
 import { AuthType } from "@/features/Auth/modals/LoginModal";
-import { login } from "@/features/Auth/utils";
+import { deleteCookie, login } from "@/features/Auth/utils";
 import { modals } from "@mantine/modals";
 import { useRouter } from "next/router";
 import { authRedirectPath, loginAfterRegister } from "@/configs/auth.config";
@@ -71,10 +70,7 @@ export const useUserQuery = () => {
       } catch (exception) {
         if (exception instanceof AxiosError) {
           if (exception.response?.status === 401) {
-            deleteCookie("authToken", {
-              path: "/",
-              domain: process.env.NEXT_PUBLIC_DOMAIN,
-            });
+            deleteCookie();
           }
         }
       }

src/features/Auth/hooks/useSession.ts

@@ -18,8 +18,6 @@ const useSession = () => {
   const authToken = useAuthToken();
 
   const session: Session = useMemo(() => {
-    console.log("AUTH TOKEN Changed");
-    console.log(authToken);
     if (!authToken) {
       return { status: "unauthenticated", user: undefined };
     }

src/features/Auth/utils.ts

@@ -1,5 +1,5 @@
 import { notifications } from "@mantine/notifications";
-import { deleteCookie, setCookie } from "cookies-next";
+import { setCookie } from "cookies-next";
 import { useRouter } from "next/router";
 
 export const login = (jwt: string, message?: string, expiryDate?: Date) => {
@@ -8,6 +8,7 @@ export const login = (jwt: string, message?: string, expiryDate?: Date) => {
     expiryDate.setFullYear(expiryDate.getFullYear() + 1);
   }
   setCookie("authToken", jwt, { expires: expiryDate });
+  cookieChanged();
   notifications.show({
     message: message ?? "Login successfully, redirecting...",
     color: "green",
@@ -18,20 +19,27 @@ export const useLogout = () => {
   const router = useRouter();
   const signout = () => {
     router.push("/");
-    deleteCookie("authToken", {
-      path: "/",
-      domain: process.env.NEXT_PUBLIC_DOMAIN,
-    });
-    cookieChanged();
-    notifications.show({
-      message: "Logged out successfully",
-      color: "green",
-    });
+    // Logging out after redirected
+    setTimeout(() => {
+      deleteCookie();
+      notifications.show({
+        message: "Logged out successfully",
+        color: "green",
+      });
+    }, 300);
   };
 
   return signout;
 };
 
+export const deleteCookie = () => {
+  // Deleting cookie by setting it to a long ago time
+  const expired = new Date();
+  expired.setFullYear(1970);
+  setCookie("authToken", "", { expires: expired });
+  cookieChanged();
+};
+
 export const cookieChanged = () => {
   const event = new Event("CookieChanged");
   document.dispatchEvent(event);

src/pages/api/auth/login.ts

@@ -9,7 +9,6 @@ const authSchema = z.object({
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === "POST") {
     const data = authSchema.parse(JSON.parse(req.body));
-    console.log(data);
     if (data) {
       if (data.email === "[email protected]" && data.password === "asdf") {
         res.status(200).json({ auth_token: "This is a JWT auth token" });