When executing NextAuth with the given auth options, it raises an error message stating "Incompatibility of types for 'adapter.createUser' between these specific types."

Currently, I am working on a project using Next.js 14 and attempting to configure NextAuth with the app/router. Unfortunately, I have encountered a type error that is proving difficult to resolve.

Below is my route.ts file:

// ./app/api/[...nextauth]/route.js

import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcrypt";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient;

export const authOptions = {
    adapter: PrismaAdapter(prisma),
    providers: [
        CredentialsProvider({
            name: "credentials",
            credentials: {
                email: { label: "Email", type: "email" },
                password: { label: "Password", type: "password" }
                
            },
            async authorize(credentials) {
                // check to see if email and password are valid
                if(!credentials || !credentials.email || !credentials.password)
                    return null;

                // Check if the user exists
                const user = await prisma.user.findUnique({
                    where: {
                        email: credentials.email
                    }
                });

                if(!user) 
                    return null;

                // Check if passwords match (if user exists)
                const passwordsMatch = user.hashedPassword && await bcrypt.compare(credentials.password, user.hashedPassword);


                if(!passwordsMatch)
                    return null;

                // Return user object if everything is valid
                return user;
            }
        })
    ],
    session: {
        strategy: 'jwt' as const // Explicitly type as 'jwt'
    },
    secret: process.env.NEXTAUTH_SECRET,
    debug: process.env.NODE_ENV === "development",
};

export const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

This results in the following error:

Argument of type '{ adapter: Adapter; providers: CredentialsConfig<{ email: { label: string; type: string; }; password: { label: string; type: string; }; }>[]; session: { strategy: "jwt"; }; secret: string | undefined; debug: boolean; }' is not assignable to parameter of type 'AuthOptions'.
  The types of 'adapter.createUser' are incompatible between these types.
    Type '((user: AdapterUser) => Awaitable<AdapterUser>) | undefined' is not assignable to type '((user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>) | undefined'.
      Type '(user: AdapterUser) => Awaitable<AdapterUser>' is not assignable to type '(user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>'.
        Types of parameters 'user' and 'user' are incompatible.
          Property 'id' is missing in type 'Omit<AdapterUser, "id">' but required in type 'AdapterUser'.

I have attempted to change

