I'm confused about this CallbackRouteError with the provider named "credentials". Can someone please explain?

I can't seem to resolve this error after searching extensively on the web.

For more information, visit [auth][error] CallbackRouteError: For more details, please visit https://errors.authjs.dev#callbackrouteerror [auth][cause]: Error at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:226:23) at async AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:126:34) at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:51:17) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/actions/login.ts:30:9) at async C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:418 at async rS (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:7978) at async r2 (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1251) at async doRender (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:1438:30) at async cacheEntry.responseCache.get.routeKind (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:1599:28) at async DevServer.renderToResponseWithComponentsImpl (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:1507:28) at async DevServer.renderPageComponent (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:1924:24) at async DevServer.renderToResponseImpl (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:1962:32) at async DevServer.pipeImpl (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:920:25) at async NextNodeServer.handleCatchallRenderRequest (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\next-server.js:272:17) at async DevServer.handleRequestImpl (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\base-server.js:816:17) at async C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\dev\next-dev-server.js:339:20 at async Span.traceAsyncFn (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\trace\trace.js:154:20) at async DevServer.handleRequest (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\dev\next-dev-server.js:336:24) at async requestHandlerImpl (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\lib\router-server.js:377:13) at async Server.requestListener (C:\Users\me\WebstormProjects\Project-L\node_modules\next\dist\server\lib\start-server.js:141:13) [auth][details]: { "provider": "credentials" }

Below is the code snippet from different files.

"use server"

import * as z from 'zod';
import { AuthError } from "next-auth";

import { signIn } from "@/auth";
import { LoginSchema } from '@/schemas';
import { DEFAULT_LOGIN_REDIRECT } from "@/routes";

export const login = async (values: z.infer<typeof LoginSchema>) => {
    const validatedFields = LoginSchema.safeParse(values);

    if(!validatedFields.success){
        return {error: "Invalid fields"}
    }

    const { email, password } = validatedFields.data;

    try {
        await signIn("credentials", {
            email,
            password,
            redirectTo: DEFAULT_LOGIN_REDIRECT,
        })
    } catch (error) {
        if(error instanceof AuthError){
            switch (error.type) {
                case "CredentialsSignin":
                    return {error: "Invalid credentials"}
                case "CallbackRouteError":
                    return {error: "An error occurred with the callback route"}
                default:
                    return {error: "An error occurred"}
            }
        }

        throw error;
    }

};
import bcrypt from "bcryptjs";
import type { NextAuthConfig } from "next-auth"
import Credentials from "next-auth/providers/credentials"

import { LoginSchema } from "@/schemas"
import { getUserByEmail } from "@/data/users";

export default {
    providers: [
        Credentials({
            async authorize(credentials: any ) {
                const validateFields = LoginSchema.safeParse(credentials)

                if(validateFields.success) {
                    const { email, password } = validateFields.data


                    const user = await getUserByEmail(email);
                    if (!user || !user.password) return null;

                    const passwordsMatch = await bcrypt.compare(
                        password,
                        user.password
                    );

                    if(passwordsMatch) return user;
                }

                return null;
            }
        })
    ]
} satisfies NextAuthConfig

Connection Problem

Even when I attempt to log in correctly, I anticipate receiving {error: "Invalid credentials"} due to incorrect input data, but that's not the error message I receive.

I am using Next.js and auth v5

Answer №1

Dealing with a similar issue, I encountered challenges while utilizing next-auth: 5.0.0-beta.19. However, after switching to 5.0.0-beta.4, the problem was resolved. The root cause of the error remains ambiguous to me.

If you happen to discover an alternative resolution, kindly do share it with us.

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

Having trouble with NextJS build error? Learn how to fix it with the command "npm run build"

In my NextJS project, I have a Header2 component that is included in the RootLayout component. // Header2.js "use client"; import React, { useState } from 'react'; import Link from 'next/link'; import { useRouter } from ' ...

The error "localStorage is not defined when using an axios interceptor in NextJS"

Within my root directory, there lies a file named api.js. This particular file is responsible for managing calls to an external API, with a focus on request and response interceptors. One specific use case involves injecting the access_token, leading to th ...

The incredible power of the MongoDB $inc field

