use window location to reload

client/src/components/AppHeader.tsx

@@ -1,7 +1,8 @@
 import logo from '@assets/images/logo.svg';
 import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { Cookies, withCookies } from 'react-cookie';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
 
 const getMeInfo = async () => {
   const token = new Cookies().get('token');
@@ -16,8 +17,6 @@ const getMeInfo = async () => {
   return response.json();
 };
 
-
-
 const AppHeader = () => {
   const meInfo = useQuery(['me'], getMeInfo, {
     onSuccess: (data) => {
@@ -28,6 +27,11 @@ const AppHeader = () => {
     },
   });
 
+  const logOut = async () => {
+    new Cookies().remove('token');
+    window.location.reload();
+  };
+
   return (
     <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
       <div className="app-header__logo">
@@ -43,7 +47,9 @@ const AppHeader = () => {
               {meInfo.isLoading ? '' : meInfo.data ? meInfo.data.firstName + ' ' + meInfo.data.lastName : ''}
             </span>
           </div>
-          <button className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+          <button
+            className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+            onClick={() => logOut()}
           >
             Deonnexion
           </button>

client/src/controllers/Auth.ts

@@ -1,9 +1,8 @@
-import { useCookies } from "react-cookie";
+import { Cookies } from "react-cookie";
 
 const checkAuth = () => {
-  const [cookie, setCookie] = useCookies(['token']);
-
-  if (cookie.token && cookie.token !== '') {
+  const token = new Cookies().get("token");
+  if (token && token !== '') {
     return true;
   }
   return false;

client/src/routes/login.tsx

@@ -1,4 +1,4 @@
-import { Link, Navigate } from 'react-router-dom';
+import { Link, Navigate, useNavigate } from 'react-router-dom';
 import logo from '@assets/images/logo.svg';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -9,7 +9,7 @@ const Login = () => {
   const [cookie, setCookie] = useCookies(['token']);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-
+  
   const { refetch } = useQuery(
     ['login'],
     async () => {
@@ -25,8 +25,8 @@ const Login = () => {
     },
     {
       onSuccess: (data: Token) => {
-        setCookie('token', data.token, { path: '/', expires: new Date(data.expiresAt) });
-        return <Navigate to="/" />;
+        setCookie('token', data.token, { path: '/', expires: new Date(data.expiresAt), sameSite: 'strict' });
+        window.location.reload();
       },
       onError: (error) => {
         console.error(error);