Búsqueda de sitios web

reactjs - ¿Esta expresión de autenticación de Next JS no se puede llamar en un archivo de Typescript?

Estoy creando un método de inicio de sesión para mi aplicación Next js y estoy usando la documentación recomendada proporcionada por el repositorio de GitHub.

Sin embargo, cuando llego al paso de la carpeta de autenticación, obtengo este error. Para los proveedores de inicio de sesión.

en [...nextauth].ts

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

No entiendo por qué, ya que he seguido la documentación y aún así obtengo este error

Aquí está el código de los archivos

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
    },
  },
})

Respuesta #1

Tienes que establecer "esModuleInterop": true como verdadero en tu tsconfig.json

o también puedes probar:

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

Editar :

import NextAuth from 'next-auth'; importa desde el archivo next-auth.d.ts

Creo que deberías mover el archivo a una carpeta de tipos como se indica en esta documentación https://next-auth.js.org/getting-started/typescript#module-augmentation

si renombras/eliminas el archivo, el error desaparece

Respuesta #2

asegúrate de no usar la versión canary:

cambia esto:

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

a esto:

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

asegúrate de haber agregado la configuración de sesión a tu next-auth.d.ts

debería ser así:

// 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";
  }
}

Artículos relacionados