feat: Add next-auth middleware and configure profile route

- Add next-auth middleware to handle authentication
- Configure profile route to require authentication
- Update package.json to include next-auth dependency
- Delete unused client environment file
- Update server environment file with required variables
- Create auth configuration file with Google provider
- Add ExampleThing component and update settings
- Update layout component to use Suspense for better loading experience
- Create loading component with circular progress indicator
- Create profile page component to display user information
- Create theme switcher component for toggling between light and dark themes
- Update providers component to include session provider
- Delete old theme switcher component
- Delete old app-navbar component
- Create new app-navbar component with authentication button
- Create auth-button component for handling authentication actions

package.json

@@ -16,6 +16,7 @@
     "framer-motion": "^11.5.4",
     "jiti": "^1.21.6",
     "next": "14.2.12",
+    "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,7 @@
+import NextAuth from "next-auth";
+
+import options from "@/config/auth";
+
+const handler = NextAuth(options);
+
+export { handler as GET, handler as POST };

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 
 import AppNavBar from "@/components/app-navbar";
 import Providers from "@/components/providers";
@@ -27,7 +28,7 @@ export default function RootLayout({
         <Providers>
           <AppNavBar />
           <main className="flex-grow overflow-auto bg-[url(/light-bg.svg)] bg-cover bg-repeat dark:bg-[url(/dark-bg.svg)]">
-            {children}
+            <Suspense>{children}</Suspense>
           </main>
         </Providers>
       </body>

src/app/loading.tsx

@@ -0,0 +1,13 @@
+import { CircularProgress } from "@nextui-org/react";
+
+export default function Loading() {
+  return (
+    <CircularProgress
+      className="mx-auto mt-4"
+      classNames={{
+        svg: "w-36 h-36",
+      }}
+      aria-label="Loading page"
+    />
+  );
+}

src/app/profile/page.tsx

@@ -0,0 +1,23 @@
+import { Card, CardBody, User } from "@nextui-org/react";
+import { getServerSession } from "next-auth";
+
+import options from "@/config/auth";
+
+export default async function Profile() {
+  const session = await getServerSession(options);
+
+  return (
+    <Card className="mx-auto mt-4 max-w-md">
+      <CardBody>
+        <User
+          name={session?.user?.name}
+          description={session?.user?.email}
+          avatarProps={{
+            showFallback: !session?.user?.image,
+            src: session?.user?.image || "",
+          }}
+        />
+      </CardBody>
+    </Card>
+  );
+}

src/components/app-navbar/auth-button.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  Avatar,
+  Button,
+  CircularProgress,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import { IconBrandGoogle } from "@tabler/icons-react";
+import { signIn, signOut, useSession } from "next-auth/react";
+
+export default function AuthButton({ minimal = true }: { minimal?: boolean }) {
+  const { data, status } = useSession();
+  if (status === "loading") {
+    return <CircularProgress />;
+  }
+  if (status === "authenticated") {
+    const signOutClick = () => signOut({ callbackUrl: "/" });
+    if (minimal) {
+      return (
+        <Button onClick={signOutClick} color="success" variant="ghost">
+          <IconBrandGoogle />
+          Sign Out
+        </Button>
+      );
+    }
+    return (
+      <Dropdown placement="bottom-end">
+        <DropdownTrigger>
+          <Avatar
+            isBordered
+            as="button"
+            className="transition-transform"
+            showFallback={!data.user?.image}
+            src={data.user?.image || ""}
+          />
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Profile Actions" variant="flat">
+          <DropdownItem key="profile" className="h-14 gap-2">
+            <p className="font-semibold">Signed in as</p>
+            <p className="font-semibold">{data.user?.email}</p>
+          </DropdownItem>
+          <DropdownItem key="logout" color="danger" onClick={signOutClick}>
+            Sign Out
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+  return (
+    <Button
+      onClick={() => signIn("google", { callbackUrl: "/profile" })}
+      color="danger"
+      variant="ghost"
+    >
+      <IconBrandGoogle />
+      Sign In
+    </Button>
+  );
+}