diff --git a/.env.example b/.env.example index 0fa8f35..b444aa3 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1 @@ -NEXT_PUBLIC_API_URL=localhost:3000/api -NEXT_PUBLIC_DOMAIN=localhost \ No newline at end of file +NEXT_PUBLIC_API_URL=localhost:3000/api \ No newline at end of file diff --git a/README.md b/README.md index 6b6a46e..1c20886 100644 --- a/README.md +++ b/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 diff --git a/src/api/auth.ts b/src/api/auth.ts index 0463e7a..0730e02 100644 --- a/src/api/auth.ts +++ b/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(); } } } diff --git a/src/features/Auth/hooks/useSession.ts b/src/features/Auth/hooks/useSession.ts index d949cba..f949e0c 100644 --- a/src/features/Auth/hooks/useSession.ts +++ b/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 }; } diff --git a/src/features/Auth/utils.ts b/src/features/Auth/utils.ts index 660f821..3b705b7 100644 --- a/src/features/Auth/utils.ts +++ b/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); diff --git a/src/pages/api/auth/login.ts b/src/pages/api/auth/login.ts index 67b4a2a..4218070 100644 --- a/src/pages/api/auth/login.ts +++ b/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 === "hohshenyien@gmail.com" && data.password === "asdf") { res.status(200).json({ auth_token: "This is a JWT auth token" });