bootstrap modal as the login page for spring security

Question

In my web app, I have a the login/registration part as bootstrap modals that appears when the login icon in the header is clicked. I'm trying to configure this in spring security, but I see that I have to return a page in config method:

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

My question is how to properly implement a modal to be the login page instead of a full html page. I'm using spring mvc 4 with spring security 4 and thymeleaf

In my header in the html pages:

<div class="col-xs-7 col-sm-4">
    <div class="top-social-last top-dark pull-right"
         data-toggle="tooltip" data-placement="bottom"
         title="Login/Register">
        <a class="top-icon-circle" href="#login-modal"
           data-toggle="modal">
            <i class="fa fa-lock"></i>
        </a>
    </div>
    <!-- social icons -->
</div>

This header and the modal implementaion is shared as a fragment that is included in all pages (long code for modal so I didn't copy it here).

Now there are certain requests that requires login so I have to add a login page in security config that these requests should be redirected to, but I don't have a page, I just have this modal that is shared as a fragment among all pages. I think I'm not doing it right, so if anyone can please show me how to work with modals in spring security.

For example, in airbnb site, if you want to like an advertisement and not logged in, a modal pops up instead of redirecting to a page.

Answer 1

You have to create login modal in bootstrap and just show it when someone click on login button. Your login modal should contain standard login form in <form> tags. After clicking submit button form should redirect user to th:action="@{/j_spring_security_check}" and that's all.

Answer 2

1.you will need a custom implementation of spring security login ,FilterChainProxy and you have to put this modal in every page i would put this in the footer section or put this in header section since you have already have this in fragment .

2.when ever a secure url gets accessed check for the principal session if this request is not in the session you could return a error code if it is ajax request for this you need a filter and redirect to page when it is not a ajax request to the authentication manager where you can show the modal on page load.

what you need exaclty is a preauth filter for achieving this.take a look at the following link preauth filter