Spring Security with React doesn't work with custom login page-CodePudding

I'm trying to get Spring Security work with React and a custom login. It works fine if I use the default login page. Anytime I browse to a page that needs to be authenticated, it redirects to the login.

But as soon as I try to use a custom page by specifying loginPage("/login"), then I get the following errors in the browser

The files it is trying to load are the result of the index.html that is generated by doing a npm build. I have it set up so that Spring is serving the results of the build (the static and public files).

Here is my Spring security config

 @Override
    protected void configure(HttpSecurity http) throws Exception {

        //declares which Page(URL) will have What access type
        http
                .authorizeRequests()

                .antMatchers("/home").permitAll()
                .antMatchers("/login").permitAll()
                .antMatchers("/welcome").authenticated()
                .antMatchers("/admin").hasAuthority("ADMIN")
                .antMatchers("/emp").hasAuthority("EMPLOYEE")
                .antMatchers("/mgr").hasAuthority("MANAGER")
                .antMatchers("/common").hasAnyAuthority("EMPLOYEE", "MANAGER")

                // Any other URLs which are not configured in above antMatchers
                // generally declared authenticated() in real time
                .anyRequest().authenticated()

                //Login Form Details
                .and()
                .formLogin()
                .loginPage("/login")       <== If this line is commented, then it works
                .defaultSuccessUrl("/home", true)

                //Logout Form Details
                .and()
                .logout()
                .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))

                //Exception Details
                .and()
                .exceptionHandling()
                .accessDeniedPage("/accessDenied")
        ;
    }

CodePudding user response：

Is it because your .js files are not permitted through Spring Security Config?

http.authorizeRequests().antMatchers("/css/**","/js/**","/images/**")

When you don't specify loginPage("/login"), spring boot uses its default login page view which seemingly does not load any .js files.

CodePudding user response：

As suggested, I tried adding

http.authorizeRequests().antMatchers("/static/css/**", "/static/js/**)

This is what the layout of the files is in the SpringBoot target directory

It seems to go a little further, but I was still having the same problem. Then I found this page: https://medium.com/developer-rants/why-is-strict-mime-type-checking-blocking-the-static-serving-of-vue-frontend-files-4cbea1eedbd1. It refers to Vue, but I figured out how to set the homepage for React here: https://newbedev.com/react-js-running-npm-run-build-with-custom-paths

I added this to my package.json

  "homepage": "http://localhost:8080",

That seemed to allow set the path of the object correctly. I then enabled Spring Security and it worked