Login with Spring Security OAuth2 and Vaadin flow 21

Question

I'm trying to create a Webinterface for my Discord Bot and would love to add a "login with Discord" method. I've created two view to test the OAuth login system.

The first view is the index / home view which contains the "login with discord" button.

@PageTitle("Home")
@Route(value = "")
@AnonymousAllowed
public class HomeView extends VerticalLayout {
    private final OAuth2AuthorizedClientService clientService;

    public HomeView(OAuth2AuthorizedClientService clientService) {
        this.clientService = clientService;
        setSpacing(false);
        setPadding(false);
        add(navbar());
        add(body());
    }

    private Component navbar() {
        HorizontalLayout root = new HorizontalLayout();
        root.setWidthFull();
        root.setAlignItems(Alignment.CENTER);
        Span name = new Span("Unity");
        name.getStyle().set("padding-left", "1rem");
        root.add(name);

        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();

        if (!(authentication instanceof OAuth2AuthenticationToken)) {
            Button loginButton = new Button();
            Image discordLogo = new Image("images/discord.svg", "discord_logo.png");
            discordLogo.getStyle().set("padding-top", "0.5rem");
            loginButton.setIcon(discordLogo);
            loginButton.setText("Login with Discord");
            loginButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
            loginButton.getStyle().set("padding-right", "1rem");
            loginButton.addClassName("toolbar");
            Anchor anchor = new Anchor("/oauth2/authorization/discord", loginButton);
            anchor.getElement().setAttribute("router-ignore", true);
            root.add(anchor);
        } else {
            Notification.show("Logged In");
            OAuth2AuthenticationToken token = (OAuth2AuthenticationToken) authentication;
            OAuth2AuthorizedClient client = this.clientService.loadAuthorizedClient(token.getAuthorizedClientRegistrationId(), token.getName());
            String accessToken = client.getAccessToken().getTokenValue();
            Notification.show("Logged in with token: " + accessToken);
        }

        root.setFlexGrow(1, name);
        root.addClassNames("contrast-5pct");

        return root;
    }


    private Component body() {
        VerticalLayout root = new VerticalLayout();
        Image img = new Image("images/empty-plant.png", "placeholder plant");
        img.setWidth("200px");
        root.add(img);

        root.add(new H2("This place intentionally left empty"));
        root.add(new Paragraph("It’s a place where you can grow your own UI 🤗"));

        root.setSizeFull();
        root.setJustifyContentMode(JustifyContentMode.CENTER);
        root.setDefaultHorizontalComponentAlignment(Alignment.CENTER);
        root.getStyle().set("text-align", "center");

        return root;
    }
}

and the other view is the view after the user has successfully authenticated.

@Route("test")
public class TestView extends VerticalLayout {
    public TestView() {
        add("It Works! :D");
    }
}

My current spring oauth config looks like this:

spring:
  security:
    oauth2:
      client:
        registration:
          discord:
            client-id: <id>
            client-secret: <secret>
            clientAuthenticationMethod: post
            authorizationGrantType: authorization_code
            scope:
              - identify
              - guilds
            redirectUri: "{baseUrl}/login/oauth2/callback/{registrationId}"
            clientName: Discord-Client
        provider:
          discord:
            authorizationUri: https://discordapp.com/api/oauth2/authorize
            tokenUri: https://discordapp.com/api/oauth2/token
            userInfoUri: https://discordapp.com/api/users/@me
            usernameAttribute: username

My Spring Security config looks like this:

@Configuration
public class SecurityConfig extends VaadinWebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/oauth2/authorization/discord", "/login/oauth2/callback/**").permitAll();
        http.oauth2Login(oauth -> {
            oauth.defaultSuccessUrl("/test");
            })
            .logout(logout -> {
                logout.logoutSuccessUrl("/");
            });

        super.configure(http);
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
        web.ignoring().antMatchers(
            "/images/**"
        );
    }

    @Bean
    public RestOperations restOperations() {
        return new RestTemplate();
    }

    @Bean
    @Override
    protected AuthenticationManager authenticationManager() throws Exception {
        return super.authenticationManager();
    }
}

I've tried to implement the solution form this post: Spring Oauth2 client with Google provider keep asking for authentication but it keeps redirecting me to the home view and the user isn't authenticated.

Am i missing something to authenticate the User!?

Thank you in advance for any help!

Answer 1

I've solved my problem. My redirectUri was wrong ^^"

After changing it from {baseUrl}/login/oauth2/callback/{registrationId} to {baseUrl}/login/oauth2/code/{registrationId} it worked without any problem