Issue with trying to build with Nextauth
So my code in auth.ts looks like this
and part of my code for /auth/login/index.tsx is looking like this
I am using a custom SignIn page which I think it causing issues, but upon building I get these errors:
providers: [
CredentialsProvider({
id: 'credentials',
name: 'Credentials',
// @ts-ignore
async authorize(credentials: any) {
const user = await prisma.user.findUnique({
where: { email: credentials.email },
});
if (!user) {
return null;
}
const passwordMatch = await compare(credentials.password, user.password);
if (!passwordMatch) {
return null;
}
return {
id: user.id,
name: user.name,
email: user.email,
}
},
}),
],
providers: [
CredentialsProvider({
id: 'credentials',
name: 'Credentials',
// @ts-ignore
async authorize(credentials: any) {
const user = await prisma.user.findUnique({
where: { email: credentials.email },
});
if (!user) {
return null;
}
const passwordMatch = await compare(credentials.password, user.password);
if (!passwordMatch) {
return null;
}
return {
id: user.id,
name: user.name,
email: user.email,
}
},
}),
],
await signIn("credentials", {
redirect: false,
email: email,
password: password,
})
await signIn("credentials", {
redirect: false,
email: email,
password: password,
})
./src/server/auth.ts
48:7 Error: Do not use "@ts-ignore" because it alters compilation errors. @typescript-eslint/ban-ts-comment
49:36 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
51:20 Error: Unsafe assignment of an `any` value. @typescript-eslint/no-unsafe-assignment
51:27 Error: Unsafe member access .email on an `any` value. @typescript-eslint/no-unsafe-member-access
56:45 Error: Unsafe argument of type `any` assigned to a parameter of type `string`. @typescript-eslint/no-unsafe-argument
56:45 Error: Unsafe member access .password on an `any` value.
./src/server/auth.ts
48:7 Error: Do not use "@ts-ignore" because it alters compilation errors. @typescript-eslint/ban-ts-comment
49:36 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any
51:20 Error: Unsafe assignment of an `any` value. @typescript-eslint/no-unsafe-assignment
51:27 Error: Unsafe member access .email on an `any` value. @typescript-eslint/no-unsafe-member-access
56:45 Error: Unsafe argument of type `any` assigned to a parameter of type `string`. @typescript-eslint/no-unsafe-argument
56:45 Error: Unsafe member access .password on an `any` value.
3 Replies
Now it's easy enough to rid the first issue, but then more issues arise, such as this monstrosity from the
Also, when trying to change the type of
However, that causes more issues with these 2 parts:
where credentials is possibly undefined, but I can fix that with
I have an issue, with
I am really unsure of what to do after searching on stackoverflow, and the rest of the internet.
Any help would be greatly appreciated.
The main 2 issues are with the
authorize function
Type '(credentials: any) => Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type '(credentials: Record<string, string> | undefined, req: Pick<RequestInternal, "query" | "body" | "headers" | "method">) => Awaitable<User | null>'.
Type 'Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type 'Awaitable<User | null>'.
Type 'Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type 'PromiseLike<User | null>'.
Types of property 'then' are incompatible.
Type '<TResult1 = { id: number; name: string; email: string; } | null, TResult2 = never>(onfulfilled?: ((value: { id: number; name: string; email: string; } | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined) => Promise<...' is not assignable to type '<TResult1 = User | null, TResult2 = never>(onfulfilled?: ((value: User | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'.
Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
Types of parameters 'value' and 'value' are incompatible.
Type '{ id: number; name: string; email: string; } | null' is not assignable to type 'User | null'.
Type '{ id: number; name: string; email: string; }' is not assignable to type 'User'.
Types of property 'id' are incompatible.
Type 'number' is not assignable to type 'string'.ts(2322)
Type '(credentials: any) => Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type '(credentials: Record<string, string> | undefined, req: Pick<RequestInternal, "query" | "body" | "headers" | "method">) => Awaitable<User | null>'.
Type 'Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type 'Awaitable<User | null>'.
Type 'Promise<{ id: number; name: string; email: string; } | null>' is not assignable to type 'PromiseLike<User | null>'.
Types of property 'then' are incompatible.
Type '<TResult1 = { id: number; name: string; email: string; } | null, TResult2 = never>(onfulfilled?: ((value: { id: number; name: string; email: string; } | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | undefined) => Promise<...' is not assignable to type '<TResult1 = User | null, TResult2 = never>(onfulfilled?: ((value: User | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'.
Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
Types of parameters 'value' and 'value' are incompatible.
Type '{ id: number; name: string; email: string; } | null' is not assignable to type 'User | null'.
Type '{ id: number; name: string; email: string; }' is not assignable to type 'User'.
Types of property 'id' are incompatible.
Type 'number' is not assignable to type 'string'.ts(2322)
credentials from any, I am left changing it to this
async authorize(credentials: Record<string, string> | undefined)
async authorize(credentials: Record<string, string> | undefined)
const user = await prisma.user.findUnique({
where: { email: credentials.email },
});
const user = await prisma.user.findUnique({
where: { email: credentials.email },
});
credentials?.email, and same for anywhere else that access' credentials.
However on this line:
const passwordMatch = await compare(credentials?.password, user.password);
const passwordMatch = await compare(credentials?.password, user.password);
credentials?.password which shows this:
No overload matches this call.
Overload 1 of 2, '(s: string, hash: string): Promise<boolean>', gave the following error.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.
Overload 2 of 2, '(s: string, hash: string, callback?: ((err: Error, success: boolean) => void) | undefined, progressCallback?: ((percent: number) => void) | undefined): void', gave the following error.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2769)
No overload matches this call.
Overload 1 of 2, '(s: string, hash: string): Promise<boolean>', gave the following error.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.
Overload 2 of 2, '(s: string, hash: string, callback?: ((err: Error, success: boolean) => void) | undefined, progressCallback?: ((percent: number) => void) | undefined): void', gave the following error.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2769)
authorize function and compare(credentials?.password, user.password)Well if you have time we could hop in a call to look at that i just did a credentials login not long ago in a project so i think i can help you 🙂
Yeah sure
Got it to work, this is what I did.
Added this bit of code
And in my
Instead of using
declare module "next-auth" {
...
}
// This bit here
declare module "next-auth/jwt" {
interface JWT {
id: string;
}
}
declare module "next-auth" {
...
}
// This bit here
declare module "next-auth/jwt" {
interface JWT {
id: string;
}
}
callbacks: {
session({ session, token}) {
if(token){
session.user.id = token.id;
session.user.name = token.name;
}
return session;
},
jwt({ token, user }) {
if (user) {
token.id = user.id;
token.name = user.name;
}
return token;
},
},
callbacks: {
session({ session, token}) {
if(token){
session.user.id = token.id;
session.user.name = token.name;
}
return session;
},
jwt({ token, user }) {
if (user) {
token.id = user.id;
token.name = user.name;
}
return token;
},
},
CredentialsProvider({
name: 'Credentials',
credentials: {
email: { label: "Email", type: "text"},
password: { label: "Password", type: "password" },
},
// The above resolved the issues with the credentials type
async authorize(credentials)
CredentialsProvider({
name: 'Credentials',
credentials: {
email: { label: "Email", type: "text"},
password: { label: "Password", type: "password" },
},
// The above resolved the issues with the credentials type
async authorize(credentials)
schema.prisma
model User {
id String @id @default(cuid())
name String
email String @unique
password String
}
model User {
id String @id @default(cuid())
name String
email String @unique
password String
}
id Int @id @default(autoincrement()), I instead changed it to what you see above