first implementation for NextAuth 5 with NextJS 15 and CrediantialsProvider for PostGreSQL with Prisma

[darkomenx]

Hello everyone,

I'm currently working on building a proof-of-concept (PoC) app using React technologies, following best practices.

However, the React ecosystem feels more complex than others, mainly because there are so many different ways to achieve the same results.

I'm trying to set up a stack using Next.js 15 + NextAuth.js 5 + Prisma + PostgreSQL, but I’ve noticed that many available resources don’t cover the latest versions of these tools, and a lot of examples focus on OAuth flows.

Right now, I’m running into the following issues:

• GET /api/auth/providers → 500 error

• GET /api/auth/error → 500 error

• My signIn callbacks or the authorize function don’t seem to be called, and I don’t understand why.

• I do not understand which part need to be included the NextAuth({}) object (auth.ts in root or route.ts in api)

I’ll share the relevant code context below, and any kind of advice is welcome.
Please don’t hesitate to point out mistakes — I’m just getting started and really appreciate your support and patience as I learn.

middleware

`import { auth } from '../auth';
import {PUBLIC_ROUTES} from "@/conf";

export default auth((req) => {

    console.log('===== Middleware start =========')
    const { nextUrl } = req;


    const isAuthenticated = !!req.auth;
    const isPublicRoute = PUBLIC_ROUTES.includes(nextUrl.pathname);

    console.log('isAuthenticated', isAuthenticated)
    console.log('isPublicRoute', isPublicRoute)

    // if (isPublicRoute && isAuthenticated)
    //     return Response.redirect(new URL('/protected', nextUrl));
    //
    // if (!isAuthenticated && !isPublicRoute)
    //     return Response.redirect(new URL('/login', nextUrl));
});

export const config = {
    // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
    // matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)', '/login', '/'],
    matcher: ['/login', '/', '/((?!_next|favicon.ico).*)'],
};`

login page

`"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, SubmitHandler } from "react-hook-form";
import * as z from "zod";
import { signIn } from "next-auth/react"
import { useState} from "react";


const FormSchema = z.object({
    email: z.string().min(2, {
        message: "Username must be at least 2 characters.",
    }),
    password: z.string().min(6, {
        message: "Password must be at least 6 characters.",
    }),
});

type Inputs =
{
    email: string
    password: string
}

type User = {
    id: number
    name: string
}

type FormData = z.infer<typeof FormSchema>

export default function FormPage()
{
    const [users, setUsers] = useState<User[]>([])

    const { register, handleSubmit, watch, formState: { errors }} = useForm<Inputs>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            email: "",
            password: "",
        },
    });

    // const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

    const onSubmit: SubmitHandler<Inputs> = (data) => {

        console.log('onSubmit')

        const response = signIn('credentials', {
            email: data.email,
            password: data.password,
            redirect: false,
        }).then(r => {

            console.log('ici 10', r)
            console.log('r', r)

        })

        console.log('response SignIn', response)
    }

    return (

        <div>

            <div><p className={'font-bold text-center text-5xl m-10'}>MUSICOLOGY</p></div>

            <div className={'bg-black h-75 p-5 rounded-xl shadow-lg w-95 mx-auto'}>

                <form onSubmit={handleSubmit(onSubmit)}>

                    <h2 className="text-2xl font-semibold text-center m-5">LOGIN</h2>

                    <ul>
                        {users.map((user) => (
                            <li key={user.id}>{user.name}</li>
                        ))}
                    </ul>

                    <input placeholder={'Email'}    className="border border-blue-600 p-2 w-full mb-3 rounded-full text-center" {...register("email")} />
                    <input placeholder={'Password'} className="border border-blue-600 p-2 w-full mb-3 rounded-full text-center" {...register("password")} />

                    <input type="submit" value={'Login'} className="bg-blue-500 text-white p-2 w-full rounded mt-5" />

                    {errors.email && <span>This field is required</span>}
                    {errors.password && <span>This field is required</span>}

                </form>

            </div>

        </div>
    );
}
`

route.ts

`import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

const handler = NextAuth({
    session: {
        strategy: 'jwt',
    },
    pages: {
        signIn: '/login',
    },
    providers: [
        CredentialsProvider({
            id: "credentials",
            type: "credentials",
            name: "credentials",
            credentials: {
                email: { label: 'Email', type: 'email' },
                password: { label: 'Password', type: 'password' },
            },
            async authorize(credentials, req) {

                console.log('============================= AUTHORIZE route.ts ======================')
                console.log("credentials:", credentials); // Log the credentials
                console.log("req:", req); // Log the request object

                // const user = { id: "1", name: "J Smith", email: "[email protected]" }
                //
                // const passwordCorrect = false;
                //
                // if (passwordCorrect) {
                //     return {
                //         id: user.id,
                //         email: user.email,
                //     };
                // }

                return null;
            },
        }),
    ],
    callbacks: {
        async signIn({ user, account, profile, email, credentials }) {

            console.log('route.ts -> callbacks signIn')
            return true
        },
        async redirect({ url, baseUrl }) {
            return baseUrl
        },
        async session({ session, user, token }) {
            return session
        },
        async jwt({ token, user, account, profile, isNewUser }) {
            return token
        }
    }
});

export { handler as GET, handler as POST };
`