export const authOptions = {

to

export const authOptions: AuthOptions = {

However, this change results in the error:

Type 'import("c:/<path>@auth/core/adapters").Adapter' is not assignable to type 'import("c:/<path>/node_modules/next-auth/adapters").Adapter'.
  Types of property 'createUser' are incompatible.
    Type '((user: AdapterUser) => Awaitable<AdapterUser>) | undefined' is not assignable to type '((user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>) | undefined'.
      Type '(user: AdapterUser) => Awaitable<AdapterUser>' is not assignable to type '(user: Omit<AdapterUser, "id">) => Awaitable<AdapterUser>'.
        Types of parameters 'user' and 'user' are incompatible.
          Property 'id' is missing in type 'Omit<AdapterUser, "id">' but required in type 'AdapterUser'.

I am struggling to understand what I am missing or doing wrong. Any assistance would be greatly appreciated.

Answer №1

Clearly specify the adapter's type:

import { Adapter } from "next-auth/adapters";

adapter: PrismaAdapter(prisma) as Adapter

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cannot instantiate Marker Clusterer as a constructor

I am facing an issue with implementing Marker Clusterer in my app. I have successfully installed '@google/markerclusterer' in my project and imported it as shown below. However, a puzzling error keeps popping up: core.js:4002 ERROR TypeError: _go ...

Sentry alert: Encountered a TypeError with the message "The function (0 , i.baggageHeaderToDynamicSamplingContext) does not

My website, which is built using Next.js and has Sentry attached to it, runs smoothly on localhost, dev, and staging environments. However, I am facing an issue when trying to run it on my main production server. The error message displayed is as follows: ...

What causes the Footer to appear as a floating element in Tailwind CSS?

I've implemented the tailwind CSS footer into my NextJS project to display fetched data. However, I encountered an issue where the footer only floats when there is less data present. To address this problem, I created a separate footer file within my ...

Testing the React context value with React testing library- accessing the context value before the render() function is executed

In my code, there is a ModalProvider that contains an internal state managed by useState to control the visibility of the modal. I'm facing a dilemma as I prefer not to pass a value directly into the provider. While the functionality works as expecte ...

Testing TypeScript using Jasmine and Chutzpah within Visual Studio 2015

I am new to unit testing in AngularJS with TypeScript. I have been using jasmine and chutzpah for unit testing, but I encountered an error "ReferenceError: Can't find variable: angular". My test file looks like this: //File:test.ts ///<chutzpah_r ...

Error encountered while utilizing the Extract function to refine a union

I am currently working on refining the return type of my EthereumViewModel.getCoinWithBalance method by utilizing the Extract utility type to extract a portion of my FlatAssetWithBalance union based on the generic type C defined in EthereumViewModel (which ...

Separate string by using a regular expression pattern

Looking to parse a dynamic string with varying combinations of Code, Name, and EffectDate. It could be in the format below with all three properties or just pairs like Code-Name, Code-EffectDate, or Name-EffectDate. {"Code":{"value":"1"},"Name":{"value": ...

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

There seems to be an issue with the response type in the node.js environment

I am currently working on node.js and typescript, but I am encountering a minor issue. Below is the routeController I have created: public allUsers = (req: Request, res: Response) => { res.status(500).json({ status: "ERROR", ...

In Typescript, an interface is defined where the "id" property is required to be a number, while all other properties must be of

I am in need of creating an interface to represent data received from the server, where the id is a number and all other properties are strings. This is what I attempted: interface AnyChartsData { id: number; [key: string]: string; } However, I enco ...

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

What is the best way to send my Array containing Objects to the reducer using dispatch in redux?

I'm currently facing an issue where I can only pass one array item at a time through my dispatch, but I need to pass the entire array of objects. Despite having everything set up with a single array item and being able to map and display the data in t ...

No data being displayed or returned from API when using async await

My Ionic 6 + Angular 14 application is currently facing an issue with displaying data retrieved from an API... I have implemented a service to fetch the data from the API and then called this service in the component. The app compiles without any errors a ...

Creating Beautiful MDX Layouts with Chakra UI

Currently, I am attempting to customize markdown files using Chakra UI within a next.js application. To achieve this, I have crafted the subsequent MDXComponents.tsx file: import { chakra } from "@chakra-ui/react" const MDXComponents = { p: (p ...

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

Guide to iterating through different endpoints in a predetermined sequence

I am facing a challenge with testing various endpoints using different login credentials. When looping through the endpoints, the results are not appearing in the sequential order due to asynchronous nature. My goal is to iterate through each endpoint wit ...

After reloading the page, the Next JS code in getInitialProps does not run as expected

While integrating NextJS into my React app, I encountered a problem. When the page is reloaded or accessed directly via a link (e.g., somehostname.com/clients), my getInitialProps function does not execute. However, if I navigate to the page using <Link ...

Uncovering Module - which interface is missing a defined structure?

Can anyone explain why I am receiving this error in TypeScript 3.9.2: 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type. The code triggering the error is shown below: const Module = function(){ ...

Importing FontFace elements within the _document.tsx file

I have a collection of FontFace objects stored in a file called fonts/myFonts.js: const fontFaces = [ new FontFace('MyFont', "url('local/location.woff2') format('woff2')", { weight: '400', style: ...

What steps are needed to develop a TypeScript component within Angular framework?

I've been attempting to develop an Angular Component in TypeScript. I'm trying to utilize document.createElement to build a toolbar within my component, but it's not appearing. Below is my Component code: import {Directive, Component, boot ...