Add next-auth.js for user management (#232)

* Add next-auth.js for user management

Would be handy to have users in Boardsesh, so this is a first
step to adding it. Only have ran through the google login
setup so far. Have yet to do apple

* Remove .vscode from git tracking and add to .gitignore

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix lint issues and update migration to use conditional statements

- Remove unused imports and variables
- Update migration 0016 to use CREATE TABLE IF NOT EXISTS
- Add conditional foreign key constraints to handle existing tables
- Build and lint now pass successfully

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: marcodejongh

.env.local

@@ -10,4 +10,8 @@ POSTGRES_PORT=5432
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=password
 POSTGRES_DATABASE=main
-IRON_SESSION_PASSWORD={ "1": "68cJgCDE39gaXwi8LTVW4WioyhGxwcAd" }
+IRON_SESSION_PASSWORD={ "1": "68cJgCDE39gaXwi8LTVW4WioyhGxwcAd" }
+
+# NextAuth.js configuration
+NEXTAUTH_SECRET=68cJgCDE39gaXwi8LTVW4WioyhGxwcAd
+NEXTAUTH_URL=http://localhost:3000

.gitignore

@@ -40,5 +40,8 @@ kilter.db
 tension.db
 db/tmp
 
+# editor
+.vscode
+
 # board controller
 board-controller/board_controller.db

.vscode/launch.json

@@ -0,0 +1,65 @@
+import NextAuth from "next-auth";
+import { DrizzleAdapter } from "@auth/drizzle-adapter";
+import GoogleProvider from "next-auth/providers/google";
+import CredentialsProvider from "next-auth/providers/credentials";
+import { getDb } from "@/app/lib/db/db";
+import * as schema from "@/app/lib/db/schema";
+
+const handler = NextAuth({
+  adapter: DrizzleAdapter(getDb(), {
+    usersTable: schema.users,
+    accountsTable: schema.accounts,
+    sessionsTable: schema.sessions,
+    verificationTokensTable: schema.verificationTokens,
+  }),
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+    }),
+    CredentialsProvider({
+      name: "Email",
+      credentials: {
+        email: { label: "Email", type: "email", placeholder: "your@email.com" },
+        password: { label: "Password", type: "password" }
+      },
+      async authorize(credentials) {
+        // TODO: Add proper password hashing and database lookup
+        // For now, this is a simple demo implementation
+        if (credentials?.email && credentials?.password) {
+          // In production, you'd:
+          // 1. Look up user in database by email
+          // 2. Verify password hash
+          // 3. Return user object or null
+          return {
+            id: crypto.randomUUID(),
+            email: credentials.email,
+            name: credentials.email.split('@')[0],
+          };
+        }
+        return null;
+      }
+    }),
+  ],
+  session: {
+    strategy: "jwt", // Required for credentials provider
+  },
+  callbacks: {
+    async session({ session, token }) {
+      // Include user ID in session from JWT
+      if (session?.user && token?.sub) {
+        session.user.id = token.sub;
+      }
+      return session;
+    },
+    async jwt({ token, user }) {
+      // Persist the OAuth access_token and user id to the token right after signin
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+  },
+});
+
+export { handler as GET, handler as POST };

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

