The inferred type of 'auth' cannot be named without a reference

[yordis]

hey folks, I am trying to upgrade the setup to V5 with a very basic auth file (I commented the code to test it out), TypeScript compiler is giving me some trouble:

import NextAuth, { NextAuthConfig } from 'next-auth';
const config = {

} satisfies NextAuthConfig;
export const { handlers, auth, signIn, signOut } = NextAuth(config);

./src/auth.ts:67:26
Type error: The inferred type of 'auth' cannot be named without a reference to '../../../.yarn/__virtual__/next-auth-virtual-b4c85b046e/0/cache/next-auth-npm-5.0.0-beta.8-b5debcb93d-4458f65a76.zip/node_modules/next-auth/lib'. This is likely not portable. A type annotation is necessary.

[yordis]

Hey @ThangHuuVu, I sincerely apologize for tagging you directly. I am unsure what to do anymore. Have you seen this issue before or know what the issue is with TypeScript?

PR: https://github.com/straw-hat-team/nextjs-starter-kit/pull/157

[yordis]

Hey @ThangHuuVu, I removed yarn altogether and used pnpm, and the issue still persists...

[xentobias]

I have the same problem and I'm using npm. Next-Auth (5.0.0-beta.13)

[yordis]

Should I create an issue thou? At this point I do not believe it is me then

[tszhong0411]

I got the same problem with 5.0.0-beta.13.

[xentobias]

@yordis, it would probably be really helpful if you could create an issue.

A (not so elegant) temporary workaround would be:

const nextAuthResult = NextAuth({
  // ...
})

export const auth: NextAuthResult["auth"] = nextAuthResult.auth;
export const {
  handlers: { GET, POST },
  signIn,
  signOut,
}: NextAuthResult = nextAuthResult;

[yordis]

After trying multiple things following microsoft/TypeScript#42873 I decided to add to my Next Apps computation:

{
  "compilerOptions": {
    "declaration": false,
  }
}

It is fixed under "@straw-hat/tsconfig": "4.2.2"

I am not sure what the downsides are doing that, for app compilations, I would love to hear your opinions here:

[Falven]

It's productive criticism. This shouldn't be accepted as an answer as it's not the correct answer for apps with a well defined public interface.

[yordis]

What is the proper solution? Could you focus on that? I am more than happy to mark your solution as the answer.

Otherwise,

[Falven]

One option is to explicitly re-type the destructed declarations.

import authOptions from './config/auth.config';
import NextAuth, { type NextAuthResult } from 'next-auth';

const result = NextAuth(authOptions);

export const handlers: NextAuthResult['handlers'] = result.handlers;
export const auth: NextAuthResult['auth'] = result.auth;
export const signIn: NextAuthResult['signIn'] = result.signIn;
export const signOut: NextAuthResult['signOut'] = result.signOut;

This avoids the naming issue because each property is typed individually and doesn't require a single stable type name for the entire object. But it's really up to next-auth to make their declarations more stable.

[subvertallchris]

Beautiful, @Falven, thank you.

[MukeshAbhi]

ThankYou @Falven

[LouisLecouturier]

I am having the same issue but with the signIn variable

TS2742: The inferred type of signIn cannot be named without a reference to .pnpm/@auth+core@0.31.0/node_modules/@auth/core/providers. This is likely not portable. A type annotation is necessary.

My code :

import NextAuth from 'next-auth';
import Entra from 'next-auth/providers/microsoft-entra-id';

const {
  AZURE_ENTRA_TENANT_ID,
  AZURE_ENTRA_CLIENT_ID,
  AZURE_ENTRA_CLIENT_SECRET,
} = process.env;


export const { auth, handlers, signIn, signOut } : NextAuthResult = NextAuth({ // The signIn is marked as error
  providers: [
    Entra({
      tenantId: AZURE_ENTRA_TENANT_ID,
      clientId: AZURE_ENTRA_CLIENT_ID,
      clientSecret: AZURE_ENTRA_CLIENT_SECRET,
    }),
  ],
});

[olivierlesnicki]

Likewise

[theSaiRohit]

Any updates?

[mrblackoutz]

