Vaadin 10 (Only JAVA) Spring Security Custom Login Page

Since Vaadin 13, there is the [LoginOverlay]
(https://vaadin.com/components/vaadin-login/java-examples) class, which takes care of all this. Very easy to use and java-only, and it’s translatable also.

Kaspar Scherrer:
Since Vaadin 13, there is the [LoginOverlay]
(https://vaadin.com/components/vaadin-login/java-examples) class, which takes care of all this. Very easy to use and java-only, and it’s translatable also.

thanks for reply Kaspar , Is there any working example with spring security ?.

LoginOverlay has samples for component only.

LoginOverlay goes well together with Spring Security, all you have to do is set the action of the LoginOverlay: loginOverlay.setAction("login");

Together with this security configuration it already works for me:

 @Override
 protected void configure(HttpSecurity http) throws Exception {
     ...
	 .and()
	 .formLogin()
	 .loginPage("/login")).permitAll()
	 .loginProcessingUrl("/login")
	 .failureUrl("/login?error")
	 ...
 } 

Here is my working LoginView class (you can even leave out the LocaleChangeObserver which is used here to re-translate the form if user changes locale):

@Route("login")
@PageTitle("MyApp Login")
@HtmlImport("styles/shared-styles.html")
public class LoginView extends VerticalLayout implements LocaleChangeObserver, AfterNavigationObserver {

    private LoginOverlay login = new LoginOverlay();

    public LoginView(){
        login.setI18n(createTranslatedI18N());
        login.getElement().setAttribute("no-forgot-password", true);
        login.setAction("login");
        login.setOpened(true);

        getElement().appendChild(login.getElement());
    }

    private LoginI18n createTranslatedI18N() {
        LoginI18n i18n = LoginI18n.createDefault();
        i18n.setHeader(new LoginI18n.Header());
        i18n.setForm(new LoginI18n.Form());

        i18n.getHeader().setTitle(getTranslation(MY_APP_NAME.getKey());
        //i18n.getHeader().setDescription("");
        i18n.getForm().setSubmit(getTranslation(LOGIN.getKey()));
        i18n.getForm().setTitle(getTranslation(LOGIN.getKey()));
        i18n.getForm().setUsername(getTranslation(USERNAME.getKey()));
        i18n.getForm().setPassword(getTranslation(PASSWORD.getKey()));
        i18n.getErrorMessage().setTitle(getTranslation(LOGIN_ERROR_TITLE.getKey()));
        i18n.getErrorMessage().setMessage(getTranslation(LOGIN_ERROR.getKey()));
        i18n.setAdditionalInformation(getTranslation(LOGIN_INFO.getKey()));
        return i18n;
    }

    @Override
    public void localeChange(LocaleChangeEvent event) {
        login.setI18n(createTranslatedI18N());
    }

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        login.setError(
                event.getLocation().getQueryParameters().getParameters().containsKey("error"));
    }
}

Thanks for the quick reply. I will try this immediately and post result.

Edit : Thank you it finally works.

i used security config files which is exactly same Bakery demo and your codes.

Hey,

we added a Spring Security tutorial: https://vaadin.com/tutorials/securing-your-app-with-spring-security

It is still work in progress and I would like to collect some feedback before extending it. As it is based on Vaadin 12 it does not contain an example with the new login component, yet.

Cheers,
Paul

Hey Paul

Thanks for these tutorials, I think you explained the first steps really well and your code explanations are definitely helpful.
It is clear that this tutorial is not supposed to be a very detailed and specific piece but more like a beginner’s guide. I like that.

It’s nice that you address both Polymer and Java-only approaches to the Login View. I understand how basing on Vaadin 12 does not allow you to use the new LoginOverlay, but I think that is very sad. I really like the new LoginOverlay it makes everything soo much simpler. Maybe you can drop a hint in there?

I feel like there is one important part missing from this tutorial, and that is what is an AuthenticationProvider (or UserDetailsService) and how to set it? Securing the application with Spring Security does not help much if you don’t allow any users into the application :wink: Cheers

Thanks a lot for the valuable feedback!

It’s nice that you address both Polymer and Java-only approaches to the Login View. I understand how basing on Vaadin 12 does not allow you to use the new LoginOverlay, but I think that is very sad. I really like the new LoginOverlay it makes everything soo much simpler. Maybe you can drop a hint in there?

Yes, I also see an urgent need to add a tutorial about the Login component.

I feel like there is one important part missing from this tutorial, and that is what is an AuthenticationProvider and how to set it? Securing the application with Spring Security does not help much if you don’t allow any users into the application :wink:

You are right, I do not mention the actual user configuration at all. It is only in the code examples:

	@Bean
	@Override
	public UserDetailsService userDetailsService() {
		UserDetails user =
				User.withUsername("user")
						.password("{noop}password")
						.roles("USER")
						.build();

		return new InMemoryUserDetailsManager(user);
}

Would it be enough to just add this snippet and discuss it? Of course, it is only for demonstration purposes.

Would it be enough to just add this snippet and discuss it?

IMO that would be the wrong move. your whole tutorial helps beginners set up an actual spring security implementation. This code is not usable in a real application, this shows how to fake it - better explain how to do the real thing. I agree that you should probably not make a full blown explanation of UserDetailServices / AuthenticationProviders, but give them some code to actually use. maybe this (taken from bakery app Vaadin 13):

private final UserDetailsService userDetailsService;

@Autowired
public SecurityConfiguration(UserDetailsService userDetailsService) {
	this.userDetailsService = userDetailsService;
}
	
/**
* Registers our UserDetailsService and the password encoder to be used on login attempts.
*/
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
	super.configure(auth);
	auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder);
}

along with the UserDetailsServiceImpl class. It is probably best to focus on using a UserDetailsService but please do mention the possiblity of using an AuthenticationProvider and maybe what the difference is?

Sounds reasonable, yes. Will take some time but I will add it!

Glad to see so many major improvements!

I am having an issue though, but I feel it’s something to do with my SecurityConfiguration

“Invalid JSON Response from server:” appears in the top right hand corner

Edit: Looks like SecurityUtils.java or an alternate implementation is mandatory

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	
	protected void configure(HttpSecurity http) throws Exception {
		//http.csrf().disable().authorizeRequests().anyRequest().permitAll();
		
		http.csrf().disable()
		.authorizeRequests()
		.requestMatchers(SecurityUtils::isFrameworkInternalRequest).permitAll()
		.anyRequest()
		.authenticated().and()
		.formLogin().loginPage("/login").permitAll()
		.loginProcessingUrl("/login")
		.failureUrl("/login?error")
		.and().logout().logoutSuccessUrl("/");
	}
	
	@Override
	public void configure(WebSecurity web) throws Exception {
		web.ignoring().antMatchers(
				"/VAADIN/**",
				"/favicon.ico",
				"/robots.txt",
				"/manifest.webmanifest",
				"/sw.js",
				"/offline-page.html",
				"/frontend/**",
				"/webjars/**",
				"/frontend-es5/**",
				"/frontend-es6/**");
	}

}

Figure I should post this here.
If anyone needs help implementing Spring Security, here is an example I worked on a while back
https://github.com/mlizbeth/Security