Anonymous user MainView/LoginView display problem with Flow UI

Hi!

I have prepared a small project that will help you solve your problem.
The main difference from your approach is that I used only one MainView and used a loginOverlay component instead of a LoginView.
Documentation: Login component | Vaadin components

First, you need to assign anonymous users access to the necessary view. This can be done using the @AnonymousAllowed annotation. I also added this annotation to the MainView. Here is an example of using this annotation in my PublicView:

@Route(value = "public-view", layout = MainView.class)
@ViewController("PublicView")
@ViewDescriptor("public-view.xml")
@AnonymousAllowed
public class PublicView extends StandardView {
}

Thus, these view became accessible without authorization.
In order not to write a lot of code here, I recommend that you see the attached project.

The locale is changed through the VaadinSession.getCurrent().setLocale() method.
To ensure that the locale is automatically applied to the components, I implemented the logic for reloading the MainView when the locale is changed.

    @Override
    public void localeChange(LocaleChangeEvent event) {
        if (localeInitialized) {
            UI.getCurrent().getPage().reload();
        }
    }

When you click the loginButton, an loginOverlay opens. If the credentials are entered correctly, the page will be reloaded and user will be authenticated:

    @Subscribe(id = "loginButton", subject = "clickListener")
    public void onLoginButtonClick(final ClickEvent<JmixButton> event) {
        loginOverlay.setOpened(true);
    }

    protected void onLogin(AbstractLogin.LoginEvent event) {
        try {
            loginViewSupport.authenticate(
                    AuthDetails.of(event.getUsername(), event.getPassword())
                            // select your locale here
                            .withLocale(userLocale.getValue())
                            .withRememberMe(false)
            );
            onLoginSuccess();
        } catch (final BadCredentialsException | DisabledException | LockedException | AccessDeniedException e) {
            log.warn("Login failed for user '{}': {}", event.getUsername(), e.toString());
        } finally {
            ((LoginOverlay) event.getSource()).close();
        }
    }

    protected void onLoginSuccess() {
        UI.getCurrent().getPage().reload();
    }

There is the example:
anonymous-access.zip (106.0 KB)

I hope my example will help implement your project.
Please note that this is not a complete implementation. Lots of things could be improved. This is just a base from which you can take a basic approach to create your ideal implementation.


P.S.

Also pay attention to examples of displaying elements in an iframe component:

Also, to display static resources for an anonymous user, you need to place them is the theme folder. Otherwise these resources will not available. To give access to src/main/resources you must additionally configure the security configuration.


Best regards,
Dmitriy