Spring microservices SSO with ReactJS - reactjs

Question

I'm working on single-sign-on implementation in my project with microservice architecture application, using spring-cloud-netflix. At the moment I have done with OAuth2 service and gateway service.
Here's my security config for gateway:
/**
* SSO security config.
*/
#Configuration
#EnableZuulProxy
#EnableOAuth2Sso
#EnableWebSecurity
public class SsoSecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
private OAuth2ClientAuthenticationProcessingFilter ssoFilter;
#Autowired
private AuthenticationEntryPoint authenticationEntryPoint;
#Autowired
private SsoLogoutSuccessHandler logoutSuccessHandler;
/**
* SSO http config.
*
* #param http configurer
* #throws Exception exception
*/
#Override
public void configure(HttpSecurity http) throws Exception {
http
// .cors().and()
.csrf().disable()
.authorizeRequests()
.antMatchers("/", "/test", "/favicon.ico", "/sockjs-node/**", "/static/**", "/*.js", "/*.jpg",
"/rest/**", "/uaa/**", "/backend/**",
"/users/**", "/files/**", "/roles/**").permitAll()
.anyRequest().authenticated().and()
// .exceptionHandling().authenticationEntryPoint(authenticationEntryPoint).and()
.logout().logoutSuccessHandler(logoutSuccessHandler)
.and()
.sessionManagement().maximumSessions(1)
.expiredUrl("/")
.maxSessionsPreventsLogin(false);
// http.addFilterAfter(ssoFilter, BasicAuthenticationFilter.class);
}
/**
* OAuth2 config.
*/
#Configuration
protected static class OAuth2Config {
#Bean
public OAuth2ClientAuthenticationProcessingFilter ssoFilter(
SsoLoginSuccessHandler ssoLoginSuccessHandler,
OAuth2ClientContext beaconOAuth2ClientContext,
RemoteTokenServices remoteTokenServices,
OAuth2ProtectedResourceDetails resourceDetails) {
OAuth2ClientAuthenticationProcessingFilter filter =
new OAuth2ClientAuthenticationProcessingFilter("/login");
filter.setRestTemplate(new OAuth2RestTemplate(resourceDetails,
beaconOAuth2ClientContext));
filter.setTokenServices(remoteTokenServices);
// filter.setAuthenticationSuccessHandler(new SavedRequestAwareAuthenticationSuccessHandler());
return filter;
}
//
// #Bean
// public CorsConfigurationSource corsConfigurationSource() {
// final CorsConfiguration configuration = new CorsConfiguration();
// configuration.setAllowedOrigins(ImmutableList.of("*"));
// configuration.setAllowedMethods(ImmutableList.of("HEAD",
// "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
// configuration.setAllowCredentials(true);
// configuration.setAllowedHeaders(
// ImmutableList.of("Authorization", "Cache-Control", "Content-Type"));
// final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
// source.registerCorsConfiguration("/**", configuration);
// return source;
// }
}
}
gateway yaml config
security:
oauth2:
client:
preEstablishedRedirectUri: http://localhost:3000/login
registeredRedirectUri: http://localhost:3000/login
accessTokenUri: http://localhost:10035/uaa/oauth/token
userAuthorizationUri: http://localhost:10035/uaa/oauth/authorize
clientId: react_app
clientSecret: react_app_secret
useCurrentUri: true
resource:
tokenInfoUri: http://localhost:10035/uaa/oauth/check_token
I'm bit confused, how i should authorize react app client, if it running on different port (webpack dev server, port 3000)?

Answer 1

One alternative is to setup a proxy using webpack, for example, in your webpack configuration add it like this:
devServer: {
contentBase: '/static',
historyApiFallback: true,
port: 3000,
compress: false,
inline: false,
hot: true,
host: '0.0.0.0',
proxy: {
'/api': { // <---- Intercept all calls to `/api`
target: 'http://localhost:8080', // <--- Your API server in a different port
changeOrigin: true,
secure: false,
},
},
},
The previous configuration setup a proxy, so whenever there's a request to /api, it will proxy the request to your server running in the other port.