spring security + oauth2 + reactjs + restful http client

Question

I am doing spring boot 1.5+ security with auth2 authentication and reactjs. for http calls using restful http client. Authentication is working perfectly and I am successfully accessing data from resource server. The issue is logout code is not working and I am getting this error on console:

POST http://localhost:8080/logout 403 ()

error: "Forbidden" message: "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.

I am sharing my code also.

1) ReactJs code

  handleLogout = (e) => {
    client({
            method: 'POST',
            path: '/logout',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            }}).then(response => {
              console.log(response);
    });
  }

2) restful http client

'use strict';

// client is custom code that configures rest.js to include support for HAL, URI Templates,
// and other things. It also sets the default Accept request header to application/hal+json.

// get the rest client
var rest = require('rest');

// provides default values for the request object. default values can be provided for the method, path, params, headers, entity
// If the value does not exist in the request already than the default value utilized
var defaultRequest = require('rest/interceptor/defaultRequest');

// Converts request and response entities using MIME converter registry
// Converters are looked up by the Content-Type header value. Content types without a converter default to plain text.
var mime = require('rest/interceptor/mime');

// define the request URI by expanding the path as a URI template
var uriTemplateInterceptor = require('./uriTemplateInterceptor');

// Marks the response as an error based on the status code
// The errorCode interceptor will mark a request in error if the status code is equal or greater than the configured value.
var errorCode = require('rest/interceptor/errorCode');
var csrf = require('rest/interceptor/csrf');
// A registry of converters for MIME types is provided. Each time a request or response entity needs to be encoded or
// decoded, the 'Content-Type' is used to lookup a converter from the registry.
// The converter is then used to serialize/deserialize the entity across the wire.
var baseRegistry = require('rest/mime/registry');
var registry = baseRegistry.child();
registry.register('text/uri-list', require('./uriListConverter'));
registry.register('application/hal+json', require('rest/mime/type/application/hal'));

// wrap all the above interceptors in rest client
// default interceptor provide Accept header value 'application/hal+json' if there is not accept header in request
module.exports = rest
        .wrap(mime, { registry: registry })
        .wrap(uriTemplateInterceptor)
        .wrap(errorCode)
        .wrap(csrf)
        .wrap(defaultRequest, { headers: { 'Accept': 'application/hal+json' }});

3) application.yml of client application

debug: true

spring:
  aop:
    proxy-target-class: true


security:
  user:
    password: none
  oauth2:
    client:
      access-token-uri: http://localhost:9999/uaa/oauth/token
      user-authorization-uri: http://localhost:9999/uaa/oauth/authorize
      client-id: acme
      client-secret: acmesecret
    resource:
      user-info-uri: http://localhost:9999/uaa/user
      jwt:
        key-value: |
          -----BEGIN PUBLIC KEY-----
          MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgnBn+WU3i6KarB6gYlg40ckBiWmtVEpYkggvHxow74T19oDyO2VRqyY9oaJ/cvnlsZgTOYAUjTECjL8Ww7F7NJZpxMPFviqbx/ZeIEoOvd7DOqK3P5RBtLsV5A8tjtfqYw/Th4YEmzY/XkxjHH+KMyhmkPO+/tp3eGmcMDJgH+LwA6yhDgCI4ztLqJYY73gX0pEDTPwVmo6g1+MW8x6Ctry3AWBZyULGt+I82xv+snqEriF4uzO6CP2ixPCnMfF1k4dqnRZ/V98hnSLclfMkchEnfKYg1CWgD+oCJo+kBuCiMqmeQBFFw908OyFKxL7Yw0KEkkySxpa4Ndu978yxEwIDAQAB
          -----END PUBLIC KEY-----

zuul:
  routes:
    resource:
      path: /resource/**
      url: http://localhost:9000/resource
    user:
      path: /user/**
      url: http://localhost:9999/uaa/user

logging:
  level:
    org.springframework.security: DEBUG

4) CorsFilter configuration in authorization server

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {

        System.out.println("*********** running doFilter method of CorsFilter of auth-server***********");
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.addHeader("Access-Control-Allow-Headers", "x-auth-token, x-requested-with");
        response.addHeader("Access-Control-Max-Age", "3600");

        if (request.getMethod()!="OPTIONS") {
            try {
                chain.doFilter(req, res);
            } catch (IOException e) {
                e.printStackTrace();
            } catch (ServletException e) {
                e.printStackTrace();
            }
        } else {
        }
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

5) AuthrorizationServerConfigurerAdapter of authentication server

@Configuration
@EnableAuthorizationServer
public class OAuth2AuthorizationConfig extends AuthorizationServerConfigurerAdapter {

    @Autowired
    private AuthenticationManager authenticationManager;

    @Bean
    public @Autowired JwtAccessTokenConverter jwtAccessTokenConverter() throws Exception {

        System.out.println("*********** running jwtAccessTokenConverter ***********");

        // Setting up a JWT token using JwtAccessTokenConverter.
        JwtAccessTokenConverter converter = new JwtAccessTokenConverter();
        // JWT token signing key
        KeyPair keyPair = new KeyStoreKeyFactory(
                new ClassPathResource("keystore.jks"), "suleman123".toCharArray())
                .getKeyPair("resourcekey");
        converter.setKeyPair(keyPair);
        return converter;
    }


    @Override
    public void configure(ClientDetailsServiceConfigurer clients) throws Exception {

        System.out.println("*********** running configure(ClientDetailsServiceConfigurer clients)  ***********");

        clients.inMemory()
                .withClient("acme") // registers a client with client Id 'acme'
                .secret("acmesecret") // registers a client with password 'acmesecret'
                .authorizedGrantTypes("authorization_code", "refresh_token",
                        "password") // We registered the client and authorized the “password“, “authorization_code” and “refresh_token” grant types
                .scopes("openid") // scope to which the client is limited
                .autoApprove(true);
    }

    /**
     *  
     */
    @Override
    public void configure(AuthorizationServerEndpointsConfigurer endpoints)
            throws Exception {

        System.out.println("*********** running configure(AuthorizationServerEndpointsConfigurer endpoints)  ***********");

        // we choose to inject an existing authentication manager from the spring container
        // With this step we can share the authentication manager with the Basic authentication filter
        endpoints.authenticationManager(authenticationManager)
                .accessTokenConverter(jwtAccessTokenConverter());
    }

    @Override
    public void configure(AuthorizationServerSecurityConfigurer oauthServer)
            throws Exception {

        System.out.println("*********** running configure(AuthorizationServerSecurityConfigurer oauthServer)  ***********");

        oauthServer.tokenKeyAccess("permitAll()").checkTokenAccess(
                "isAuthenticated()");
    }
}

Answer 1

Finally got this working. What I have done to make it work:

1) I have installed 'react-cookie' library

npm install react-cookie --save

2) In my reactjs code I have imported react-cookie library and in method where I am using restful http client to generate logout request I am fetching Csrf-Token from cookie and sending it as request header.

  handleLogout = (e) => {

    client({
            method: 'POST',
            path: 'logout',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
              'X-Requested-With': 'XMLHttpRequest',
              'X-Csrf-Token': Cookie.load('XSRF-TOKEN')
            }
          }).then(response => {
              this.setState({authenticated: false});
              console.log(response);
    });
  }

3) In authorization server instead of using my custom Cors Filter class which I have mentioned in my question, now I am using Spring Cors Filter code

@Configuration
public class CorsFilterConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

4) In application.properties file of Authorization Server I have added this property, so CorsFilter will run before SpringSecurityFilterChain

security.filter-order=50