типы next-auth не принимаются во внимание

Содержание

Вопрос или проблема
Редактирование 1
Ответ или решение
Проблема 1: Ошибка о недостающем свойстве id в типе User
Проблема 2: Неявный тип any в аргументах колбеков
Конфигурация tsconfig.json
Резюме

Вопрос или проблема

Я использую next-auth в своем проекте Next.js с TypeScript.

Мой tsconfig.json выглядит следующим образом:

{
  "compilerOptions": {
    "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": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "./types/*.ts"
  ],
  "exclude": ["node_modules"]
}

Мой next-auth.d.ts (находится в project_root/types/) выглядит так:

// eslint-disable-next-line
import NextAuth, { DefaultSession } from "next-auth";
// eslint-disable-next-line
import { JWT } from "next-auth/jwt";

declare module "next-auth" {
  interface Session {
    user: {
      ethAddress: string;
    };
  }
  interface User {
    ethAddress: string;
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    ethAddress: string;
  }
}

Я пытаюсь реализовать авторизацию. Есть два признака того, что мои типы настроены неправильно.

В функции authorize я возвращаю объект, который выглядит как {ethAddress: string}, однако я получаю следующую ошибку:

Свойство 'id' отсутствует в типе '{ ethAddress: string; }', но требуется в типе 'User'.

Обратите внимание, что я не совсем уверен, появляется ли эта ошибка из-за неправильной конфигурации типов или потому, что наличие атрибута id обязательно, даже если вы не объявляете его в своем типе User.

Мои колбеки не имеют типизации автоматически. Основываясь на документации и некоторых примерах next-auth + TypeScript, я не должен вручную указывать тип аргументов колбеков, однако, имея следующий код:

callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.ethAddress = user.ethAddress;
      }
      return token;
    },
    async session({ session, token }) {
      session.user.address = token.address;
      return session;
    },
  },

Все аргументы показывают ошибку, подобную:

Элемент привязки 'token' неявно имеет тип 'any'.

Я убедился, что перезапустил TS Server несколько раз и перезапустил VS Code, но ничего не сработало.

У вас есть какие-нибудь предложения?

Редактирование 1

Я также добавил "typeRoots": ["./types"], в свою конфигурацию TypeScript, но ничего не произошло.

Ответ или решение

Ваша проблема с типами в библиотеке next-auth при использовании TypeScript в проекте Next.js может быть обусловлена несколькими аспектами. Давайте разберемся, как решить возникающие ошибки и правильно настроить типы.

Проблема 1: Ошибка о недостающем свойстве `id` в типе `User`

Ошибка, с которой вы столкнулись:

Property 'id' is missing in type '{ ethAddress: string; }' but required in type 'User'.

Эта ошибка возникает из-за того, что тип User, предоставляемый библиотекой next-auth, требует наличие свойства id. Перед возвращением объекта в функции authorize, вам нужно убедиться, что вы возвращаете его в соответствии с установленным типом. Чтобы это исправить, вам необходимо добавить id в объект, который вы возвращаете. Например:

return {
  id: userId, // здесь id – это уникальный идентификатор пользователя
  ethAddress: userEthAddress, // ваш существующий ethAddress
};

Если вы не хотите использовать id, вам потребуется переопределить существующий тип User для библиотеки next-auth, добавив необязательное свойство id. Однако, это может повлиять на другие части вашего приложения. Лучше всего предоставить минимально необходимый объект с учетом требований next-auth.

Проблема 2: Неявный тип `any` в аргументах колбеков

Ошибка:

Binding element 'token' implicitly has an 'any' type.

Происходит из-за того, что TypeScript не знает о типах параметров в ваших колбеках. Для решения этой проблемы вы можете явно указать типы для параметров jwt и session. Например:

import NextAuth, { DefaultSession, JWT } from "next-auth";

callbacks: {
  async jwt({ token, user }: { token: JWT; user: User | undefined }) {
    if (user) {
      token.ethAddress = user.ethAddress;
    }
    return token;
  },
  async session({ session, token }: { session: DefaultSession; token: JWT }) {
    session.user.ethAddress = token.ethAddress; // Убедитесь, что у вас имеется ethAddress
    return session;
  },
}

Конфигурация `tsconfig.json`

Ваша настройка tsconfig.json выглядит в целом корректно. Убедитесь, что путь к вашим типам верен и TypeScript может его увидеть:

"typeRoots": ["./types"]

Обратите внимание, что нужно перезапустить TypeScript сервер после внесения изменений в tsconfig.json.

Резюме

Обеспечьте, чтобы объект, возвращаемый в authorize, содержит все обязательные поля, включая id.
Явно укажите типы аргументов в ваших колбеках jwt и session.
Убедитесь, что путь к типам правильный и TypeScript видит их.
Перезапустите сервер TypeScript после внесения изменений.

Эти шаги должны помочь вам устранить проблемы с типами в вашем проекте. Если после выполнения этих шагов проблема не исчезнет, рассмотрите возможность проверки версий всех зависимостей, так как возможны изменения в API на стороне next-auth.