added log out

app/client/hooks/auth.tsx

@@ -7,7 +7,7 @@ import { url } from '../main';
 
 interface AuthContextProps {
   headers: Session | null;
-  setHeaders: (session: Session) => void;
+  setHeaders: (session: Session | null) => void;
 }
 
 export const AuthContext = createContext<AuthContextProps | null>(null);
@@ -16,6 +16,7 @@ export const AuthProvider = AuthContext.Provider;
 interface UseAuthOutput extends AuthContextProps {
   isAuthenticated: boolean;
   login: (value: { email: string; password: string }) => Promise<Session | null | undefined>;
+  logout: () => Promise<void>;
 }
 
 export function useAuth(): UseAuthOutput {
@@ -25,6 +26,11 @@ export function useAuth(): UseAuthOutput {
     successMsg: 'Logged in successfully.'
   });
 
+  const { update: logout } = useToastMutation({
+    mutation: logoutMutation,
+    successMsg: 'Logged out successfully.'
+  });
+
   if (!authContext) throw new Error('useAuth must be used within an AuthProvider');
 
   return {
@@ -45,6 +51,10 @@ export function useAuth(): UseAuthOutput {
         return data.login;
       }
       return data;
+    },
+    logout: async () => {
+      await logout();
+      authContext.setHeaders(null);
     }
   };
 }
@@ -81,3 +91,9 @@ const loginMutation = gql`
 
   ${sessionFragment}
 `;
+
+const logoutMutation = gql`
+  mutation AuthLogout {
+    logout
+  }
+`;

app/client/pages/__root.tsx

@@ -1,6 +1,7 @@
 import { Button, Stack } from '@chakra-ui/react';
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
 import React from 'react';
+import { useAuth } from '../hooks/auth';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -15,25 +16,34 @@ const TanStackRouterDevtools =
       );
 
 export const Route = createRootRoute({
-  component: () => (
+  component: () => {
-    <Stack padding={3}>
+    const { isAuthenticated, logout } = useAuth();
-      <Stack flexDirection={'row'} justifyContent={'space-between'}>
+    return (
-        <Link to="/">
+      <Stack padding={3}>
-          <Button>Home</Button>
+        <Stack flexDirection={'row'} justifyContent={'space-between'}>
-        </Link>
+          <Link to="/">
+            <Button>Home</Button>
+          </Link>
 
-        <Stack flexDirection={'row'}>
+          <Stack flexDirection={'row'}>
-          <Link to="/login">
+            {!isAuthenticated ? (
-            <Button>Sign in</Button>
+              <>
-          </Link>
+                <Link to="/login">
-          <Link to="/register">
+                  <Button>Sign in</Button>
-            <Button>Sign up</Button>
+                </Link>
-          </Link>
+                <Link to="/register">
+                  <Button>Sign up</Button>
+                </Link>
+              </>
+            ) : (
+              <Button onClick={async () => logout()}>Log out</Button>
+            )}
+          </Stack>
         </Stack>
+        <hr style={{ padding: '4px' }} />
+        <Outlet />
+        <TanStackRouterDevtools />
       </Stack>
-      <hr style={{ padding: '4px' }} />
+    );
-      <Outlet />
+  }
-      <TanStackRouterDevtools />
-    </Stack>
-  )
 });