I am implementing Spring Security in my full stack web application but there is a problem I'm running into.
I am using a React front-end with a custom login form and it works just fine when I fill in correct credentials. But when I fill in wrong credentials, it gives me a window alert from by back-end with once again the login form. I understand why this is happening, because it is also happening when I try to visit my back-end directly. But there must be a way to disable this right? See the screenshot below:
My Spring Security configuration:
@Override
protected void configure(HttpSecurity http) throws Exception {
http.
csrf().disable()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
.antMatchers("/").permitAll()
.anyRequest().authenticated()
.and().httpBasic();
}
My axios request in React:
if(document.getElementById("username").value !== "" && document.getElementById("password").value !== "") {
axios.get(baseUrl + "users/name/" + document.getElementById("username").value , {
withCredentials : true,
headers : {
authorization : 'Basic ' + window.btoa(document.getElementById("username").value + ':' + document.getElementById("password").value)
}}).then(response => {
localStorage.setItem('creds', window.btoa(document.getElementById("username") + ":" + document.getElementById("password")));
console.log("Credentials stored in local storage.");
console.log(response.data);
window.location.replace("/");
}
).catch((e) => {
window.alert("Incorrect username or password. Please try again!");
}
)
} else {
window.alert("Please fill in username and password.")
}
As you can see I'm also catching any error that can occur and sending an alert myself. I do get this custom alert, but I also still get the login popup. Any ideas?
