Spring Security httpBasic 404 for correct credentials

In my react app I call spring security basic login:

        e.preventDefault();
        const username = states.username;
        const password = states.password;

        fetch('/api/login', {
            method: 'post',
            headers: {
                Authorization: 'Basic ' + window.btoa(username + ':' + password),
            },
        }).then((resp) => {
            console.log(resp);

            return resp.text();
        });

SecurityConfig.java:

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .antMatchers(HttpMethod.POST, "/api/login").authenticated()
                .and()
                .httpBasic();
    }
}

The problem is, when entering correct credentials on login page (spring security's default: username "user" and generated password), the response i get in console is:

POST https://localhost:3000/api/login 404 (Not Found)
Response {type: "basic", url: "https://localhost:3000/api/login", redirected: false, status: 404, ok: false, …}
body: (...)
bodyUsed: true
headers: Headers {}
ok: false
redirected: false
status: 404
statusText: "Not Found"
type: "basic"
url: "https://localhost:3000/api/login"
__proto__: Response

when entering incorrect credentials basic authentication pop-up shows,

and no credentials are treated as valid – the pop-up keeps reappearing after login attempts.

What am I missing?

I think it's because you're securing the login endpoint, so you've created a ficious circle - you have to be authenticated to authenticate.

Change your antMatchers line to:

.antMatchers("/api/login").permitAll()
.and()
.formLogin()
.loginProcessingUrl("/api/login")

</details>