I am facing a challenge in writing a function that accepts a record id, an action (inc or dec), and a field name as a string to be incremented (can be 'likes', 'subs' or any other). The issue is that I am unable to find a way to replac ...

Utilizing interpolation for a CSS class defined in an external file within Angular 2

Is it feasible to send a variable to a CSS class in an external CSS file within Angular 2, such as: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', sty ...

Displaying a div component in React and Typescript upon clicking an element

I've been working on a to-do list project using React and TypeScript. In order to display my completed tasks, I have added a "done" button to the DOM that triggers a function when clicked. Initially, I attempted to use a useState hook in the function ...

The issue I'm facing with Angular 8 is that while the this.router.navigate() method successfully changes the URL

As someone who is relatively new to Angular, I am currently in the process of setting up the front end of a project using Angular 8. The ultimate goal is to utilize REST API's to display data. At this point, I have developed 2 custom components. Logi ...

Utilize Angular 5 to implement URL routing by clicking a button, while also preserving the querystring parameters within the URL

I have a link that looks like this http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0 The router module is set up to display content based on the above URL structure { path: & ...

Is there a way to determine through code whether a Google AdSense ad has been properly rendered on my React/Next.js website, or if an error has occurred during the

At our website, users can post content and we display ads on their posts. Similar to YouTube, we share some of the ad revenue with the user. However, a challenge we face is how to programmatically track if an ad was successfully displayed on a user's ...

Issue encountered while creating Next.js 13.4 application: The type 'ResolvingMetadata | undefined' does not meet the requirement of 'ResolvingMetadata'

I'm currently working on dynamically generating metadata for my Next.js 13.4 application using this code snippet: export async function generateMetadata( { params, searchParams }: Props, ) { try { // extract the route parameters ...

Navigating through a React application with several workspaces - the ultimate guide

Currently, I am working on implementing a monorepo setup inspired by this reference: https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript In this repository, there are 4 distinct locations wher ...

Tips for showcasing all values in a nested array

In my Vue application, I am dealing with a nested array where users can select one date and multiple times which are saved as one object. The challenge I am facing now is how to display the selected date as a header (which works fine) and then list all the ...

Storing Buffer data in Postgres bytea using TypeORM is limited to only 10 bytes

I am encountering an issue while trying to store images in a postgres database, as only 10 bytes of data are being saved. Here is the sequence of events: Initially, I receive a base64 encoded string on my server. I then convert it into a Buffer, assign i ...

The setter of the computed property is failing to execute

Currently, I am working with a computed property that represents an object of a specific type defined within my Vuex Store. The goal is to utilize this property in my component using v-model. I have thoroughly set up getters and setters for this property a ...

Next.js not rendering any content after importing data

Whenever I try to fetch data from my data.json file, I keep getting empty arrays instead of the expected data. I have tried adjusting the import path by going back with ../ but still no data is displaying. This issue has me puzzled, especially since this ...

Swapping out numerical value and backslash with Angular

I am encountering an issue with replacing URL parameters in my code. Take a look at the following code snippet: getTitle() { const title = this.router.url.replace(/\D\//g, ''); return title; } However, it seems to only be removin ...

Deciphering TS2345: "The argument supplied, known as 'typeof MyComponent', cannot be assigned to the specified parameter type"

I am facing an issue while attempting to integrate a Typescript React component with react-onclickoutside. The error message that I encounter is as follows: TS2345: Argument of type 'typeof MyComponent' is not assignable to parameter of type &apo ...

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...

Lock the table header in place as the table content scrolls upward using Angular4

Is there a way to keep the table header fixed in place while the rest of the content scrolls up? Below is a snippet from my .html file: <table class="table sticky-header"> <thead> <tr class="row-hor- ...

What is the best method for performing a basic POST request in NextJS 13.4 API with the new App Router, utilizing Response, NextAPIResponse, and NextResponse?

How can a simple POST request be made in NextJS 13.4 using the new App Router? The traditional method of using NextAPIRequest, NextAPIResponse, checking for 'POST' method with if (req.method === 'POST'), extracting parameters from the ...

Getting a precise item in JSON with varied key signatures

Given the following JSON data: var responses = {customer : {results: 2938; id: 9283}, bredesh : {results: 2938; id: 248} }; I am trying to use an if statement in my HTML template : <div ng-if="response.(customer and bredesh and any new element (Is ...