feat: auth wip

client/package.json

@@ -19,14 +19,16 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "jsonwebtoken": "^9.0.2",
     "mongodb": "^6.8.0",
     "mongoose": "^8.6.1",
-    "next": "14.2.5",
+    "next": "^14.2.14",
     "react": "^18",
     "react-dom": "^18",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

client/src/components/LoginForm.tsx

@@ -19,14 +19,12 @@ export function LoginForm() {
     try {
       const token = await login(email, password);
 
-      console.log("Logged in User:", token);
-
       if (token) {
-        router.replace("/");
-
         // Add token to the request header
         axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
         window.localStorage.setItem("token", token);
+
+        router.replace("/hereeast");
       }
     } catch (err) {
       // Err if username exists

client/src/components/layouts/AuthLayout.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+import { ReactNode, useEffect } from "react";
+import jwt from "jsonwebtoken";
+
+import { useAuth } from "~/hooks";
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  const router = useRouter();
+
+  const { isAuth } = useAuth();
+
+  useEffect(() => {
+    if (isAuth) {
+      const token = localStorage.getItem("token") || "";
+      const decodedUser = jwt.decode(token);
+
+      console.log(decodedUser);
+    } else {
+      console.log("Auth", isAuth);
+
+      // router.replace("/");
+    }
+  }, [isAuth, router]);
+
+  return <>{isAuth ? children : null}</>;
+}

client/src/components/layouts/Header.tsx

@@ -1,11 +1,17 @@
 import Link from "next/link";
-import { Button } from "../ui/Button";
 import { useRouter } from "next/router";
 
+import { Button } from "../ui/Button";
+import { useAuth } from "~/hooks";
+
 export function Header() {
   const router = useRouter();
 
+  // const { setIsAuth } = useAuth();
+
   function handleLogout() {
+    // setIsAuth(null);
+
     localStorage.removeItem("token");
     router.replace("/");
   }

client/src/components/layouts/Login.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import Link from "next/link";
+
+import { LoginForm } from "../LoginForm";
+import { useAuth } from "~/hooks";
+import { useRouter } from "next/router";
+
+export function Login() {
+  const router = useRouter();
+
+  // const { isAuth } = useAuth();
+
+  // useEffect(() => {
+  //   if (isAuth) {
+  //     router.replace("/");
+  //   }
+  // }, [isAuth]);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h2 className="text-center font-semibold">👋 Hey there!</h2>
+      </div>
+
+      <div>
+        <div className="mb-6">
+          <LoginForm />
+        </div>
+
+        <div className="space-x-1 text-center">
+          <span>Don't have an account yet?</span>
+          <Link
+            href="/register"
+            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
+          >
+            Create Account
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/layouts/Register.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
+import { RegisterForm } from "../RegisterForm";
+import { useAuth } from "~/hooks";
+
+export function Register() {
+  const router = useRouter();
+
+  // const { isAuth } = useAuth();
+
+  // useEffect(() => {
+  //   if (isAuth) {
+  //     router.replace("/");
+  //   }
+  // }, [isAuth, router]);
+
+  return (
+    <div>
+      <div className="mb-6">
+        <h2 className="text-center font-semibold">Register, please 😊</h2>
+      </div>
+
+      <div>
+        <div className="mb-6">
+          <RegisterForm />
+        </div>
+
+        <div className="space-x-1 text-center">
+          <span>Been there already?</span>
+          <Link
+            href="/login"
+            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
+          >
+            Login
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/layouts/index.ts

@@ -1,5 +1,6 @@
 export * from "./Dashboard";
 export * from "./Layout";
-export * from "./AuthRedirect";
+export * from "./AuthLayout";
 export * from "./Header";
 export * from "./Footer";
+export * from "./Login";

client/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./useEntries";
 export * from "./useAppContext";
 export * from "./useMonthContext";
 export * from "./useMonthRating";
+export * from "./useAuth";

client/src/hooks/useAuth.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useAuth() {
+  const [isAuth, setIsAuth] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const token = localStorage.getItem("token");
+
+      if (token) {
+        setIsAuth(true);
+      }
+    }
+  }, []);
+
+  return { isAuth, setIsAuth };
+}

client/src/pages/[slug].tsx

@@ -1,21 +1,12 @@
-import Head from "next/head";
-
-import { Dashboard, AuthRedirect } from "~/components/layouts";
+import { Dashboard, AuthLayout } from "~/components/layouts";
 import { MonthContextProvider } from "~/context";
 
 export default function DashboardPage() {
   return (
-    <AuthRedirect>
-      {/* <Head>
-        <title>Habit Tracker</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.png" />
-      </Head> */}
-
+    <AuthLayout>
       <MonthContextProvider>
         <Dashboard />
       </MonthContextProvider>
-    </AuthRedirect>
+    </AuthLayout>
   );
 }

client/src/pages/_app.tsx

@@ -1,10 +1,21 @@
 import "~/styles/globals.css";
 import type { AppProps } from "next/app";
 
+import { useEffect } from "react";
+import axios from "axios";
+
 import { AppContextProvider } from "~/context";
 import { Layout } from "~/components/layouts";
 
 export default function App({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+
+    if (token) {
+      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+    }
+  }, []);
+
   return (
     <AppContextProvider>
       <Layout>

client/src/pages/login.tsx

@@ -1,44 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-import { LoginForm } from "~/components/LoginForm";
+import { Login } from "~/components/layouts";
 
 export default function LoginPage() {
-  const router = useRouter();
-
-  const [view, setView] = useState<"login" | "register">("login");
-
-  const isAuthenticated = false;
-  const slug = "hereeast";
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      router.replace(`/${slug}`);
-    }
-  }, [isAuthenticated, router]);
-
-  return (
-    <div>
-      <div className="mb-6">
-        <h2 className="text-center font-semibold">👋 Hey there!</h2>
-      </div>
-
-      <div>
-        <div className="mb-6">
-          <LoginForm />
-        </div>
-
-        <div className="space-x-1 text-center">
-          <span>Don't have an account yet?</span>
-          <Link
-            href="/register"
-            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
-          >
-            Create Account
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+  return <Login />;
 }

client/src/pages/register.tsx

@@ -1,42 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
-import { RegisterForm } from "~/components/RegisterForm";
+import { Register } from "~/components/layouts/Register";
 
 export default function RegisterPage() {
-  const router = useRouter();
-
-  const isAuthenticated = false;
-  const slug = "hereeast";
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      router.replace(`/${slug}`);
-    }
-  }, [isAuthenticated, router]);
-
-  return (
-    <div>
-      <div className="mb-6">
-        <h2 className="text-center font-semibold">Register, please 😊</h2>
-      </div>
-
-      <div>
-        <div className="mb-6">
-          <RegisterForm />
-        </div>
-
-        <div className="space-x-1 text-center">
-          <span>Been there already?</span>
-          <Link
-            href="/login"
-            className="underline underline-offset-2 hover:no-underline hover:opacity-50"
-          >
-            Login
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+  return <Register />;
 }

server/src/controllers/login.ts

@@ -34,6 +34,7 @@ export async function login(req: Request, res: Response) {
     const userPayload = {
       _id: user._id,
       email: user.email,
+      username: user.username,
     };
 
     const token = jwt.sign(userPayload, SECRET_KEY || "", { expiresIn: "7d" });