feat: improve authentication, with protected route, refactor code, and create comment doc

Author: mpsalunggg

.env.example

@@ -0,0 +1,3 @@
+# NEXT_PUBLIC_API_BASE_URL=https://lms-be-development.hammercode.org/api/v1
+NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
+NODE_ENV=development

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

next.config.mjs

@@ -15,6 +15,11 @@ const nextConfig = {
         protocol: "https",
         hostname: "lms-be-development.hammercode.org",
       },
+      {
+        protocol: "http",
+        port: "8000",
+        hostname: "localhost",
+      },
     ],
   },
   trailingSlash: true,

package.json

@@ -37,6 +37,7 @@
     "cookie": "^1.0.2",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.536.0",
     "motion": "^12.7.4",
@@ -63,6 +64,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "19.1.5",
     "@types/react-dom": "19.1.5",

pnpm-lock.yaml

@@ -6,38 +6,46 @@ import { Calendar1, User } from "lucide-react";
 import { Separator } from "@/components/ui/Separator";
 import { Link } from "@/lib/navigation";
 import { useAuthUser } from "@/components/hooks/UseAuthUser";
+import ProtectedRoute from "@/components/layout/ProtectedRoute";
 
-export default function UserLayout({ children }: { children: React.ReactNode }) {
+interface UserLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function UserLayout({ children }: UserLayoutProps) {
   const { user } = useAuthUser();
+
   return (
-    <section className="container mx-auto px-5 pt-24 pb-28">
-      <div className="grid grid-cols-5 gap-8">
-        <aside className="fixed right-0 bottom-0 left-0 col-span-1 mt-8 flex w-full flex-col justify-between gap-4 self-start rounded-lg bg-white lg:sticky lg:top-24 lg:flex-col lg:justify-start lg:bg-transparent dark:bg-slate-950">
-          <div className="flex items-center gap-4">
-            <Avatar className="h-12 w-12">
-              <AvatarImage src="" />
-              <AvatarFallback>US</AvatarFallback>
-            </Avatar>
-            <div>
-              <p className="text-muted-foreground text-sm">Hello</p>
-              <p className="font-semibold">{user?.username}</p>
+    <ProtectedRoute>
+      <section className="container mx-auto px-5 pt-24 pb-28">
+        <div className="grid grid-cols-5 gap-8">
+          <aside className="fixed right-0 bottom-0 left-0 col-span-1 mt-8 flex w-full flex-col justify-between gap-4 self-start rounded-lg bg-white lg:sticky lg:top-24 lg:flex-col lg:justify-start lg:bg-transparent dark:bg-slate-950">
+            <div className="flex items-center gap-4">
+              <Avatar className="h-12 w-12">
+                <AvatarImage src="" alt="profile" />
+                <AvatarFallback>US</AvatarFallback>
+              </Avatar>
+              <div>
+                <p className="text-muted-foreground text-sm">Hello</p>
+                <p className="font-semibold">{user?.username}</p>
+              </div>
             </div>
-          </div>
-
-          <Separator />
-
-          <nav className="flex flex-col gap-3 text-sm">
-            <Link href="/my-events" className="flex items-center gap-2 text-gray-800 transition hover:text-blue-600">
-              <Calendar1 size={16} /> My Events
-            </Link>
-            <Link href="/profile" className="flex items-center gap-2 text-gray-800 transition hover:text-blue-600">
-              <User size={16} /> Profil
-            </Link>
-          </nav>
-        </aside>
-
-        <div className="col-span-4">{children}</div>
-      </div>
-    </section>
+
+            <Separator />
+
+            <nav className="flex flex-col gap-3 text-sm">
+              <Link href="/my-events" className="flex items-center gap-2 text-gray-800 transition hover:text-blue-600">
+                <Calendar1 size={16} /> My Events
+              </Link>
+              <Link href="/profile" className="flex items-center gap-2 text-gray-800 transition hover:text-blue-600">
+                <User size={16} /> Profil
+              </Link>
+            </nav>
+          </aside>
+
+          <div className="col-span-4">{children}</div>
+        </div>
+      </section>
+    </ProtectedRoute>
   );
 }

src/app/[locale]/(public)/(user)/layout.tsx

@@ -1,4 +1,4 @@
-import { MyEventPage } from "@/features/events";
+import MyEventPage from "@/features/user/my-events";
 
 interface MyEventsPageProps {
   searchParams: Promise<{
@@ -10,5 +10,5 @@ interface MyEventsPageProps {
 export default async function MyEventsPage({ searchParams }: MyEventsPageProps) {
   const { page, limit } = await searchParams;
 
-  return <MyEventPage page={Number(page) || 1} perPage={Number(limit) || 10} />;
+  return <MyEventPage page={Number(page)} perPage={Number(limit)} />;
 }

src/app/[locale]/(public)/(user)/my-events/page.tsx

@@ -1,4 +1,4 @@
-import ProfilePage from "@/features/users/profile";
+import ProfilePage from "@/features/user/profile";
 
 export default async function Profile() {
   return <ProfilePage />;

src/app/[locale]/(public)/(user)/profile/page.tsx

@@ -1,13 +1,15 @@
-import { authService } from "@/services/auth";
 import { AuthJwtPayload } from "@/types";
+import axios from "axios";
 import { jwtDecode } from "jwt-decode";
 import { NextResponse } from "next/server";
 
 export async function POST(request: Request) {
   try {
     const body = await request.json();
     const { email, password } = body;
-    const token = await authService.getToken({ email, password });
+    const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
+    const token = await axios.post(`${baseURL}/auth/login`, { email, password }).then((res) => res.data.data);
+
     const decoded = jwtDecode<AuthJwtPayload>(token);
 
     const res = NextResponse.json({
@@ -22,7 +24,7 @@ export async function POST(request: Request) {
     const now = Math.floor(Date.now() / 1000);
     const maxAge = decoded.exp ? decoded.exp - now : undefined;
     res.cookies.set("token", token, {
-      httpOnly: true,
+      // httpOnly: true,
       secure: process.env.NODE_ENV === "production",
       maxAge,
     });

src/app/api/login/route.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useAuthUser } from "@/components/hooks/UseAuthUser";
+import { useRouter } from "@/lib/navigation";
+import { useEffect } from "react";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Protects a route by checking if the user is authenticated
+ */
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated } = useAuthUser();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.replace("/sign-in");
+    }
+  }, [isAuthenticated]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return children;
+}