next.js - TypeError: (0 , {imported module [project]auth.ts [app-rsc] (ecmascript)}.auth) is not a function - Stack Overflow

admin管理员组

文章数量:1356536

Now i understand that this error is on server side but i just don't know how to fix this I m using Auth JS and GitHub as a provider

here is the code for Navbar.tsx

```import Link from 'next/link'
// import React from 'react'
import Image from 'next/image'
import { auth, signIn, signOut } from '@/auth'


const Navbar = async() => {
    const session = await auth();
    
    return (
        <header className='px-5 py-3 bg-white shadown-sm font-work-sans'>
            <nav className='flex justify-between items-center'>
                <Link href="/">
                    <Image src="/logo1.png" alt='logo' width={144} height={30}></Image>
                </Link>
                <div className='flex items-center gap-5'>
                    {session && session?.user ? (
                        <>
                            <Link href="/startup/create">
                                <span>Create</span>
                            </Link>

                            <button onClick={signOut}>
                                <span>SignOut</span>
                            </button>

                            <Link href={`/user/${session?.id}`}>
                                <span>{session?.user?.name}</span>
                            </Link>
                        </>
                    ) : (
                    
                            <button onClick={signIn('github')}>
                                <span>Login</span>
                            </button>
                    
                    ) }
                </div>
            </nav>

            
        </header>
        
    )
}

export default Navbar

Here is the code from auth.ts

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
})

Any assistance on how to resolve this error

Now i understand that this error is on server side but i just don't know how to fix this I m using Auth JS and GitHub as a provider

here is the code for Navbar.tsx

```import Link from 'next/link'
// import React from 'react'
import Image from 'next/image'
import { auth, signIn, signOut } from '@/auth'


const Navbar = async() => {
    const session = await auth();
    
    return (
        <header className='px-5 py-3 bg-white shadown-sm font-work-sans'>
            <nav className='flex justify-between items-center'>
                <Link href="/">
                    <Image src="/logo1.png" alt='logo' width={144} height={30}></Image>
                </Link>
                <div className='flex items-center gap-5'>
                    {session && session?.user ? (
                        <>
                            <Link href="/startup/create">
                                <span>Create</span>
                            </Link>

                            <button onClick={signOut}>
                                <span>SignOut</span>
                            </button>

                            <Link href={`/user/${session?.id}`}>
                                <span>{session?.user?.name}</span>
                            </Link>
                        </>
                    ) : (
                    
                            <button onClick={signIn('github')}>
                                <span>Login</span>
                            </button>
                    
                    ) }
                </div>
            </nav>

            
        </header>
        
    )
}

export default Navbar

Here is the code from auth.ts

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
})

Any assistance on how to resolve this error

• next.js
• next.js15

Share Improve this question Follow asked Mar 30 at 17:12 Mrinal AgrawalMrinal Agrawal 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

import Link from 'next/link' import Image from 'next/image' import { auth } from '@/auth' import { signIn, signOut } from 'next-auth/react'

const Navbar = async() => { const session = await auth();

return (
    <header className='px-5 py-3 bg-white shadown-sm font-work-sans'>
        <nav className='flex justify-between items-center'>
            <Link href="/">
                <Image src="/logo1.png" alt='logo' width={144} height={30}></Image>
            </Link>
            <div className='flex items-center gap-5'>
                {session && session?.user ? (
                    <>
                        <Link href="/startup/create">
                            <span>Create</span>
                        </Link>

                        <form action={async () => {
                            'use server';
                            await signOut();
                        }}>
                            <button type="submit">
                                <span>SignOut</span>
                            </button>
                        </form>

                        <Link href={`/user/${session?.id}`}>
                            <span>{session?.user?.name}</span>
                        </Link>
                    </>
                ) : (
                    <form action={async () => {
                        'use server';
                        await signIn('github');
                    }}>
                        <button type="submit">
                            <span>Login</span>
                        </button>
                    </form>
                )}
            </div>
        </nav>
    </header>
)

}

export default Navbar

本文标签：