Router throws exception when navigating between PermitAll and AnonymousAllowed views

[abdullahtellioglu]

Description of the bug

I have two views one is anonymous allowed, the other one requires login. When I try to navigate from anonymous to another one, a console errors are logged

Screen.Recording.2025-02-03.at.14.32.58.mov

.

Expected behavior

There should not be any console errors.

Minimal reproducible example

Create two views as below. Activate Copilot and click the links in Views & Routes panel

LoggedInOnly.java

@Route(value = "loggedin")
@PermitAll
public class LoggedInOnly extends VerticalLayout {

    public LoggedInOnly(AuthenticatedUser authenticatedUser) {
    }
}

LoginView.java

@AnonymousAllowed
@PageTitle("Login")
@Route(value = "login")
public class LoginView extends LoginOverlay implements BeforeEnterObserver {

    private final AuthenticatedUser authenticatedUser;

    public LoginView(AuthenticatedUser authenticatedUser) {
        this.authenticatedUser = authenticatedUser;
        setAction(RouteUtil.getRoutePath(VaadinService.getCurrent().getContext(), getClass()));
    }

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        if (authenticatedUser.get().isPresent()) {
            // Already logged in
            setOpened(false);
            event.forwardTo("");
        }

        setError(event.getLocation().getQueryParameters().getParameters().containsKey("error"));
    }
}

Versions

Hilla: 24.7.0.alpha9
Flow: 24.7.0.alpha9
Vaadin: 24.7.0.alpha6
Spring Boot: 3.4.2
Spring: 6.2.2
Spring Security: Enabled
Copilot: 24.7-SNAPSHOT
Frontend Hotswap: Enabled, using Vite
OS: aarch64 Mac OS X 14.7.1
Java: JetBrains s.r.o. 21.0.5
Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Java Hotswap: Java Hotswap is enabled
IDE Plugin: 1.4.6 IntelliJ

[Artur-]

Looks like a Flow issue

[caalador]

@Artur- What does copilot do/call when the route in the Views & Routes panel is clicked?

[Artur-]

It should be a standard link, nothing special

[mcollovati]

If I add a public view with a standard like (router-ignore) or a RouterLink, the browser is redirected to the login view and I don't get any error on the browser console.

However, when clicking the link on the Copilot panel, I can see several navigation requests from the client.
The first one is for the protected view (route="" in my example) and the int the server response there's a vaadin-navigate to login event fire instruction.
But the client instead immediately sends a navigation to the blank route, and the server again requests for a navigation to login.
This time, the client tries to navigate to login, but after getting the server response, it again sends a navigation request to blank path, and when processing the response the client-side error happens.

[mcollovati]

@Artur- did I get it right that the link on the Copilot panel is not a "normal" link, but it emits an event on the event bus that is handled with window.history.pushState and window.dispatchEvent(new PopStateEvent('popstate'));?

[Artur-]

It certainly seems so. I wonder why

[mcollovati]

I did a test replacing the code in the event bus navigate handler to fire a vaadin-router-go event and with this change the navigation from the side panel seems to work correctly.
However, I don't know if this can be considered a proper fix.
If you agree, I'd transfer the issue to the Copilot repository.

[Artur-]

Yes, the Copilot code as it is currently looks like some workaround for earlier React router integration issues in Flow. I don't know if

  window.history.pushState(state, '', data.detail.path);
  window.dispatchEvent(new PopStateEvent('popstate'));

is supposed to be a valid way to navigate, but it should not be needed for Copilot either

[Artur-]

Dispatching a vaadin-router-go event seems quite.. internal and does not work in a Hilla app, it seems

[mcollovati]

A normal anchor should work, but it looks like that currently the listener that intercept clicks on anchors is registered only when Flow is initialized.
So, for a Hilla/Hybrid app, it will not be initialized until you navigate to a Flow view.
I wonder if the listener can be registered somehow in index.tsx / index.ts and work with both React and Vaadin routers

[Artur-]

Would https://github.com/vaadin/flow/blob/main/flow-server/src/main/resources/com/vaadin/flow/server/frontend/vaadin-react.tsx be the correct place?

[mcollovati]

Is Vaadin router affected by the same issue?

EDIT: Looks like vaadin-router registers the listener in the constructor (https://github.com/vaadin/router/blob/main/src/router.ts#L157), so it probably works out-of-the-box (to be tested).

https://github.com/vaadin/router/blob/main/src/triggers/click.ts

[Artur-]

From Copilot point of view it is irrelevant as Vaadin router is not supported