Next.js Discord

Discord Forum

Problem NextAuth session

Unanswered
Britannia Petite posted this in #help-forum
Open in Discord
Britannia PetiteOP
Hey, I have a problem with NextAuth in this code : 
import { Avatar, AvatarFallback, AvatarImage } from '@/app/ui/shadcn/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/app/ui/shadcn/ui/dropdown-menu';
import { LogOut, LogIn } from 'lucide-react';
import Link from 'next/link'
import { useSession, signIn, signOut } from "next-auth/react"

export function AvatarRender() {
  const { data: session } = useSession()
  return (
    <div className="">
      <DropdownMenu>
        <DropdownMenuTrigger>
          <Avatar>
            <AvatarImage src="https://i.imgur.com/HL1WAP8.gif" alt="@shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem className='cursor-pointer'>Profile</DropdownMenuItem>
          <DropdownMenuItem className='cursor-pointer'>
            (session && (
              <Link href="/" onClick={() => signOut()}>
              <div className="flex items-center space-x-2">
                <LogOut className='text-red-800 h-4 w-4'/> 
                <span>Log Out</span>
            </div>
            </Link>
            ))
            (!session && (
              <Link href="/" onClick={() => signIn()}>
              <div className="flex items-center space-x-2">
                <LogIn className='text-green-800 h-4 w-4'/> 
                <span>Log In</span>
            </div>
            </Link>
            ))
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}


and I have this error :
⨯ node_modules\next-auth\react\index.js (119:10) @ useSession
 ⨯ Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
    at AvatarRender (./app/ui/dashboard/avatar.tsx:22:90)

12 Replies

Britannia PetiteOP
Do you know why ?
Britannia PetiteOP
i need to use this
but i don't know where i need to use it because i have an app router
and i have page and layout files
and i have this in the layout.tsx :
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
import { ThemeProvider } from '@/app/ui/shadcn/ui/theme-provider';
import Script from 'next/script';
import { SessionProvider } from 'next-auth/react';
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/saliumppstatic.png" sizes="any" />
      </head>
      <body className={`${inter.className} antialiased`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
Britannia PetiteOP
I think i found
redbabinks
Place it in the layout
Create a client component returning the SessionProvider and make it wrap the children object, then in wrap it around your base layout (/app/layout.tsx)
@Britannia Petite yes i founded it thanks
redbabinks
You’re welcome ^^