diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0070c66..50f129a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,6 +6,7 @@ import { Geist } from 'next/font/google' import { MainHeader } from '@/components/header' import { ThemeProvider } from '@/components/theme-provider' import { TRPCReactProvider } from '@/trpc/react' +import { SessionProvider } from 'next-auth/react' import { NextIntlClientProvider } from 'next-intl' import { getLocale } from 'next-intl/server' @@ -33,15 +34,17 @@ export default async function RootLayout({ - - - {children} - + + + + {children} + + diff --git a/src/components/header.tsx b/src/components/header.tsx index 4cb1dc0..97f06b3 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -9,6 +9,7 @@ import { DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { LogIn, LogOut, Menu, Moon, Settings, Sun, User, X } from 'lucide-react' +import { signIn, signOut, useSession } from 'next-auth/react' import { useTheme } from 'next-themes' import Link from 'next/link' import { useState } from 'react' @@ -16,21 +17,8 @@ import { useState } from 'react' export function MainHeader() { const { setTheme, theme } = useTheme() const [mobileMenuOpen, setMobileMenuOpen] = useState(false) - - // Mock authentication state - replace with your actual auth logic - const [isAuthenticated, setIsAuthenticated] = useState(false) - - // Mock user data - replace with your actual user data - const userData = { - name: 'Player123', - avatar: '/placeholder.svg?height=40&width=40', - } - - // Toggle authentication for demo purposes - const toggleAuth = () => { - setIsAuthenticated(!isAuthenticated) - } - + const { data: session, status } = useSession() + const isAuthenticated = status === 'authenticated' return (
@@ -97,7 +85,7 @@ export function MainHeader() { {/* Sign In Button or User Menu */} - {isAuthenticated ? ( + {isAuthenticated && session?.user && session.user.name ? ( @@ -115,11 +106,14 @@ export function MainHeader() {
-

{userData.name}

+

{session.user.name}

- + Profile @@ -130,7 +124,7 @@ export function MainHeader() { Settings - + signOut()}> Log out @@ -141,7 +135,7 @@ export function MainHeader() { variant='default' size='sm' className='bg-violet-600 hover:bg-violet-700 dark:text-zinc-100' - onClick={toggleAuth} + onClick={() => signIn('discord')} > Sign In diff --git a/src/server/auth/config.ts b/src/server/auth/config.ts index 3f6bad7..06100f7 100644 --- a/src/server/auth/config.ts +++ b/src/server/auth/config.ts @@ -20,15 +20,11 @@ declare module 'next-auth' { interface Session extends DefaultSession { user: { id: string + discord_id: string // ...other properties // role: UserRole; } & DefaultSession['user'] } - - // interface User { - // // ...other properties - // // role: UserRole; - // } } /** @@ -38,7 +34,27 @@ declare module 'next-auth' { */ export const authConfig = { providers: [ - DiscordProvider, + DiscordProvider({ + profile(profile) { + if (profile.avatar === null) { + const defaultAvatarNumber = + profile.discriminator === '0' + ? Number(BigInt(profile.id) >> BigInt(22)) % 6 + : Number.parseInt(profile.discriminator) % 5 + profile.image_url = `https://cdn.discordapp.com/embed/avatars/${defaultAvatarNumber}.png` + } else { + const format = profile.avatar.startsWith('a_') ? 'gif' : 'png' + profile.image_url = `https://cdn.discordapp.com/avatars/${profile.id}/${profile.avatar}.${format}` + } + return { + id: profile.id, + name: profile.global_name ?? profile.username, + email: profile.email, + image: profile.image_url, + discord_id: profile.id.toString(), + } + }, + }), /** * ...add more providers here. * @@ -61,6 +77,7 @@ export const authConfig = { user: { ...session.user, id: user.id, + discord_id: session.user.discord_id, }, }), }, diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts index e7e55db..cc047bb 100644 --- a/src/server/db/schema.ts +++ b/src/server/db/schema.ts @@ -62,6 +62,8 @@ export const users = pgTable('user', (d) => ({ }) .default(sql`CURRENT_TIMESTAMP`), image: d.varchar({ length: 255 }), + discord_id: d.varchar({ length: 255 }), + role: d.varchar({ length: 255 }).notNull().default('user'), })) export const usersRelations = relations(users, ({ many }) => ({