Managing timeouts and errors in a Spring and Vue login systemIn this system,

Question

Managing timeouts and errors in a Spring and Vue login systemIn this system,

I am currently working on developing a back-end using Spring and a front-end with Vue. Both projects are separate but running on the same machine. I have managed to resolve or disable all cors, csrf, and login issues except for one that has left me completely puzzled.

Here is an excerpt from my SecurityConfig.java file in the Spring project:

(Code snippet goes here)

And from my LoginController.java file:

(Code snippet goes here)

In my Vue side, I have an axios call within the API:

(Code snippet goes here)

The issue arises when I provide unauthorized credentials through the axios call, leading to a timeout error instead of displaying relevant information about the error:

Error: timeout of 1000ms exceeded
    at createError (createError.js?2d83:16)
    at XMLHttpRequest.handleTimeout (xhr.js?b50d:95)

Furthermore, there is a strange behavior observed in Vue where an odd alert form appears before the timeout error, causing confusion and frustration.

If anyone can provide some guidance on where I could start troubleshooting this issue, it would be greatly appreciated as I am currently feeling quite baffled.

UPDATE1

Upon further investigation, it seems that the problem lies within the axios call, specifically with the withCredentials: true option. Enabling this option was intended to handle session cookie management seamlessly. However, disabling it results in normal login behavior without session management, while enabling it triggers the undesirable alert form that I cannot seem to rectify.

java spring vue.js

Answer 1

Answer №1

When it comes down to it, the issue arises when axios sends a request to the API with an incorrect username and/or password. The server responds with a 401 error code and sets the WWW-Authenticate header to Authentication: Basic realm.

Interestingly, Google Chrome takes it upon itself to prompt the user until axios times out in this situation.

To handle this more effectively, you can change either the status code (e.g., to 400 or 403) or modify the authentication part in the WWW-Authenticate header while keeping the 401 code (indicating an unauthorized request).

The following snippet demonstrates a simple authentication tweak added to my spring's httpBasic():

@Override
protected void configure(final HttpSecurity http) throws Exception {

    http
        .authorizeRequests()
            [...]
            .httpBasic().authenticationEntryPoint(new BasicAuthenticationEntryPoint() {

                { setRealmName("codrev"); }

                @Override
                public void commence(HttpServletRequest request, HttpServletResponse response,
                        AuthenticationException authException) throws IOException {

                    response.setStatus(HttpStatus.UNAUTHORIZED.value());

                    response.setHeader("WWW-Authenticate", getRealmName());
                    response.setHeader("Accept", "application/json, text/plain, */*");
                    response.setHeader("Content-Type", "application/json;charset=utf-8");
                    response.setHeader("cache-control", "no-cache, no-store, max-age=0, must-revalidate");

                    Map<String, Object> data = new HashMap<String, Object>();
                    data.put("logged", false);

                    response.getOutputStream().println(new ObjectMapper().writeValueAsString(data));
                }
            })
    ;
}

!! Avoid calling

super.commence(request, response, authException)

as it leads to redundant response modifications. !!

Answer 2

When it comes down to it, the issue arises when axios sends a request to the API with an incorrect username and/or password. The server responds with a 401 error code and sets the WWW-Authenticate header to Authentication: Basic realm.

Interestingly, Google Chrome takes it upon itself to prompt the user until axios times out in this situation.

To handle this more effectively, you can change either the status code (e.g., to 400 or 403) or modify the authentication part in the WWW-Authenticate header while keeping the 401 code (indicating an unauthorized request).

The following snippet demonstrates a simple authentication tweak added to my spring's httpBasic():

@Override
protected void configure(final HttpSecurity http) throws Exception {

    http
        .authorizeRequests()
            [...]
            .httpBasic().authenticationEntryPoint(new BasicAuthenticationEntryPoint() {

                { setRealmName("codrev"); }

                @Override
                public void commence(HttpServletRequest request, HttpServletResponse response,
                        AuthenticationException authException) throws IOException {

                    response.setStatus(HttpStatus.UNAUTHORIZED.value());

                    response.setHeader("WWW-Authenticate", getRealmName());
                    response.setHeader("Accept", "application/json, text/plain, */*");
                    response.setHeader("Content-Type", "application/json;charset=utf-8");
                    response.setHeader("cache-control", "no-cache, no-store, max-age=0, must-revalidate");

                    Map<String, Object> data = new HashMap<String, Object>();
                    data.put("logged", false);

                    response.getOutputStream().println(new ObjectMapper().writeValueAsString(data));
                }
            })
    ;
}

!! Avoid calling

super.commence(request, response, authException)

as it leads to redundant response modifications. !!

Managing timeouts and errors in a Spring and Vue login systemIn this system,

UPDATE1

Answer №1

Similar questions

What is the method for retrieving the index of an array from an HTML element?

Encountering difficulties inputting text in email body on Selenium using Java

It is not possible to make a comparison between two Strings within a JSP file

`I encountered difficulty in finding the radio button element using Selenium WebDriver`

During the compilation process, V8Js encountered an error (ReferenceError) on line 9272, specifying that the

Localization translation in a user interface

How to convert Firebase snapshot JSON data to text format instead of an object in Vue.js

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

Vue: Do not process property until axios response

The type 'WebDriver' from Selenium cannot be resolved, and the type 'FirefoxDriver' cannot be resolved as well. This is not a duplicate issue

Vue components failing to render in Laravel application

retrieve a property value using a Vue directive

Flask Blueprints cannot overwrite the static path

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Create a loop in Vue.js 3 without the need for a query

Tips on integrating data from Vuex into your component

choose a selection hopscotch

Display the value in Vue.js as a price format while maintaining it as an integer

Mastering Inter-Composable Communication in Vue 3: A Guide

Elements are automatically removed from default.vue once they have been compiled in Nuxt