Redirecting not working with React UX

[daniel.peci]

I am using the Lexik Bundle to secure my API (API Platform), as well as to authenticate users via login (Symfony UX React). However, the redirection on custom authentication is not working. I receive a 200 status code and the "view" in response looks good, but nothing happens (it stays on the login page). Any ideas?

AuthenticationSuccessListener.php

class AuthenticationSuccessListener extends AuthenticationSuccessHandler
{
    private RouterInterface $router;

    public function __construct(
        RouterInterface $router
    ) {
        $this->router = $router;
    }

    public function onAuthenticationSuccess(Request $request, TokenInterface $token): Response
    {
        return new RedirectResponse($this->router->generate('app_management'));
    }
}

security.yml

security:
    # https://symfony.com/doc/current/security.html#registering-the-user-hashing-passwords
    password_hashers:
        Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface: 'auto'
    # https://symfony.com/doc/current/security.html#loading-the-user-the-user-provider
    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email

    firewalls:
        login:
            pattern: ^/api/login
            stateless: true
            json_login:
                check_path: /api/login_check
                username_path: email
                success_handler: app.listener.authentication_success_response
                failure_handler: lexik_jwt_authentication.handler.authentication_failure


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


            # activate different ways to authenticate
            # https://symfony.com/doc/current/security.html#the-firewall

            # https://symfony.com/doc/current/security/impersonating_user.html
            # switch_user: true

    # Easy way to control access for large sections of your site
    # Note: Only the *first* access control that matches will be used
    access_control:
        - { path: ^/api/login, roles: PUBLIC_ACCESS }
        - { path: ^/api,       roles: IS_AUTHENTICATED_FULLY }

services.yml

    app.listener.authentication_success_response:
            class: App\Listeners\AuthenticationSuccessListener
            tags:
                - { name: kernel.event_listener, event: lexik_jwt_authentication.handler.authentication_success, method: onAuthenticationSuccess }

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 = (event) => {
        event.preventDefault();
        axios.post(
            'https://localhostindex.php/api/login_check',
            {email: email, password: password},
            {
                headers: {
                    'Content-Type': 'application/ld+json'
                }
            }
        )
            .then(() => {
                console.log('good');
            })
            .catch(() => {
                console.log('bad');
            });
    };
    <form method="post" 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}
        />
        <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Login
        </button>
    </form>

Controller (Where I want to redirect)

    #[Route('/management', name: 'app_management')]
    public function index(): Response
    {
        return $this->render('management/index.html.twig', [
            'controller_name' => 'ManagementController',
        ]);
    }

View

{% extends 'base.html.twig' %}

{% block body %}
    <div {{ react_component('Management/Management')}}></div>
{% endblock %}

[Simon André]

Seems logic to me, with the axios.post(...) request doing nothing but console.log, no ?

But in general i guess this is more a question to ask in the lexik_jwt_authentication bundle no ? I don't see how this could be caused by symfony/ux-react .. or maybe i missed something ?

[daniel.peci]

"I have also asked the question there. I thought I might find developers here who have encountered a similar case, integrating JWT Login with React / Symfony.

To clarify further, I want the user to be able to log in via a Login Form (which I have built with React). The login_check is an API endpoint that handles authentication. If the user exists, it returns a token in response with a status code of 200. When this happens, I want to redirect the user to the dashboard. Thanks for your help tho!