merge aj -> phillip. implements authentication/chat/friends

Author: phillipnguyenn

client/package-lock.json

@@ -26,8 +26,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "is-inside-container": "^1.0.0",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.516.0",
-    "next": "15.4.7",
+    "next": "^15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tailwind-merge": "^3.3.1",

client/package.json

@@ -0,0 +1,13 @@
+import Navbar from "@/components/ui/Navbar";
+
+type LayoutProps = { children: React.ReactNode };
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Navbar />
+      <main className="flex-1 p-4">{children}</main>
+      <footer className="bg-gray-200 p-4 text-center">© 2026 My App</footer>
+    </div>
+  );
+}

client/src/components/Layout.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+import { useAuth } from "@/context/AuthContext";
+
+const Navbar = () => {
+  const { isLoggedIn, logout } = useAuth();
+
+  return (
+    <nav className="flex justify-between bg-gray-200 p-4">
+      <div className="flex gap-4">
+        <Link href="/">Home</Link>
+        <Link href="/chat">Chat</Link>
+      </div>
+
+      <div className="flex gap-4">
+        {isLoggedIn ? (
+          <>
+            <button onClick={logout} className="text-red-500">
+              Logout
+            </button>
+          </>
+        ) : (
+          <>
+            <Link href="/login">Login</Link>
+            <Link href="/signup">Signup</Link>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

client/src/components/ui/Navbar.tsx

@@ -0,0 +1,62 @@
+import { useRouter } from "next/router";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+type AuthContextType = {
+  accessToken: string | null;
+  refreshToken: string | null;
+  login: (access: string, refresh: string) => void;
+  logout: () => void;
+  isLoggedIn: boolean;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [refreshToken, setRefreshToken] = useState<string | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const storedAccess = localStorage.getItem("accessToken");
+    const storedRefresh = localStorage.getItem("refreshToken");
+    if (storedAccess) setAccessToken(storedAccess);
+    if (storedRefresh) setRefreshToken(storedRefresh);
+  }, []);
+
+  const login = (access: string, refresh: string) => {
+    setAccessToken(access);
+    setRefreshToken(refresh);
+    localStorage.setItem("accessToken", access);
+    localStorage.setItem("refreshToken", refresh);
+  };
+
+  const logout = () => {
+    setAccessToken(null);
+    setRefreshToken(null);
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshToken");
+    router.push("/login");
+  };
+
+  const isLoggedIn = !!accessToken;
+
+  return (
+    <AuthContext.Provider
+      value={{ accessToken, refreshToken, login, logout, isLoggedIn }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error("useAuth must be used within AuthProvider");
+  return context;
+};

client/src/context/AuthContext.tsx

@@ -4,13 +4,17 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 
+import { AuthProvider } from "@/context/AuthContext";
+
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
-      <Component {...pageProps} />
-    </QueryClientProvider>
+    <AuthProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <Component {...pageProps} />
+      </QueryClientProvider>
+    </AuthProvider>
   );
 }

client/src/pages/_app.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import Layout from "@/components/Layout";
+import { useAuth } from "@/context/AuthContext";
+
+export default function AddFriend() {
+  const { accessToken } = useAuth();
+  const [username, setUsername] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleAdd = async () => {
+    const res = await fetch("http://localhost:8000/api/chat/add_friend/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({ username }),
+    });
+    const data = await res.json();
+    setMessage(data.detail || "Error");
+  };
+
+  return (
+    <Layout>
+      <div className="mx-auto max-w-md p-4">
+        <h1 className="mb-2 text-xl font-bold">Add Friend</h1>
+        <input
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder="Enter username"
+          className="mb-2 w-full border p-2"
+        />
+        <button
+          onClick={handleAdd}
+          className="w-full rounded bg-green-500 p-2 text-white"
+        >
+          Add Friend
+        </button>
+        {message && <p className="mt-2">{message}</p>}
+      </div>
+    </Layout>
+  );
+}