Next.js Discord

Discord Forum

Problem can't signin with nextauth ( app router)

Unanswered
Britannia Petite posted this in #help-forum
Open in Discord
Britannia PetiteOP
here is my /api/auth/[...nextauth].js
import NextAuth from "next-auth"
import DiscordProvider from "next-auth/providers/discord";

export const authOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID,
      clientSecret: process.env.DISCORD_CLIENT_SECRET,
    })
  ],
}

export default NextAuth(authOptions)


and in my avatar.tsx :
i have this 
      <div className="">
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Avatar>
              <AvatarImage
                src="https://i.imgur.com/HL1WAP8.gif"
                alt="@shadcn"
              />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>{name}</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="cursor-pointer">
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer">
              <button onClick={() => signIn()}>
                <div className="flex items-center space-x-2">
                  <LogIn className="h-4 w-4 text-green-800" />
                  <span>Log In</span>
                </div>
              </button>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

But when i click on the LogIn i'm redirected to the error page.

3 Replies

Britannia PetiteOP
here is the top of avatar.ts:
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';
import { useState, useEffect } from 'react';
export function AvatarRender() {
  const session = useSession();
  console.log(session);

  const [name, setName] = useState<string>()

  useEffect(() => {
    fetch("/api/whoAmI")
    .then((res) => res.json())
    .then((data) => setName(data.name))
  })

  console.log(name)
  if (session && session.data !== null) {
full code :