spring boot and reactjs for frontend was working fine till i add security to the backend

spring boot and reactjs for frontend was working fine till i add security to the backend then, it stopped showing me this below info in the webbrowser.

static {
        todos.add(new Todo(++idCounter, "user1", "learn  react", new Date(), false));
        todos.add(new Todo(++idCounter, "user1", " fullstack developer", new Date(), false));
        todos.add(new Todo(++idCounter, "user1", "software developer", new Date(), false));
    }

the error i get is this:

xhr.js:177 GET http://localhost:8080/users/user1/todos 401

here is the frontend:

import axios from "axios"

class HelloWorldService{

    executeHelloWolrdService(){
        return axios.get('http://localhost:8080/hello-world')
       
    }

    executeHelloWolrdServiceBean(){
        return axios.get('http://localhost:8080/hello-world-bean')
       
    }

    executeHelloWolrdServicePathVariable(name){
        let username = 'user1'
       let password = 123
       let basicAuthHeader ='Basic ' + window.btoa(username+ ':' +password);
     

       
        return axios.get(`http://localhost:8080/hello-world/path-variable/${name}`, 

          {
           headers : {
                authorization: basicAuthHeader
               
            }
         }   
        );  
    }
}

    export default new HelloWorldService()

lastly here is my security class:

@Configuration
@EnableWebSecurity
public class SpringSecurityConfigurationBasicAuth extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception{
        
        http
        
        .csrf().disable()
        .authorizeRequests()
        .antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
        
        .anyRequest().authenticated()
        .and()
        //.formLogin().and()
        .httpBasic();
        
            
            
    }
}

update:

It did work, thank you very much!

can you please tell me how to make these below codes to work with your code? when i put them together it does work:

.csrf().disable()
    .authorizeRequests()
    .antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
    
        .anyRequest().authenticated()
        .and()
        //.formLogin().and()
    .httpBasic();

Answer

You need to add config about authentication type:

public class ServiceConfig extends WebSecurityConfigurerAdapter {
 @Override
 protected void configure(final HttpSecurity http) throws Exception {
   http.httpBasic();
  }
}