diff --git a/app/api/auth/[...nextauth]/options.ts b/app/api/auth/[...nextauth]/options.ts
new file mode 100644
index 0000000..beb5c76
--- /dev/null
+++ 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
new file mode 100644
index 0000000..9da800b
--- /dev/null
+++ 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
index fbde2fb..e381c98 100644
--- 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 (
- {children}
+ {children}
diff --git a/components/auth/auth-menu.tsx b/components/auth/auth-menu.tsx
new file mode 100644
index 0000000..81c8ac2
--- /dev/null
+++ 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 ;
+ }
+
+ return (
+
+ {session ? (
+
+
+ {/* TODO: Support no image placeholder */}
+
+
+
+ {
+
+ Signed in as
+ {session.user?.name}
+
+ }
+ signOut()}>
+ Log Out
+
+
+
+ ) : (
+
+ )}
+