fix: loggin out keeps refresh token in browser

fix: https://github.com/canove/whaticket/issues/106

backend/src/controllers/SessionController.ts

@@ -31,9 +31,21 @@ export const update = async (
     throw new AppError("ERR_SESSION_EXPIRED", 401);
   }
 
-  const { user, newToken, refreshToken } = await RefreshTokenService(token);
+  const { user, newToken, refreshToken } = await RefreshTokenService(
+    res,
+    token
+  );
 
   SendRefreshToken(res, refreshToken);
 
   return res.json({ token: newToken, user });
 };
+
+export const remove = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  res.clearCookie("jrt");
+
+  return res.send();
+};

backend/src/routes/authRoutes.ts

@@ -1,6 +1,7 @@
 import { Router } from "express";
 import * as SessionController from "../controllers/SessionController";
 import * as UserController from "../controllers/UserController";
+import isAuth from "../middleware/isAuth";
 
 const authRoutes = Router();
 
@@ -10,4 +11,6 @@ authRoutes.post("/login", SessionController.store);
 
 authRoutes.post("/refresh_token", SessionController.update);
 
+authRoutes.delete("/logout", isAuth, SessionController.remove);
+
 export default authRoutes;

backend/src/services/AuthServices/RefreshTokenService.ts

@@ -1,4 +1,5 @@
 import { verify } from "jsonwebtoken";
+import { Response as Res } from "express";
 
 import User from "../../models/User";
 import AppError from "../../errors/AppError";
@@ -20,25 +21,27 @@ interface Response {
   refreshToken: string;
 }
 
-export const RefreshTokenService = async (token: string): Promise<Response> => {
-  let decoded;
-
+export const RefreshTokenService = async (
+  res: Res,
+  token: string
+): Promise<Response> => {
   try {
-    decoded = verify(token, authConfig.refreshSecret);
+    const decoded = verify(token, authConfig.refreshSecret);
+    const { id, tokenVersion } = decoded as RefreshTokenPayload;
+
+    const user = await ShowUserService(id);
+
+    if (user.tokenVersion !== tokenVersion) {
+      res.clearCookie("jrt");
+      throw new AppError("ERR_SESSION_EXPIRED", 401);
+    }
+
+    const newToken = createAccessToken(user);
+    const refreshToken = createRefreshToken(user);
+
+    return { user, newToken, refreshToken };
   } catch (err) {
+    res.clearCookie("jrt");
     throw new AppError("ERR_SESSION_EXPIRED", 401);
   }
-
-  const { id, tokenVersion } = decoded as RefreshTokenPayload;
-
-  const user = await ShowUserService(id);
-
-  if (user.tokenVersion !== tokenVersion) {
-    throw new AppError("ERR_SESSION_EXPIRED", 401);
-  }
-
-  const newToken = createAccessToken(user);
-  const refreshToken = createRefreshToken(user);
-
-  return { user, newToken, refreshToken };
 };

frontend/src/context/Auth/AuthContext.js

@@ -1,6 +1,6 @@
 import React, { createContext } from "react";
 
-import useAuth from "./useAuth";
+import useAuth from "../../hooks/useAuth.js";
 
 const AuthContext = createContext();
 

frontend/src/context/WhatsApp/WhatsAppsContext.js

@@ -1,6 +1,6 @@
 import React, { createContext } from "react";
 
-import useWhatsApps from "./useWhatsApps";
+import useWhatsApps from "../../hooks/useWhatsApps";
 
 const WhatsAppsContext = createContext();
 

frontend/src/hooks/useAuth.js/index.js

@@ -102,14 +102,21 @@ const useAuth = () => {
 		}
 	};
 
-	const handleLogout = () => {
+	const handleLogout = async () => {
 		setLoading(true);
-		setIsAuth(false);
-		setUser({});
-		localStorage.removeItem("token");
-		api.defaults.headers.Authorization = undefined;
-		setLoading(false);
-		history.push("/login");
+
+		try {
+			await api.delete("/auth/logout");
+			setIsAuth(false);
+			setUser({});
+			localStorage.removeItem("token");
+			api.defaults.headers.Authorization = undefined;
+			setLoading(false);
+			history.push("/login");
+		} catch (err) {
+			toastError(err);
+			setLoading(false);
+		}
 	};
 
 	return { isAuth, user, loading, handleLogin, handleLogout };

frontend/src/layout/index.js

@@ -131,6 +131,11 @@ const LoggedInLayout = ({ children }) => {
 		handleCloseMenu();
 	};
 
+	const handleClickLogout = () => {
+		handleCloseMenu();
+		handleLogout();
+	};
+
 	if (loading) {
 		return <BackdropLoading />;
 	}
@@ -190,7 +195,7 @@ const LoggedInLayout = ({ children }) => {
 					>
 						WhaTicket
 					</Typography>
-					<NotificationsPopOver />
+					{user.id && <NotificationsPopOver />}
 
 					<div>
 						<IconButton
@@ -220,7 +225,7 @@ const LoggedInLayout = ({ children }) => {
 							<MenuItem onClick={handleOpenUserModal}>
 								{i18n.t("mainDrawer.appBar.user.profile")}
 							</MenuItem>
-							<MenuItem onClick={handleLogout}>
+							<MenuItem onClick={handleClickLogout}>
 								{i18n.t("mainDrawer.appBar.user.logout")}
 							</MenuItem>
 						</Menu>