We want to make registration and login using a popup window on React. It seems that the layout was done, but the question is how to link authorization and the popup window. How many guides did not look - everywhere in the Security Config
they indicate a redirect to the /login
page, from where they are waiting for a response about the entered data. The popup window does not have any unique address(the address does not change when the window is called) and it can be called from any page. Is there any way to associate registration with a popup window?
As i find out, it does not matter whether it is a popup window or a separate page for registration
On the React
side it is necessary to call POST
request:
import axios from "axios";
const onRegistration = () =>{
axios({
method: "POST",
url: "/auth/register",
{
login: login,
password: password
}}).then((resp) => {
/*do something if all good*/
}).catch((error) => {
/*If registration failed*/
});
}
On backend we needed controller and endpoint where the request will go:
@CrossOrigin(origins = "frontend url")
@RequestMapping("/auth")
@RestController
public class AuthController {
@PostMapping("/register")
public ResponseEntity<Ur class> register(@RequestBody RegistrationDTO registrationDTO){
/*do something...*/
}
}
Also we need to setup SecurityConfig and CORS.
SecurityConfig
:
@Configuration
@EnableWebSecurity
public class WebSecurityConfig implements WebMvcConfigurer {
private final UserAuthenticationEntryPoint userAuthenticationEntryPoint;
private final UserAuthProvider userAuthProvider;
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http.exceptionHandling().authenticationEntryPoint(userAuthenticationEntryPoint)
.and()
.addFilterBefore(new JwtAuthFilter(userAuthProvider), BasicAuthenticationFilter.class)
.csrf().disable()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.authorizeHttpRequests((req) -> req
.requestMatchers(HttpMethod.POST, "/auth/login", "/auth", "/auth/register").permitAll()
.anyRequest().authenticated()
);
return http.build();
}
}
CorsFilter
:
@Configuration
@EnableWebMvc
public class WebConfig {
@Bean
public FilterRegistrationBean corsFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.addAllowedOrigin("frontend url");
corsConfiguration.setAllowedHeaders(Arrays.asList(
HttpHeaders.AUTHORIZATION,
HttpHeaders.CONTENT_TYPE,
HttpHeaders.ACCEPT
));
corsConfiguration.setAllowedMethods(Arrays.asList(
HttpMethod.GET.name(),
HttpMethod.POST.name(),
HttpMethod.PUT.name(),
HttpMethod.DELETE.name()
));
corsConfiguration.setMaxAge(3600L);
source.registerCorsConfiguration("/**", corsConfiguration);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(-102); // is needed in order to make at beginning
return bean;
}
}