Merge pull request #85 from hammercode-dev/feat/setup-new-authentication

[FEAT] - improve authentication, with protected route, refactor code, etc

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

@@ -16,7 +16,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn format && git add -A . --allow-empty"
+      "pre-commit": "pnpm format && git add -A . --allow-empty"
     }
   },
   "dependencies": {
@@ -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>
   );
 }

public/assets/images/illustrations/404.gif

@@ -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)/layout.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)/my-events/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function CatchAllPage() {
+  notFound();
+}