React x Symfony x JWT: The key "email" must be a string, "NULL" given

[danielpeci]

Hey,

I am building an App with Symfony 6.4, with API Platform, Lexik JWT Bundle, and in the Frontend React & Vite.
I've successfully secured my API with JWT, which works perfectly and now I am aiming to implement a user login that redirects to the dashboard.

However, I'm facing an issue: "The key 'email' must be a string, 'NULL' given." I've found a similar thread, but no solution was provided. Any ideas? Did I configured something wrong? Or is there a better way, to implement login with react and jwt bundle? Thanks for the help

security.yml

security:
  enable_authenticator_manager: true
  password_hashers:
    Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface: 'auto'
  providers:
    app_user_provider:
      entity:
        class: App\Entity\User
        property: email

  firewalls:
    dev:
      pattern: ^/{_{profiler|wdt}}/
      security: false

    login:
      pattern: ^/api/login
      stateless: true
      form_login:
        check_path: /api/login_check
        username_parameter: email
        password_parameter: password
        default_target_path: app_dashboard
        success_handler: lexik_jwt_authentication.handler.authentication_success
        failure_handler: lexik_jwt_authentication.handler.authentication_failure

    api:
      pattern:   ^/api/
      stateless: true
      jwt: ~

  access_control:
    - { path: ^/api/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
    - { path: ^/api,       roles: IS_AUTHENTICATED_FULLY }


when@test:
  security:
    password_hashers:
      Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface:
        algorithm: auto
        cost: 4
        time_cost: 3
        memory_cost: 10

lexik_jwt_authentication.yml

lexik_jwt_authentication:
    secret_key: '%env(resolve:JWT_SECRET_KEY)%'
    public_key: '%env(resolve:JWT_PUBLIC_KEY)%'
    pass_phrase: '%env(JWT_PASSPHRASE)%'
    token_ttl: 3600

    api_platform:
        check_path: /api/login_check
        username_path: email
        password_path: security.credentials.password

Login.jsx

const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const handleEmailChange = (e) => setEmail(e.target.value);
    const handlePasswordChange = (e) => setPassword(e.target.value);

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post(
                'https://localhost/index.php/api/login_check',
                {email, password},
                {
                    headers: {
                        'Content-Type': 'application/json',
                    },
                }
            );
            console.log('Login successful:', response.data);
        } catch (error) {
            console.error('Error during login:', error);
        }
    };
return (
    <form onSubmit={handleSubmit}>
        <Input
            type="email"
            variant="bordered"
            size="lg"
            label="Email"
            placeholder="Enter your email"
            labelPlacement="outside"
            className="pt-5 pb-5"
            value={email}
            id="email"
            name="_email"
            onChange={handleEmailChange}
        />
        <Input
            type="password"
            variant="bordered"
            size="lg"
            label="Password"
            placeholder="Enter your password"
            labelPlacement="outside"
            className="pt-5 pb-12"
            value={password}
            id="password"
            name="_password"
            onChange={handlePasswordChange}
        />
        <CustomButton label="Login" type="submit"/>
    </form>
)       

The interesting part is, that on the request email and password are not empty at all

{"email":"[email protected]","password":"test"}