@@ -0,0 +1,55 @@
+import { getServerSession } from "next-auth/next";
+import { NextRequest, NextResponse } from "next/server";
+import { createUserBoardMapping, getUserBoardMappings } from "@/app/lib/auth/user-board-mappings";
+import { BoardName } from "@/app/lib/types";
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await getServerSession();
+    
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { boardType, boardUserId, boardUsername } = body;
+
+    if (!boardType || !boardUserId) {
+      return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
+    }
+
+    await createUserBoardMapping(
+      session.user.id,
+      boardType as BoardName,
+      parseInt(boardUserId),
+      boardUsername
+    );
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Failed to create board mapping:", error);
+    return NextResponse.json(
+      { error: "Failed to create board mapping" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  try {
+    const session = await getServerSession();
+    
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const mappings = await getUserBoardMappings(session.user.id);
+    return NextResponse.json({ mappings });
+  } catch (error) {
+    console.error("Failed to get board mappings:", error);
+    return NextResponse.json(
+      { error: "Failed to get board mappings" },
+      { status: 500 }
+    );
+  }
+}

app/api/internal/user-board-mapping/route.ts

@@ -1,15 +1,18 @@
 'use client';
 import React from 'react';
-import { Flex } from 'antd';
+import { Flex, Button, Dropdown, MenuProps, Grid } from 'antd';
 import { Header } from 'antd/es/layout/layout';
 import Title from 'antd/es/typography/Title';
 import Link from 'next/link';
+import { useSession, signIn, signOut } from 'next-auth/react';
 import SearchButton from '../search-drawer/search-button';
 import SearchClimbNameInput from '../search-drawer/search-climb-name-input';
 import { UISearchParamsProvider } from '../queue-control/ui-searchparams-provider';
 import SendClimbToBoardButton from '../board-bluetooth-control/send-climb-to-board-button';
 import { BoardDetails } from '@/app/lib/types';
 import { ShareBoardButton } from './share-button';
+import { useBoardProvider } from '../board-provider/board-provider-context';
+import { UserOutlined, LogoutOutlined, LoginOutlined } from '@ant-design/icons';
 import AngleSelector from './angle-selector';
 import styles from './header.module.css';
 
@@ -18,6 +21,24 @@ type BoardSeshHeaderProps = {
   angle?: number;
 };
 export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeaderProps) {
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
+  const { data: session } = useSession();
+  const { logout } = useBoardProvider();
+
+  const handleSignOut = () => {
+    signOut();
+    logout(); // Also logout from board provider
+  };
+
+  const userMenuItems: MenuProps['items'] = [
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: 'Logout',
+      onClick: handleSignOut,
+    },
+  ];
   return (
     <Header
       style={{
@@ -53,6 +74,22 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
             {angle !== undefined && <AngleSelector boardName={boardDetails.board_name} currentAngle={angle} />}
             <ShareBoardButton />
             <SendClimbToBoardButton boardDetails={boardDetails} />
+            {session?.user ? (
+              <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
+                <Button icon={<UserOutlined />} type="text">
+                  {session.user.name || session.user.email}
+                </Button>
+              </Dropdown>
+            ) : (
+              <Button 
+                icon={<LoginOutlined />} 
+                type="text" 
+                onClick={() => signIn()}
+                size={screens.xs ? 'small' : 'middle'}
+              >
+                {screens.xs ? '' : 'Login'}
+              </Button>
+            )}
           </Flex>
         </Flex>
       </UISearchParamsProvider>

app/components/board-page/header.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+import { SessionProvider } from 'next-auth/react';
+import { ReactNode } from 'react';
+
+interface SessionProviderWrapperProps {
+  children: ReactNode;
+}
+
+export default function SessionProviderWrapper({ children }: SessionProviderWrapperProps) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

app/components/providers/session-provider.tsx

@@ -4,6 +4,7 @@ import { AntdRegistry } from '@ant-design/nextjs-registry';
 import { App } from 'antd';
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import SessionProviderWrapper from './components/providers/session-provider';
 import WebBluetoothWarning from './components/board-bluetooth-control/web-bluetooth-warning';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -14,12 +15,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body style={{ margin: 0 }}>
         <Analytics />
-        <AntdRegistry>
-          <App>
-            <WebBluetoothWarning />
-            {children}
-          </App>
-        </AntdRegistry>
+        <SessionProviderWrapper>
+          <AntdRegistry>
+            <App>
+              <WebBluetoothWarning />
+              {children}
+            </App>
+          </AntdRegistry>
+        </SessionProviderWrapper>
         <SpeedInsights />
       </body>
     </html>

app/layout.tsx

@@ -0,0 +1,9 @@
+import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id: string;
+    } & DefaultSession["user"];
+  }
+}