Search code examples
vaadinvaadin23

Vaadin 23 restore tabs state after external authentication with IdP

I implemented layouts - MainLayout and JobsLayout with @ParentLayout(MainLayout.class)

The application looks like:

enter image description here

Currently I'm fully authenticated and accessed the path Jobs -> Post a Job Post a Job route requires from user to be fully authenticated. For authentication, I use Keycloak.

The issue is with not-authenticated user which would like to access Post a Job route. At this point, the system correctly forwards the user to Keycloak login page and then returns to /jobs/create route. Everything works fine except the tabs state is not restored:

As you may see from the picture below:

enter image description here

The Home and All Jobs tabs are selected.

Is there any way to select Jobs and Post a Job tabs instead? Such tabs are located in layouts and I don't know how to access such components from Post a Job view

Solution

  • 1. Question how to activate the tab

    You would need to add the location to the URL and implement BeforeEnterObserver. There you can then activate the correct tab.

    2. Question how to get the current URL

    UI.getCurrent().getPage()
               .executeJs("return window.location.href")
               .then(jsonValue -> System.out.println(jsonValue.asString()));