TypeError: Cannot read properties of undefined (reading 'errors')

[damianlluch]

Hi, I am working with NextAuth v5. I have no problems running in development mode and running the build made by NextJS 14.
The problem is when running in Docker, and sometimes in development mode with NextJS.

'use client';

import { useState, FormEvent } from 'react';
import * as yup from 'yup';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { useFormState, useFormStatus } from 'react-dom';
import { Button, Input, Alert } from 'react-daisyui';
import { authenticate } from '../lib/actions';
import Image from 'next/image';
import '../login.css';

const validationSchema = yup.object().shape({
  username: yup
    .string()
    .email('Invalid email format')
    .required('Email is required'),
  password: yup
    .string()
    .min(6, 'Password must be at least 6 characters')
    .required('Password is required'),
});

export default function LoginForm() {
  const [state, dispatch] = useFormState(authenticate, {
    errors: {},
    message: '',
  });

  const [errors, setErrors] = useState<{ [key: string]: string }>({});

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const values = {
      username: formData.get('username') as string,
      password: formData.get('password') as string,
    };

    try {
      await validationSchema.validate(values, { abortEarly: false });
      dispatch(formData);
    } catch (validationErrors: unknown) {
      if (validationErrors instanceof yup.ValidationError) {
        const formErrors = validationErrors.inner.reduce(
          (acc: { [key: string]: string }, error) => {
            acc[error.path!] = error.message;
            return acc;
          },
          {}
        );
        setErrors(formErrors);
      }
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <div className="login-card">
        <div className="text-center">
          <h1 className="text-3xl font-bold mb-6">Bienvenidos</h1>
          <div className="mb-6 flex justify-center">
            <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`} alt="Logo" width={100} height={100}  />
          </div>  
        </div>
        <div className="mt-1 relative rounded-md shadow-sm">
          <label
            htmlFor="username"
            className="block text-sm font-medium text-gray-700"
          >
            Email
          </label>
          <div className="mt-1 relative rounded-md shadow-sm">
            <Input
              type="text"
              name="username"
              id="username"
              className="login-input"
              placeholder="Ingrese su nombre de usuario"
              required
            />
            {errors.username && (
              <Alert className="mt-2" color="error">
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <span>{errors.username}</span>
              </Alert>
            )}
          </div>
        </div>
        <div className="mt-4">
          <label
            htmlFor="password"
            className="block text-sm font-medium text-gray-700"
          >
            Password
          </label>
          <div className="mt-1 relative rounded-md shadow-sm">
            <Input
              type="password"
              name="password"
              id="password"
              className="login-input"
              placeholder="Ingrese su contraseña"
              required
              minLength={6}
            />
            {errors.password && (
              <Alert className="mt-2" color="error">
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <span>{errors.password}</span>
              </Alert>
            )}
          </div>
        </div>
        <div className="mt-6">
          <LoginButton />
        </div>
        {state.errors.credentials && (
          <Alert className="mt-4" color="error">
            <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
            <span>{state.message}</span>
          </Alert>
        )}
      </div>
    </form>
  );
}

function LoginButton() {
  const { pending } = useFormStatus();

  return (
    <Button className="w-full bg-black text-white" aria-disabled={pending}>
      Iniciar sesión
    </Button>
  );
}

'use server';

import { AuthError } from 'next-auth';
import { signIn } from '@/auth';

export async function authenticate(prevState: any, formData: FormData) {
  try {
    await signIn('credentials', Object.fromEntries(formData));
    return {
      message: 'success',
      errors: {},
    };
  } catch (error) {
    if (error instanceof AuthError) {
      return {
        message: 'Las credenciales ingresadas son incorrectas',
        errors: {
          credentials: 'incorrect email or password',
        },
      };
    }
    throw error;
  }
}

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  trustHost: true,
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        try {
          const res = await fetch(
            `${process.env.NEXT_PUBLIC_BACKEND_SERVER_URL}/oauth/connect/token`,
            {
              method: 'POST',
              body: new URLSearchParams({
                username: credentials?.username as string,
                password: credentials?.password as string,
                client_id: 'ro.web',
                client_secret: 'secret',
                scope: 'openid offline_access api_public',
                grant_type: 'password',
              }),
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }
          );
          const jsonRes = await res.json();

          if (res.ok && jsonRes.access_token) {
            return {
              name: jsonRes.access_token,
              email: credentials?.username as string,
            };
          }
          return null;
        } catch (err) {
          return null;
        }
      },
    }),
  ],
});

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  session: {
    strategy: 'jwt',
  },
  pages: {
    error: '/',
    signIn: '/',
    signOut: '/',
  },
  providers: [],
  callbacks: {
    async session({ session, token }) {
      // @ts-ignore
      session.accessToken = token.accessToken;
      return session;
    },
    async authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.indexOf('dashboard') > -1;
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('dashboard', nextUrl));
      }
      return true;
    },
    async jwt({ token, user }) {
      if (user) {
        token.accessToken = user.name;
      }
      return token;
    },
  },
} satisfies NextAuthConfig;

I get the error when logging in:

TypeError: Cannot read properties of undefined (reading 'errors')

If anyone has any suggestions on how I can fix it. In the Nextjs console nothing comes up.

Thanks!