kudos-ink · leapalazzolo · Nov 28, 2024 · Dec 29, 2024
diff --git a/app/api/auth/[...nextauth]/options.ts b/app/api/auth/[...nextauth]/options.ts
@@ -0,0 +1,24 @@
+import GitHubProvider from "next-auth/providers/github";
+import { NextAuthOptions } from "next-auth";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    GitHubProvider({
+      clientId: process.env.GITHUB_CLIENT_ID as string,
+      clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, account }) {
+      if (account) {
+        token.accessToken = account.access_token;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      // Type assertion to let TypeScript know token will have accessToken
+      session.accessToken = (token as { accessToken?: string }).accessToken;
+      return session;
+    },
+  },
+};
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "./options";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -80,7 +80,6 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   const isProduction = process.env.VERCEL_ENV === "production";
-
   return (
     <html
       lang="en"

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { NextUIProvider } from "@nextui-org/system";
+import { SessionProvider as AuthProvider } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { NextUIProvider } from "@nextui-org/system";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { queryClient } from "@/lib/react-query-client";
@@ -19,7 +20,7 @@ export function Providers({ children }: ProvidersProps) {
     <QueryClientProvider client={queryClient}>
       <NextUIProvider navigate={router.push}>
         <NextThemesProvider attribute="class" defaultTheme="kudos">
-          {children}
+          <AuthProvider>{children}</AuthProvider>
         </NextThemesProvider>
       </NextUIProvider>
       <ReactQueryDevtools initialIsOpen={false} />

diff --git a/components/auth/auth-menu.tsx b/components/auth/auth-menu.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { signIn, signOut, useSession } from "next-auth/react";
+import { Avatar } from "@nextui-org/avatar";
+import { Button } from "@nextui-org/button";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/dropdown";
+import { Skeleton } from "@nextui-org/skeleton";
+
+import { GithubIcon } from "@/assets/icons";
+
+const AuthMenu: React.FC = () => {
+  const { data: session, status } = useSession();
+
+  if (status === "loading") {
+    return <Skeleton className="h-10 w-10 rounded-full" />;
+  }
+
+  return (
+    <div>
+      {session ? (
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            {/* TODO: Support no image placeholder */}
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              src={session.user?.image}
+            />
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Profile Actions" variant="flat">
+            {
+              <DropdownItem key="profile" className="h-14 gap-2" showDivider>
+                <p className="font-semibold">Signed in as</p>
+                <p className="font-semibold">{session.user?.name}</p>
+              </DropdownItem>
+            }
+            <DropdownItem key="logout" color="danger" onPress={() => signOut()}>
+              Log Out
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      ) : (
+        <Button
+          size="sm"
+          aria-label="Login"
+          color="default"
+          variant="faded"
+          className="capitalize font-semibold"
+          onPress={() => signIn("github")}
+          startContent={<GithubIcon size={20} />}
+        >
+          <p>Login</p>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default AuthMenu;
diff --git a/components/cta-banner.tsx b/components/cta-banner.tsx
@@ -66,7 +66,7 @@ const CtaBanner = ({}: ICtaBannerProps) => {
             className="font-semibold border-large hover:underline"
             color="danger"
             variant="bordered"
-            onClick={handleClose}
+            onPress={handleClose}
           >
             Hide this
           </Button>

diff --git a/components/nav/navbar.tsx b/components/nav/navbar.tsx
@@ -5,12 +5,13 @@ import {
   NavbarBrand,
 } from "@nextui-org/navbar";
 import { Chip } from "@nextui-org/chip";
+import AuthMenu from "@/components/auth/auth-menu";
 import { MyImage } from "@/components/ui/image";
+import { getAllProjects } from "@/lib/api/projects";
 
 import { BugReport, CtaButton, FeedbackForms, ProjectDropDown } from "./items";
 import Separator from "./separator";
 import SocialLinks from "./social-links";
-import { getAllProjects } from "@/lib/api/projects";
 
 export default async function Navbar() {
   const projects = await getAllProjects().catch((error) => {
@@ -51,6 +52,9 @@ export default async function Navbar() {
           {projects && <ProjectDropDown projects={projects} />}
           <CtaButton />
         </div>
+        <div>
+          <AuthMenu />
+        </div>
       </NavbarContent>
     </NextUINavbar>
   );

diff --git a/components/table/row.tsx b/components/table/row.tsx
@@ -347,16 +347,15 @@ interface IApplyButtonProps {
   onOpen: () => void;
 }
 export const ApplyButton = ({ onOpen }: IApplyButtonProps) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
+  const handleClick = () => {
     onOpen();
   };
 
   return (
     <Button
       className="invisible group-hover:visible"
       color="primary"
-      onClick={handleClick}
+      onPress={handleClick}
     >
       Apply
     </Button>

diff --git a/middlewares/github.ts b/middlewares/github.ts
@@ -0,0 +1,4 @@
+export { default } from "next-auth/middleware";
+
+// applies next-auth only to matching routes
+export const config = { matcher: ["/profiles"] };
diff --git a/next.config.js b/next.config.js
@@ -16,6 +16,7 @@ const cspHeader = `
 
 const nextConfig = {
   images: {
+    remotePatterns: ["avatars.githubusercontent.com"],
     formats: ["image/avif", "image/webp"],
     remotePatterns: [
       {

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@next/third-parties": "15.1.3",
+    "@nextui-org/avatar": "^2.2.5",
     "@nextui-org/button": "2.2.8",
     "@nextui-org/card": "^2.2.8",
     "@nextui-org/checkbox": "^2.3.7",
@@ -47,6 +48,7 @@
     "isomorphic-dompurify": "^2.19.0",
     "marked": "^15.0.4",
     "next": "15.1.3",
+    "next-auth": "^4.24.10",
     "next-themes": "^0.4.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",