reactjsspring-mvcspring-securitypopuppopupwindow

SignUp/SignIn using popup window React + Spring


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?


Solution

  • 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;
        }
    }