Docs

Documentation versions (currently viewingVaadin 24)

Login & Logout Links

How to create login and logout links or buttons using Control Center identity management security.

For users to login and logout, it can be useful to provide them with a link or button. This page explains how to do that in a Vaadin application when using the Identity Management feature in Control Center.

Adding Login

To add a login link or button to a Vaadin application, you’ll need to create a component that redirects users to the login page provided by Control Center — for when they click on the link or button. Here’s an example of how you might do that:

public class MainLayout extends AppLayout {

    public MainLayout() {
         /* <1> */
        Button loginButton = new Button("Login", event -> {
            getUI().ifPresent(ui -> ui.getPage().setLocation("/oauth2/authorization/control-center"));
        });

         /* <2> */
        Anchor loginLink = new Anchor("/oauth2/authorization/control-center", "Login");
        loginLink.setRouterIgnore(true);

        addToNavbar(loginButton, loginLink);
    }
}
  1. This part creates a login button.

  2. This creates a login link. You may not want to do both a button and a link, though.

Adding Logout

To add a logout link or button to a Vaadin application, you’ll need to create a component that triggers the logout process. Here’s an example of how to create a button, only:

public class MainLayout extends AppLayout {

    public MainLayout(@Autowired AuthenticationContext authenticationContext) {

        Button logoutButton = new Button("Logout", click -> authenticationContext.logout());

        addToNavbar(logoutButton);
    }
}

Deploy the Application

Deploy the application as described in Deploying a Vaadin Application with Control Center. Be sure to activate the Identity Management feature.