Develop

client/package.json

@@ -13,6 +13,9 @@
     "@apollo/client": "^3.13.8",
     "@radix-ui/react-dialog": "^1.1.11",
     "graphql": "^16.11.0",
+
+    "jwt-decode": "^4.0.0",
+
     "lucide-react": "^0.503.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

client/src/Utils/apolloClient.ts

@@ -0,0 +1,25 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+
+const httpLink = createHttpLink({
+  uri: import.meta.env.VITE_API_URL
+    ? `${import.meta.env.VITE_API_URL}/graphql`
+    : '/graphql',
+});
+
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem('id_token');
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : '',
+    },
+  };
+});
+
+const client = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
+});
+
+export default client;

client/src/Utils/auth.ts

@@ -0,0 +1,52 @@
+import { jwtDecode } from 'jwt-decode';
+
+interface UserToken {
+  name?: string;
+  exp: number;
+  _id?: string;
+  email?: string;
+  username?: string;
+}
+
+// AuthService class to manage login/logout/token logic
+class AuthService {
+  // Get user data from token
+  getProfile() {
+    return jwtDecode(this.getToken() || '');
+  }
+
+  // Check if user is logged in
+  loggedIn() {
+    const token = this.getToken();
+    return !!token && !this.isTokenExpired(token);
+  }
+
+  // Check if token is expired
+  isTokenExpired(token: string) {
+    try {
+      const decoded = jwtDecode<UserToken>(token);
+      return decoded.exp < Date.now() / 1000;
+    } catch (err) {
+      return true;
+    }
+  }
+
+  // Get token from localStorage
+  getToken() {
+    return localStorage.getItem('id_token');
+  }
+
+  // Login - save token to localStorage
+  login(idToken: string) {
+    localStorage.setItem('id_token', idToken);
+    window.location.assign('/');
+  }
+
+  // Logout - remove token
+  logout() {
+    localStorage.removeItem('id_token');
+    window.location.assign('/');
+  }
+}
+
+export default new AuthService();

client/src/components/ui/dialog.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/Utils/utils";
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;