using NextAuth with my NextJS app I have error when I switch my app from the standard localhost root to a basePath

Question

my next.config.js file

/** @type {import('next').NextConfig} */
const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

const nextConfig = {


reactStrictMode: true,
    swcMinify: true,
    basePath: `${basePath}`,
    assetPrefix: `${basePath}/`,

    experimental: {
      appDir: true,
    },
    
}

module.exports = nextConfig

my .env.local file

NEXTAUTH_URL=http://localhost:3000/myapp/api/auth
NEXT_PUBLIC_API_URL=http://localhost:8000/backend/
NEXT_PUBLIC_TOKEN_REFRESH_LIMIT=120
NEXT_PUBLIC_BASE_PATH=/myapp
NEXT_PUBLIC_SESSION_BASE_PATH=/myapp/api/auth
NEXTAUTH_DEBUG=true
NEXTAUTH_BASE_PATH=/myapp

my LoginForm

"use client"
import React, {useEffect} from 'react'
import { signIn } from "next-auth/react";

const LoginForm = () => {
    const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

    const baseUrlCallback = async (baseUrl: string) => {
        const modifiedUrl = `${baseUrl}${basePath}`;
        console.log("modify URL", modifiedUrl)
        return modifiedUrl;
      };

    const handleSubmit = async (e) => {
        e.preventDefault();
        console.log("Login FORM has basePath",basePath)
        const username = e.target.username.value;
        const password = e.target.password.value;
        username.length > 0 && await signIn("credentials", {
            //basePath: `${basePath}/api/auth`,
            baseUrl: baseUrlCallback,
            username: username,
            password: password,
            redirect: true,
            callbackUrl: "/myapp/dashboard",
          }); 
 
    };

  return (
    <form onSubmit={handleSubmit} action="myapp/api/auth/callback/credentials">
        <label className="form-group has-float-label mb-4">
            <input className="form-control" id="username" type="text"/>
            <span>Username</span>
        </label>
        <label className="form-group has-float-label mb-4">
            <input className="form-control" type="password" id="password" />
            <span>Password</span>
        </label>
        <div className="d-flex justify-content-between align-items-center">
            <a href="#">Forgot your password?</a>
            <button className="btn btn-primary btn-lg btn-shadow" type="submit">LOGIN</button>
        </div>
    </form>
  )
}

export default LoginForm

when I submit the form, it calls http://localhost:3000/api/auth/providers and returns 404 as it ignores the basePath and I get forwarded to error message to http://localhost:3000/api/auth/error. Any ideas how to make it work?

I have also tried to make sure the URL that is submitted to NextAuth is the correct one, but it seems that this code does not come to be executed:

const handler: NextApiHandler = (req: NextApiRequest, res: NextApiResponse) => {
    const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
    const originalUrl = req.url;
    req.url = `${basePath}${originalUrl}`;

    console.log("INTERCEPT NEXT AUTH:", req.url, originalUrl)
    
    return NextAuth(req, res, authOptions); 
};

export { handler as GET, handler as POST }

Answer 1

The signIn method uses the environment variable NEXTAUTH_URL to redirect after action unless you specify a callbackurl on top of it so you have to update NEXTAUTH_URL as well