Search code examples
vaadinvaadin-flowvaadin23

Vaadin: Anchor sets internal URL in browser but does not navigate

In a LoginView in a Vaadin 23.1.0 application I've got an Anchor to navigate to Microsoft Azure Login URL: add(new Anchor("/oauth2/authorization/azure", "Login with MS Azure AD"));.

Problem: When I click that anchor / link then the URL in the browser (Firefox 101.0.1 and also Chromium 103) updates to http://localhost:8080/oauth2/authorization/azure, but the browser does not navigate.

Question: How can I get that anchor to navigate to the given target?

What I tried:

  1. When I click the anchor and then hit F5 it just works fine. (This is the workaround for the moment. And it shows that the URL is reachable.)
  2. When I change the href of that Anchor e.g. to "https://google.com", then it navigates.

Additional observations: When I click the anchor, there is a request from the browser to the Vaadin server with this request: {"csrfToken":"10c44508-3e55-455c-b4b1-86b7d2390f44","rpc":[{"type":"publishedEventHandler","node":1,"templateEventMethodName":"connectClient","templateEventMethodArgs":["flow-container-root-2521314","ROOT-2521314","oauth2/authorization/azure","",null],"promise":4}],"syncId":4,"clientId":4} and with this response: for(;;);[{"syncId":5,"clientId":5,"execute":[["Systemanmeldung","document.title = $0"],["Systemanmeldung","document.title = $0"],[false,[0,3],"return (function() { this.serverConnected($0)}).apply($1)"],[4,null,[0,1],"return (function() { this.$server['}p']($0, true, $1)}).apply($2)"]]}]

Solution

  • Use anchor.getElement().setAttribute("router-ignore", true); if you need your service to handle the given URL instead of the client-side router.