This Next JS authentication expression is not callable in a Typescript file?

Question

I am making a sign in method for my Next js application and am using the recommended documentation provided by the GitHub repo.

However when i reach the auth folder step i get this error. For the sign in providers.

in [...nextauth].ts

This expression is not callable.
  Type 'typeof import("/Users/farishtawazir/Desktop/template/next-auth")' has no call signatures.ts(2349)

I don't understand why as i have followed the documentation and still get this error

Here is the files code

import NextAuth from 'next-auth'
import Auth0Provider from 'next-auth/providers/auth0'
import FacebookProvider from 'next-auth/providers/facebook'
import GithubProvider from 'next-auth/providers/github'
import GoogleProvider from 'next-auth/providers/google'
import TwitterProvider from 'next-auth/providers/twitter'
// import AppleProvider from "next-auth/providers/apple"
// import EmailProvider from "next-auth/providers/email"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    /* EmailProvider({
         server: process.env.EMAIL_SERVER,
         from: process.env.EMAIL_FROM,
       }),
    // Temporarily removing the Apple provider from the demo site as the
    // callback URL for it needs updating due to  changing domains
      
    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: {
        appleId: process.env.APPLE_ID,
        teamId: process.env.APPLE_TEAM_ID,
        privateKey: process.env.APPLE_PRIVATE_KEY,
        keyId: process.env.APPLE_KEY_ID,
      },
    }),
    */
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
    }),
    Auth0Provider({
      clientId: process.env.AUTH0_ID,
      clientSecret: process.env.AUTH0_SECRET,
      issuer: process.env.AUTH0_ISSUER,
    }),
  ],
  theme: {
    colorScheme: 'light',
  },
  callbacks: {
    async jwt({ token }: unknown) {
      token.userRole = 'admin'
      return token
    },
  },
})

I stopped trying to solve type checking problems for next-auth, so I just added // @ts-nocheck this stops type checking non-sense for now — guest
– guest, Commented Aug 21, 2024 at 20:05

griFlo · Accepted Answer · 2022-04-28 14:33:47Z

8

You have to set "esModuleInterop": true to true in your tsconfig.json

or you can also try:

import * as next-auth from 'next-auth';

Edit:

import NextAuth from 'next-auth'; imports from the file next-auth.d.ts

i think you should move the file to a types folder as stated in this documentation https://next-auth.js.org/getting-started/typescript#module-augmentation

if you rename/remove the file the error is gone

edited Apr 28, 2022 at 14:33

answered Apr 28, 2022 at 13:02

griFlo

2,17420 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

user18371666 Over a year ago

Hi i tried both methods but they dont seem to be working here is my tsconfig file

user18371666 Over a year ago

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "baseUrl": ".", "paths": { "@/*": ["./src/*"], "~/*": ["./public/*"] }, "incremental": true

Ivan Kleshnin Over a year ago

Types located in ./types/next-auth.d.ts work, types located in ./next-auth.d.ts. don't. Tried with both paths included in tsconfig, of course. Weird @_@

Beikeni Over a year ago

Im stuck here, spent all day on it. Can please someone help me figure out what's causing this. The index.d.ts file in the node_modules looks perfectly fine so it seems that there is some type of conflict on which file it is consulting but i cant wrap my head around it

Jonatan Lavado Over a year ago

@Beikeni Hey, I'm having the same issue here. Maybe something changed recently? Have you tried downgrading your next-auth version? i.e I was using version 4.22.2 and changed it to 4.21.0 and the error is gone.

|

sarem eskandary · Accepted Answer · 2023-09-18 19:29:45Z

make sure you don't use canary version:

change this:

"@next-auth/prisma-adapter": "canary",

to this:

"@next-auth/prisma-adapter": "^1.0.7",

make sure you added session config to your next-auth.d.ts

it should be like this:

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import NextAuth, { DefaultSession } from "next-auth";
import "next-auth/jwt";

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      /** The user's postal address. */
      address: string;
    } & DefaultSession["user"];
  }
}

// Read more at: https://next-auth.js.org/getting-started/typescript#module-augmentation

declare module "next-auth/jwt" {
  interface JWT {
    /** The user's role. */
    userRole?: "admin";
  }
}

Collectives™ on Stack Overflow

This Next JS authentication expression is not callable in a Typescript file?

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related