Merge pull request #83 from hammercode-dev/auth

Update auth implementation

Author: eezhal92

package.json

@@ -34,6 +34,7 @@
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cookie": "^1.0.2",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
     "jwt-decode": "^4.0.0",

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

@@ -1,28 +1,26 @@
+"use client";
+
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/Avatar";
 
 import { Calendar1, User } from "lucide-react";
 import { Separator } from "@/components/ui/Separator";
 import { Link } from "@/lib/navigation";
+import { useAuthUser } from "@/components/hooks/UseAuthUser";
 
-const user = {
-  name: "Putra Satria",
-  image: "",
-  fallback: "PS",
-};
-
-export default async function UserLayout({ children }: { children: React.ReactNode }) {
+export default function UserLayout({ children }: { children: React.ReactNode }) {
+  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={user.image} />
-              <AvatarFallback>{user.fallback}</AvatarFallback>
+              <AvatarImage src="" />
+              <AvatarFallback>US</AvatarFallback>
             </Avatar>
             <div>
-              <p className="text-muted-foreground text-sm">Hi</p>
-              <p className="font-semibold">{user.name}</p>
+              <p className="text-muted-foreground text-sm">Hello</p>
+              <p className="font-semibold">{user?.username}</p>
             </div>
           </div>
 

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

@@ -0,0 +1,27 @@
+"use client";
+
+import Navbar from "@/components/layout/Navbar";
+import Footer from "@/components/layout/Footer";
+
+import { useParams, usePathname } from "next/navigation";
+const authPaths = ["sign-in", "sign-up", "forgot-password", "reset-password"];
+
+const WrapperLayout = ({ children }: { children: React.ReactNode }) => {
+  const params = useParams();
+  const pathname = usePathname();
+  const isAuthPage = authPaths.some((path) => pathname.includes(path));
+  const isCertificateDetailPage = !!params?.slug && pathname.includes("certificates");
+
+  if (isAuthPage || isCertificateDetailPage) {
+    return children;
+  }
+
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
+export default WrapperLayout;

src/app/[locale]/admin/events/page.tsx

@@ -1,17 +1,20 @@
+"use client";
+
+import { useEvents } from "@/features/events/hooks/useEvent";
 import Link from "next/link";
 
 const EventListPage = () => {
+  const { events, isLoading } = useEvents();
   return (
     <div>
       <h1>Event List</h1>
-
+      {isLoading && <p>Fetching events...</p>}
       <ul>
-        <li>
-          Event 123 <Link href="/admin/events/123/edit">Edit</Link>
-        </li>
-        <li>
-          Event 456 <Link href="/admin/events/456/edit">Edit</Link>
-        </li>
+        {events.map((ev) => (
+          <li key={ev.id}>
+            {ev.title} <Link href={`/admin/events/${ev.id}/edit`}>Edit</Link>
+          </li>
+        ))}
       </ul>
     </div>
   );

src/app/[locale]/admin/layout.tsx

@@ -1,21 +1,21 @@
-"use client";
-
-import { useEffect } from "react";
-import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
 import RouteBreadcrumb from "@/components/common/RouteBreadcrumb";
-import { useAuthUser } from "@/components/hooks/UseAuthUser";
 import AdminSidebar from "@/components/layout/AdminSidebar";
+
+import { jwtDecode } from "jwt-decode";
+import { redirect } from "next/navigation";
+import { AuthJwtPayload } from "@/types";
 import { Separator } from "@/components/ui/Separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/Sidebar";
 
-export default function AdminLayout({ children }: { children: React.ReactNode }) {
-  const { user, isLoading } = useAuthUser();
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies();
+  const token = cookieStore.get("token");
+
+  if (!token) return redirect("/");
 
-  useEffect(() => {
-    if (!isLoading && (!user || user.role !== "admin")) {
-      redirect("/");
-    }
-  }, [isLoading, user]);
+  const payload = jwtDecode<AuthJwtPayload>(token.value);
+  if (payload.role !== "admin") return redirect("/");
 
   return (
     <SidebarProvider>

src/app/[locale]/layout.tsx

@@ -1,10 +1,14 @@
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, getTranslations, setRequestLocale } from "next-intl/server";
 import { Sora } from "next/font/google";
-import WrapperLayout from "@/components/layout/WrapperLayout";
 import { locales } from "@/lib/locales";
 import { notFound } from "next/navigation";
 import { Toaster } from "@/components/ui/Toaster";
+import { AuthProvider } from "@/components/provider/AuthProvider";
+import { cookies } from "next/headers";
+import { AuthJwtPayload } from "@/types";
+import { jwtDecode } from "jwt-decode";
+import { ThemeProvider } from "@/components/provider/ThemeProvider";
 const sora = Sora({ subsets: ["latin"] });
 
 type Props = {
@@ -33,22 +37,31 @@ export async function generateMetadata(props: Props) {
 
 export default async function LocaleRootLayout(props: Readonly<Props>) {
   const params = await props.params;
-
   const { locale } = params;
-
   const { children } = props;
 
   if (!locales.includes(locale)) notFound();
 
   setRequestLocale(locale);
 
+  // Get authenticated user info
+  // This data is retrieved on server context
+  // Then we passed it into auth provider
+  const cookieStore = await cookies();
+  const token = cookieStore.get("token");
+  const payload: AuthJwtPayload | undefined = token?.value ? jwtDecode<AuthJwtPayload>(token.value) : undefined;
+
   const messages = await getMessages();
 
   return (
     <html lang={locale} suppressHydrationWarning>
       <body className={`${sora.className}`}>
         <NextIntlClientProvider messages={messages}>
-          <WrapperLayout>{children}</WrapperLayout>
+          <AuthProvider payload={payload}>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+              {children}
+            </ThemeProvider>
+          </AuthProvider>
           <Toaster />
         </NextIntlClientProvider>
       </body>

src/app/api/login/route.ts

@@ -0,0 +1,38 @@
+import { authService } from "@/services/auth";
+import { AuthJwtPayload } from "@/types";
+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 decoded = jwtDecode<AuthJwtPayload>(token);
+
+    const res = NextResponse.json({
+      token,
+      payload: decoded,
+    });
+    // TODO: fix(security)
+    // set cookie with these attributes: same-site
+
+    // Now server components will have access to token
+    // Question: should we encrypt token?
+    const now = Math.floor(Date.now() / 1000);
+    const maxAge = decoded.exp ? decoded.exp - now : undefined;
+    res.cookies.set("token", token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      maxAge,
+    });
+    return res;
+  } catch (error) {
+    // if (error.type === 'CredentialsSignin') {
+    //   return NextResponse.json({ error: 'Invalid credentials.' }, { status: 401 })
+    // } else {
+    //   NextResponse.json({ error: 'Something went wrong.' }, { status: 500 })
+    // }
+    return NextResponse.json({ error }, { status: 500 });
+  }
+}

src/app/api/logout/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  const res = NextResponse.json({ success: true });
+  res.cookies.set("token", "", {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === "production",
+    maxAge: 0,
+    path: "/",
+  });
+  return res;
+}

src/components/layout/Navbar/UserMenu.tsx

@@ -5,12 +5,12 @@ import { ChevronLeft, LogOut, User } from "lucide-react";
 import { USER_LINKS } from "./constant";
 import { useTranslations } from "next-intl";
 import { useAuthUser } from "@/components/hooks/UseAuthUser";
-import { useAuth } from "@/features/auth/hooks/useAuth";
+import { useAuthService } from "@/features/auth/hooks/useAuth";
 
 const DesktopUserMenu = () => {
   const t = useTranslations("Layout");
   const { user, isAuthenticated } = useAuthUser();
-  const { logout } = useAuth();
+  const { logout } = useAuthService();
 
   return !isAuthenticated ? (
     <Button asChild size="sm" className="w-full">
@@ -41,6 +41,11 @@ const DesktopUserMenu = () => {
             </div>
           </Link>
         </DropdownMenuItem>
+        {user?.role === "admin" && (
+          <DropdownMenuItem asChild>
+            <Link href="/admin/events">Dashboard</Link>
+          </DropdownMenuItem>
+        )}
         {USER_LINKS.map(({ id, href }) => (
           <DropdownMenuItem key={id} asChild>
             <Link href={href}>{t(`navbar.user.${id}`)}</Link>
@@ -60,7 +65,7 @@ const DesktopUserMenu = () => {
 const MobileUserMenu = () => {
   const t = useTranslations("Layout");
   const { user, isAuthenticated } = useAuthUser();
-  const { logout } = useAuth();
+  const { logout } = useAuthService();
 
   return (
     <div className="border-t pt-4">