reactjs with proxy not getting anonymous session from spring boot backend

Question

I'm trying to use create-react-app to start the frontend for my spring-boot project.

I use redis to store sessions.

For some reason I actually need to enable session generation for anonymous users.

The following code is my security config for spring boot:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //@formatter:off
        http
            .formLogin()
                .loginPage("/login")
                    .permitAll()
                .loginProcessingUrl("/form-login")
                .and()
            .cors()
                .and()
            .csrf()
                .disable()
            .authorizeRequests()
                .antMatchers("/restricted/**")
                    .authenticated()
                .antMatchers("/**")
                    .permitAll()
                .and()
           .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.ALWAYS);
        //@formatter:on
    }
}

I've tested this by having a very simple index.html inside the "static" folder under my spring-boot project. Then I go to " http://localhost:8080 " and I saw the session cookie.

Then I removed "index.html" file and start the react app with proxy config. By default the new url is " http://localhost:3000 ". I do see the default reactjs startup page but I no longer get any session cookies.

My proxy setting in "package.json" for my create-react-app is as follows:

"proxy": "http://localhost:8080"

I also tested that I can still get session cookie only if I directly go to " http://localhost:8080 " instead of port 3000.

Any help is appreciated. Thanks so much in advance.

Answer 1

Okay people, after waiting for a couple days without any answers I did some research myself and found the answer. I decided to post the answer here in case other people having the same issue.

The issue with create-react-app proxy is that it is a forward proxy. So the session cookie doesn't really work well with forward proxy. Sadly there is no easy solution solving this issue but there is a workaround.

As I mentioned above, I can for sure get the session cookie by directly accessing the backend url. So if I want to get the session cookie by using the proxy, I should put some code in the frontend to access the backend first and then put the session cookie in the header whenever the app starts. Then keep monitoring the frontend and reacquire the session whenever it expires.

For the best practice, the backend should really have a mock service which has no session, no login and no tokens but mocked data. Because the frontend doesn't really care about how session, access token or login works, these are the backend jobs. The frontend just need to get the data and then display the data.

But in reality having a mock server may take time and it is not worth doing that for every thing case.

So if you do not want to write the mock server, you either go with proxy but have a little hack in your frontend to actually acquire the session. Or you build the entire frontend app and put it under the "static" folder in your spring boot app.

For me I would rather separate the frontend and backend rather than putting them all together.