Actually I don't know why this is closed, the problem persists, trying to fix the Profiles I got to:

import NextAuth, { NextAuthConfig, NextAuthResult } from "next-auth";
import GoogleProvider, { GoogleProfile } from "next-auth/providers/google";
import MicrosoftEntraProvider, { MicrosoftEntraIDProfile } from "next-auth/providers/microsoft-entra-id";

// Define explicit types for the NextAuth configuration
const authOptions: NextAuthConfig = {
 providers: [
 GoogleProvider({
 authorization: {
 params: {
 prompt: "consent",
 access_type: "offline",
 response_type: "code",
 },
 },
 }),
 MicrosoftEntraProvider({
 clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID || '',
 clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET || '',
 issuer: `https://login.microsoftonline.com/${process.env.AUTH_MICROSOFT_ENTRA_ID_TENANT || 'common'}/v2.0`,
 authorization: {
 params: {
 scope: 'openid profile email User.Read',
 prompt: 'select_account'
 }
 }
 })
 ],
 session: { strategy: "jwt" },
 pages: {
 signIn: "/login",
 }
};

// Infer the return type of NextAuth
type NextAuthReturnType = NextAuthResult;

type Profiles = GoogleProfile | MicrosoftEntraIDProfile;

// Define custom types for signIn and signOut with correct generics
type CustomSignIn = <P extends Profiles, R extends boolean = true>(
 provider?: P,
 options?:
 | FormData
 | ({
 redirectTo?: string
 redirect?: R
 } & Record<string, any>),
 authorizationParams?:
 | string[][]
 | Record<string, string>
 | string
 | URLSearchParams
) => Promise<R extends false ? any : never>;
type CustomSignOut = NextAuthReturnType['signOut'];

// Export the handlers explicitly with custom types
export const { handlers, signIn, signOut, auth } = NextAuth(authOptions) as {
handlers: NextAuthReturnType['handlers'];
signIn: CustomSignIn;
signOut: CustomSignOut;
auth: NextAuthReturnType['auth'];
};

but, it definitely doesn't seem like a reasonable solution to me, @Falven's solution worked for me, I'll copy the error in my native language, so that other people can also find this solution
O tipo inferido de 'signIn' não pode ser nomeado sem uma referência a '.pnpm/@auth+core@0.39.0/node_modules/@auth/core/providers'. Isso provavelmente não é portátil. Uma anotação de tipo é necessária. ts(2742)

The solution proposed by @Falven and it worked for me was:

const result = NextAuth(authOptions);

export const handlers: NextAuthResult['handlers'] = result.handlers;
export const auth: NextAuthResult['auth'] = result.auth;
export const signIn: NextAuthResult['signIn'] = result.signIn;
export const signOut: NextAuthResult['signOut'] = result.signOut;

I found the issue for this here #10568

[TomBell95]

I believe this is related to the setup in tsconfig.json - I just tried to import an existing (working) next app with auth into my turborepo and found the below does not work:

// tsconfig.json
{
  "extends": "@repo/typescript-config/nextjs.json",
  "compilerOptions": {
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

// typescript-config/nextjs.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./base.json",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "jsx": "preserve",
    "noEmit": true
  }
}

Whilst the original does work:

// working tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[DrewLandgraveCbsi]

This works for me as well. Not the correct solution but interesting that the original is working

[yordis]

From @Falven, check #9950 (reply in thread)

One option is to explicitly re-type the destructed declarations.

import authOptions from './config/auth.config';
import NextAuth, { type NextAuthResult } from 'next-auth';

const result = NextAuth(authOptions);

export const handlers: NextAuthResult['handlers'] = result.handlers;
export const auth: NextAuthResult['auth'] = result.auth;
export const signIn: NextAuthResult['signIn'] = result.signIn;
export const signOut: NextAuthResult['signOut'] = result.signOut;

This avoids the naming issue because each property is typed individually and doesn't require a single stable type name for the entire object. But it's really up to next-auth to make their declarations more stable.

[ValentinGurkov]

Thanks for providing a workaround. Explicitly re-typing the declarations is a bit ugly though, I hope this gets addressed.