AmrMustafa282 · ahmad-kashkoush · Feb 8, 2025 · Feb 8, 2025
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,8 @@
 /.next/
 /out/
 
+.env
+
 # production
 /build
 

diff --git a/.temp.env b/.temp.env
diff --git a/app/(protected)/dashboard/me/page.tsx b/app/(protected)/dashboard/me/page.tsx
@@ -0,0 +1,6 @@
+const Me = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 10000));
+ return <div>Me</div>;
+};
+
+export default Me;
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
@@ -2,8 +2,10 @@
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import Loader from "@/components/ui/Loader";
+import Header from "@/components/Header";
 
-export default function MePage() {
+export default function MePage({ children }: { children: React.ReactNode }) {
   const { data: session, status } = useSession();
   const router = useRouter();
 
@@ -13,8 +15,14 @@ export default function MePage() {
     }
   }, [status, router]);
 
-  if (status === "loading") return <p>Loading...</p>;
+  if (status === "loading") return <Loader />;
   if (!session) return null;
 
-  return <h1>Welcome, {session.user?.name}!</h1>;
+
+  return (
+   <main className="flex flex-col  h-screen">
+     <Header />
+     <div className="flex-grow container mx-auto">{children}</div>
+   </main>
+  );
 }
diff --git a/app/(protected)/me/page.tsx b/app/(protected)/me/page.tsx
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -14,11 +14,13 @@ export const authConfig = {
     password: { label: "Password", type: "password" },
    },
    async authorize(credentials) {
-    const res = await axios.post(`${process.env.BACKEND_URL}/login`, {
+    const res = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/login`, {
+    // const res = await axios.post(`http://localhost8080/login`, {
      username: credentials?.username,
      password: credentials?.password,
     });
 
+     console.log("res", res.data);
     const user = res.data.data;
 
     if (res.status && user) {
@@ -69,7 +71,7 @@ export const authConfig = {
    if (account?.provider === "google") {
     // Call your backend API to find or register the user
     try {
-     const res = await axios.post(`${process.env.BACKEND_URL}/api/v1/oauth`, {
+     const res = await axios.post(`${process.env.API_URL}/api/v1/oauth`, {
       email: profile?.email,
       name: profile?.name,
       googleId: profile?.sub,
@@ -91,7 +93,7 @@ export const authConfig = {
    if (account?.provider === "github") {
     // Call your backend API to find or register the user
     try {
-     const res = await axios.post(`${process.env.BACKEND_URL}/api/v1/oauth`, {
+     const res = await axios.post(`${process.env.API_URL}/api/v1/oauth`, {
       email: profile?.email,
       name: profile?.name,
       githubId: profile?.sub,
@@ -117,7 +119,7 @@ export const authConfig = {
 
  // Custom pages (optional)
  pages: {
-  signIn: "/auth/signin", // Custom sign-in page
+  signIn: "/signin", // Custom sign-in page
  },
 } satisfies NextAuthOptions;
 

diff --git a/app/api/auth/googleAuth.ts b/app/api/auth/googleAuth.ts
diff --git a/app/api/auth/login/route.ts b/app/api/auth/login/route.ts
diff --git a/app/api/auth/signup/route.ts b/app/api/auth/signup/route.ts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Header from "@/components/Header";
 import AuthProvider from "@/components/auth/AuthProvider";
+import { Toaster } from "react-hot-toast";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -25,17 +25,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <main className="flex flex-col  h-screen">
-          <AuthProvider>
-            <Header />
-            <div className="flex-grow container mx-auto">{children}</div>
-          </AuthProvider>
-        </main>
-      </body>
-    </html>
+   <html lang="en">
+    <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+     <main className="flex flex-col  h-screen">
+      <AuthProvider>
+       <div className="flex-grow container mx-auto">{children}</div>
+      </AuthProvider>
+      <Toaster position="top-center" reverseOrder={false} />
+     </main>
+    </body>
+   </html>
   );
 }
diff --git a/app/loading.tsx b/app/loading.tsx
@@ -0,0 +1,9 @@
+import Loader from "@/components/ui/Loader";
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+     <Loader />
+    </div>
+  );
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,21 +1,11 @@
-import { GalleryVerticalEnd } from "lucide-react";
-
 import { LoginForm } from "@/components/auth/login-form";
 
 export default function LoginPage() {
  return (
   <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
    <div className="flex w-full max-w-sm flex-col gap-6">
-    <a href="#" className="flex items-center gap-2 self-center font-medium">
-     <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-      <GalleryVerticalEnd className="size-4" />
-     </div>
-     Acme Inc.
-    </a>
     <LoginForm />
    </div>
   </div>
  );
 }
-
-
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,10 @@
+import Header from "@/components/Header";
 
 export default function Home() {
  return (
-
-   <h1 className="text-4xl">Welcome to your Next.js app!</h1>
+   <main className="flex flex-col  h-screen">
+     <Header />
+     <h1 className="text-4xl">Welcome to your Next.js app!</h1>
+   </main>
  );
 }
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
@@ -2,16 +2,11 @@ import { GalleryVerticalEnd } from "lucide-react";
 
 import { SignupForm } from "@/components/auth/signup-form";
 
+
 export default function SignPage() {
  return (
   <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-   <div className="flex w-full max-w-sm flex-col gap-6">
-    <a href="#" className="flex items-center gap-2 self-center font-medium">
-     <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-      <GalleryVerticalEnd className="size-4" />
-     </div>
-     Acme Inc.
-    </a>
+     <div className="flex w-full max-w-sm flex-col gap-6">
     <SignupForm />
    </div>
   </div>

diff --git a/auth.config.ts b/auth.config.ts
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,47 +1,40 @@
 "use client";
-import { useEffect } from "react";
-import useUserStore from "../zustand/userStore";
+
 import { Button } from "./ui/button";
 import { useRouter } from "next/navigation";
 import useAuthenticate from "../hooks/useAuthenticate";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Header() {
-  const { session, status, isSessionExpired, signOut } = useAuthenticate();
-  const { user, clearUser } = useUserStore();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (isSessionExpired) {
-      clearUser();
-    }
-  }, [isSessionExpired, clearUser]);
-
-  if (status === "loading") {
-    return null;
-  }
-
-  return (
-    <header className="bg-white py-4">
-      <nav className="flex justify-between items-center container mx-auto">
-        <div>Welcome, {session?.user?.name || "Guest"}</div>
+ const { session, status, signOut } = useAuthenticate();
+ const router = useRouter();
 
-        {session?.user ? (
-          <Button onClick={() => signOut()}>Logout</Button>
-        ) : (
-          <div className="flex gap-1">
-            <Button
-              variant="ghost"
-              size="lg"
-              onClick={() => router.push("/signup")}
-            >
-              SignUp
-            </Button>
-            <Button size="lg" onClick={() => router.push("/login")}>
-              Login
-            </Button>
-          </div>
-        )}
-      </nav>
-    </header>
-  );
+ return (
+  <header className="bg-white py-4">
+   <nav className="flex justify-between items-center container mx-auto">
+    {status === "loading" ? (
+     <Skeleton className="w-32 h-6 rounded-md" />
+    ) : (
+     <div>Welcome, {session?.user?.name || "Guest"}</div>
+    )}
+    {status === "loading" ? (
+     <div className="flex gap-1">
+      <Skeleton className="w-20 h-10 rounded-md" />
+      <Skeleton className="w-20 h-10 rounded-md" />
+     </div>
+    ) : session?.user ? (
+     <Button onClick={() => signOut()}>Logout</Button>
+    ) : (
+     <div className="flex gap-1">
+      <Button variant="ghost" size="lg" onClick={() => router.push("/signup")}>
+       SignUp
+      </Button>
+      <Button size="lg" onClick={() => router.push("/login")}>
+       Login
+      </Button>
+     </div>
+    )}
+   </nav>
+  </header>
+ );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,8 @@ @@
     /.next/
     /out/
+    .env
     # production
     /build
@@ Expand Down @@