Logout API Integration (#57)

* Logout API Integration * Fix-Sonar issues
tekdi · Dec 3, 2024 · 35c8bfc · 35c8bfc
1 parent 473e6a7
commit 35c8bfc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/src/components/common/layout/Navbar.tsx b/src/components/common/layout/Navbar.tsx
@@ -12,24 +12,40 @@ import {
   Alert,
   AlertIcon,
   Image,
+  useToast,
 } from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
 import CustomSelect from "../input/Select";
 // import { useKeycloak } from "@react-keycloak/web";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { logoutUser } from "../../../services/auth/auth";
 
 const options: { value: string; label: string }[] = [];
 const Navbar: React.FC<{ isMenu?: boolean }> = ({ isMenu = true }) => {
   const [success] = useState<string>("");
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const toast = useToast();
   // const { keycloak } = useKeycloak();
   const handleLogout = async () => {
-    localStorage.removeItem("authToken");
-    navigate("/");
-    navigate(0);
     // keycloak.logout({ redirectUri: window.location.origin });
+    try {
+      const response = await logoutUser();
+      if (response) {
+        navigate("/");
+        navigate(0);
+      }
+    } catch (error) {
+      console.log(error);
+      toast({
+        title: "Logout failed",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+        description: "Try Again",
+      });
+    }
   };
 
   return (

diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Box, VStack } from "@chakra-ui/react";
+import { Box, useToast, VStack } from "@chakra-ui/react";
 import {
   getUser,
   getDocumentsList,
   sendConsent,
   getUserConsents,
+  logoutUser,
 } from "../services/auth/auth";
 import { useNavigate } from "react-router-dom";
 import CommonButton from "../components/common/button/Button";
@@ -26,6 +27,7 @@ const Home: React.FC = () => {
   const { userData, documents, updateUserData } = useContext(AuthContext)!;
   const purpose = "sign_up_tnc";
   const purpose_text = "sign_up_tnc";
+  const toast = useToast();
   const handleRedirect = () => {
     navigate("/explorebenefits");
   };
@@ -39,10 +41,24 @@ const Home: React.FC = () => {
     }
   };
 
-  const handleConsent = () => {
+  const handleConsent = async () => {
     setConsentSaved(!consentSaved);
-    keycloak.logout();
-    localStorage.removeItem("authToken");
+    try {
+      const response = await logoutUser();
+      if (response) {
+        navigate("/");
+        navigate(0);
+      }
+    } catch (error) {
+      console.log(error);
+      toast({
+        title: "Logout failed",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+        description: "Try Again",
+      });
+    }
   };
 
   const checkConsent = (consent) => {

diff --git a/src/screens/auth/SignIn.tsx b/src/screens/auth/SignIn.tsx
@@ -32,6 +32,7 @@ const SignIn: React.FC = () => {
     // Set form validity
     setIsFormValid(isValid);
   }, [username, password]);
+  const [token, setToken] = useState();
 
   const handleLogin = async () => {
     try {
@@ -45,7 +46,9 @@ const SignIn: React.FC = () => {
           duration: 3000,
           isClosable: true,
         });
+        setToken(response);
         localStorage.setItem("authToken", response.data.access_token);
+        localStorage.setItem("refreshToken", response.data.refresh_token);
         navigate(0);
       }
     } catch (error) {
@@ -63,6 +66,7 @@ const SignIn: React.FC = () => {
   const handleBack = () => {
     navigate("/");
   };
+  console.log("response", token);
 
   return (
     <Layout

diff --git a/src/services/auth/auth.tsx b/src/services/auth/auth.tsx
@@ -1,5 +1,4 @@
 import axios from "axios";
-import { removeToken } from "./asyncStorage";
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 interface UserData {
@@ -21,6 +20,8 @@ export const loginUser = async (loginData: object) => {
         "Content-Type": "application/json",
       },
     });
+
+    console.log("response.data", response.data);
     return response.data;
   } catch (error: unknown) {
     if (axios.isAxiosError(error) && error.response) {
@@ -33,7 +34,9 @@ export const loginUser = async (loginData: object) => {
   }
 };
 
-export const logoutUser = async (accessToken: string, refreshToken: string) => {
+export const logoutUser = async () => {
+  const accessToken = localStorage.getItem("authToken");
+  const refreshToken = localStorage.getItem("refreshToken");
   try {
     const response = await axios.post(
       `${apiBaseUrl}/auth/logout`,
@@ -47,8 +50,9 @@ export const logoutUser = async (accessToken: string, refreshToken: string) => {
         },
       }
     );
+    localStorage.removeItem("authToken");
+    localStorage.removeItem("refreshToken");
 
-    await removeToken();
     return response.data;
   } catch (error: unknown) {
     if (axios.isAxiosError(error) && error.response) {