Display of error message with Primefaces For spring security authentication

[Steve Dev]

I would like to integrate validation for spring security with Primefaces, I wanted to display an error message during authentication. The message is displayed with the following code using JSF:

<p:outputLabel value="Login failed!" styleClass="red"
rendered="${!empty param['error']}" />

How can we only use primefaces to display this message knowing that the message display is done with the control p-message

Thanks in advance.

[Tim Holloway]

First, check to see if Spring Security is doing validation all by itself or if it's hooked into JEE standard security. In the case of JEE standard security, you'd have defined a login page and a loginfail page in /WEB-INF/web.xml or an equivalent, and in that case there would be no actual application logic because login is handled by your webapp server and not by the application. The loginfail page can simply be static HTML content.

Regardless, I do recommend that a "login fail" page should not have any fancy logic on it because the extra logic/controls allow the potential to weasel past security in the post-loginfail section of the webapp. I prefer a stark basic HTML fail page. Dead end.

As far as using the p:messages tag itself goes, roughly speaking, the application code has to obtain the FacesContext and use the addMessage() method to add your custom message(s) to the set of FacesMessages being sent to the client.

[Steve Dev]

The Error handling is done through a redirect to the "login.xhtml?error=true" link, this is done automatically by the SecurityConfig class.

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

	@Autowired
	UserDetailsServiceImpl userDetailsService;

	@Bean
	public BCryptPasswordEncoder passwordEncoder() {
		BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
		return bCryptPasswordEncoder;
	}
	
   @Autowired
	public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
	   auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
	}

	@Override
	protected void configure(HttpSecurity http) throws Exception {
		
		http.authorizeRequests()
		.antMatchers(HttpMethod.GET, "/", "/js/**", "/css/**", "/images/**").permitAll()
		.antMatchers(HttpMethod.POST, "/", "/js/**", "/css/**", "/images/**").permitAll()
		.antMatchers("/**").hasAuthority("ADMIN").and().formLogin().
        loginPage("/login.xhtml").
        loginProcessingUrl("/appLogin").
        usernameParameter("username").
        passwordParameter("password").
        defaultSuccessUrl("/index.xhtml", true).permitAll().failureUrl("/login.xhtml?error=true").
		and()
		.logout().logoutRequestMatcher(new AntPathRequestMatcher("/appLogout"))
		.logoutSuccessUrl("/logout.done").deleteCookies("JSESSIONID")
		.invalidateHttpSession(true);
		
	}

}

In the login.xhtml page, there is the error=true parameter which will be used to display the error message. This is done with the following method as described above:

<p:outputLabel value="Login failed!" styleClass="red"
        rendered="${!empty param['error']}" />

Now we just want to use Primefaces to display the error message in order to use the same method of displaying the error message in the application.
Displaying messages with Primefaces is done with the following method:

<p:messages id="messages" showDetail="true" closable="true">
            <p:autoUpdate/>
        </p:messages>

There is no parameter "rendered" and "value" in "p:messages" like the one for "p:outputLabel ".

[Tim Holloway]

Steve Dev wrote:
There is no parameter "rendered" and "value" in "p:messages" like the one for "p:outputLabel ".

That is correct. If there are eligible messages, they will be rendered. If not, nothing will render. There is no value because the value is always taken from the FacesMessages collection of the FacesContext.

Normally, all FacesMessages will be rendered by the messages tag, but you can limit that using the "for=" attribute. Assign a label to the FacesMessage when you add it to the FacesContext and the tag will look only for that label. The label is normally the ID of a control that you want the message to relate to, but if I'm not mistaken you can use any ID and not just one that maps to a control on the View Template.

[Tim Holloway]

Also, using the same URL for both login and login fail is false economy. For the most secure operation, both the primary and failure login pages should have minimal content. So a static page with a Stop-sign icon and LOGIN FAILED as the header would be sufficient (and require less coding overall = less possible bugs to exploit).

[Steve Dev]

Solution was found based on this discussion.
So, we can use the Jquery in order to display custom message in p:messages control according to a parameter value:

<h:head>
	<script type="text/javascript">
	   $(document).ready(function() {
	       
	      	var params = new window.URLSearchParams(window.location.search);
	   	var errorParam= params.get('error');
	   	if(errorParam=='true'){
	       	$('#idPMessage').append(mensaje('an error occured during authentication', 'error'));
	       }
	   });
	   
	   function mensaje(message, type){
	       return '<div class="ui-messages-' + type + ' ui-corner-all">'+
	           '<a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;">'+
	               '<span class="ui-icon ui-icon-close" />'+
	           '</a>'+
	           '<span class="ui-messages-' + type + '-icon" />'+
	           '<ul>'+
	               '<li>'+
	                   '<span class="ui-messages-' + type + '-summary">'+
	                   message +
	                   '</span>'+
	               '</li>'+
	           '</ul>'+
	       '</div>';
	   };
	</script>
</h:head>