NextAuth doesn't work in NextJS15 app on Azure production.

[stsiushkevich]

Environment
System:
OS: Windows 10 10.0.19045
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 21.07 GB / 31.96 GB
Binaries:
Node: 20.18.1 - C:\nvm4w\nodejs\node.EXE
npm: 11.0.0 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Edge: Chromium (131.0.2903.146)
Internet Explorer: 11.0.19041.4355
npmPackages:
next: 15.1.4 => 15.1.4
next-auth: ^4.24.11 => 4.24.11
react: 19.0.0 => 19.0.0

Reproduction URL
https://brave-glacier-05979150f.4.azurestaticapps.net/login

Describe the issue
Hello, guys! I have encountered a strange issue that an application doesn't work on Azure production. Locally all is well. I satisfied all reguired instructions. spent a huge amount of time to figure out, but don't have ideas anymore, please help me to fix it!(

I assigned NEXTAUTH_SECRET and NEXTAUTH_URL, but don't understand why it doesn't work, I cannot open even login page.((

My [...nextauth]/route.js file:

import NextAuth from "next-auth"

import config from '@shared/config/nextAuthConfig'

const handler = NextAuth(config)

export { handler as GET, handler as POST };

src/app/shared/config/nextAuthConfig.ts

import axios from 'axios'

import { AuthOptions } from "next-auth"

import CredentialsProvider from "next-auth/providers/credentials"

import { convertToFormData } from "@shared/lib/utils/ConvertUtils"

import {
    AuthUser,
    ServerResponseBody
} from "@shared/types"

import { config } from '../../../../config'

const LOGIN_URL = `${config.backendServer.url}/api/auth/login`

const nextAuthConfig: AuthOptions = {
    providers: [
        CredentialsProvider({
            id: 'credentials',
            name: 'Credentials',
            credentials: {
                username: { label: "Username", type: "text", placeholder: "jsmith", value: "administrator" },
                password: { label: "Password", type: "password", value: "admin" },
            },

            async authorize(credentials) {
                const data = convertToFormData({
                    login: credentials?.username,
                    password: credentials?.password,
                });

                const response = await axios.post<ServerResponseBody<AuthUser>>(LOGIN_URL, data, {
                    headers: { 'Content-Type': 'application/json' }
                })

                const user = response.data.data

                return { ...user, id: user.login, email: user.login }
            }
        })
    ],
    pages: {
        signIn: '/login',
    },
    session: { strategy: "jwt" },
    callbacks: {
        async jwt({ token, user }) {
            return { ...token, ...user }
        },
        async session({ session, token, user }) {
            session.user = { ...token, ...session.user }
            return session;
        }
    }

}

export default nextAuthConfig

middleware.ts

export { default } from "next-auth/middleware"

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - .swa (Azure Static Web Apps)
         */
        '/((?!.swa).*)',
        "/dashboard",
    ],
};

login page

import { FC } from 'react'

import { Paper } from '@mui/material'

import logoImage from '@/assets/images/suburban-logo.png'

import { LoginForm2 } from '@features/Login/ui'

import styles from './page.module.scss'

type Props = {
    searchParams?: Promise<{
        error?: string | undefined
    }>
}

const Login: FC<Props> = async ({ searchParams }) => {
    const { error } = await searchParams ?? {}

    console.log(`searchParams?.error = ${error}`)

    return (
        <div className={styles.login}>
            <div className={styles.login__body}>
                <Paper elevation={0} sx={{ p: 2, mb: 3 }}>
                    <img alt="" src={logoImage.src} className={styles.login__logoImg}/>
                </Paper>
                <LoginForm2 error={error}/>
            </div>
        </div>
    )
}

export default Login

[stsiushkevich]

Additional Screens: