How-to: Customize form based login

[jgrandja]

Publish a guide on How-to: Customize form based login

Related gh-499

[m-jayson]

hi @jgrandja is there a guide for this already? Would appreciate your response on this.

[jgrandja]

@mgonzaga1990 This issue is still open so work has not started on it. I don't have a timeline yet as there are higher priority items for the reference documentation. This issue will close when the guide is published and will link to the associated commit.

[vishu221b]

Hi, @jgrandja Can I work on this?

[jgrandja]

Thanks for your interest @vishu221b.

Before we start this guide, I'd like to align with the outline first.

What are your thoughts for the outline?

[vishu221b]

@jgrandja I feel the outline covers/intends-to-cover pretty much everything around JWT but missing Opaque tokens? (Please let me know if I am already missing something here).

Not sure if that is much required at the moment considering majority of the users seem to be going for the JWT approach but I have recently created an custom authorization server following the opaque token approach for I personally didn't want anyone to access and decode the JWT and be able to view the claims even by the user itself (I am using it with NextJS Client and storing access and refresh tokens inside browser's localStorage).

I am using custom login page in my authorization server where the code(as per the authorization_code flow) for client is generated and the auth server redirects to the client's provided redirect_uri with custom failure handler where, on login failure the login page refirects from "/my-login-page" to "/my-login-page?error={errorMessage}". "errorMessage" being the direct message body from the thrown exception to enable the form to catch and display error.

So, I have configured authorization_code flow with custom Client and Authentication* (all relevant important POJOs') JPA Repositories with customized token introspector, custom Oauth code error Response Handlers etc. and I had to go through the source code of spring-authorization-server to see what all I can configure further to store and enable opaque access/refresh token pair, customize instrospection response claims, handle errors etc. It could have saved me a lot of time if there were some resources on how to configure opaque tokens properly, in case a user doesn't wish to use JWTs let's say. I am not using OIDC in my current flow.

So my point is that it would be better if there could be tutorials and resources for the users to be able to configure opaque tokens. I get that there are alot of things to be done on priority by the team and so unless it is much needed and based on user upvotes, it won't be prioritized. But nonetheless it should definitely be listed in the Outline under the How-To Guides.

Apart from that I feel outline lists everything of major importance but going through forums I've understood that most of the users are not able to wrap their head around the current docs although they have necessary information for implementation required, so maybe there's room for refinement (I could be wrong here, please let me know). Maybe, the how-to guides displaying the use of mentioned classes in docs are mostly required at this point and would help the developers making/intending-to-make use of the spring-authoritzation-server.

I hope I wasn't too irrelevant anywhere, Please let me know your thoughts.

[jgrandja]

@vishu221b This ticket is focused on customizing form based login, which is a feature provided by Spring Security. See Form Login.

However, you are referring to opaque tokens.

So my point is that it would be better if there could be tutorials and resources for the users to be able to configure opaque tokens.

Please log a new issue titled "How-to: Configure and use opaque tokens" and provide details there. Thanks.

[vishu221b]

Agreed @jgrandja . Have logged a separate issue for the opaque tokens at How-to: Configure and use opaque tokens.

For the Form Login customization part, the things have to be in alignment with the spring security config. For the approach here is to create a custom html login page at default /login url or register a custom mvc endpoint serving the custom html login page in the security config. Additionally custom failure and success handlers or respective forward urls can be set in the configuration along with custom username and password parameter names(which will be used to extract values from the form on submission).

The guide can demonstrate how to configure custom html login page with custom success/failure handlers and relevant properties. Customizing form endpoint and serving own login page is easier as already mentioned at Spring Security Form Login , but additional customization might help user with more control which can be included in the guide.
Optionally, a simple authorization_code flow demo can be put where if a user client sends requests to /oauth/authorize?{...relevantParams....} then user is redirected to the custom login page where on successful login, the request continues and redirects the user client to client's provided redirect_uri.

Let me know your thoughts on what do you think would work best.

[jgrandja]

@vishu221b Your proposal for the guide (custom login page, success/failure handlers) makes sense but I can't help feel that this guide should live in Spring Security since formLogin() is provided by Spring Security.

So I'm really questioning if we should do anything about this ticket after all. At this point, we're going to hold off and we might consider adding these customizations to one of the existing samples.

[uniquejava]

I met a pretty weird thing today, when I login with my custom login page

After click the Signin button, my browser always redirect me to the following error page.

But after I add /error to permitAll, it can redirect me to the front-end!

** Any clue why is that?**

My final correct configuration:

    @Bean
    SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests((authorize) -> authorize
                        // 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 
                        // Took me HOURS to fix the above error by adding this line. 😭 
                        .requestMatchers("/error").permitAll()
                        .anyRequest().authenticated()
                );

        // Form login handles the redirect to the login page from the
        // authorization server filter chain
         http.formLogin(configurer -> {
            configurer
                    .loginPage("/login") // must specify this to indicate we are using custom login page.
                    .permitAll();
        });

        return http.build();

    }

    @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.debug(false)
                .ignoring()
                .requestMatchers("/webjars/**", "/images/**", "/css/**", "/assets/**", "/favicon.ico");
    }

My tech stack

• Spring Boot 3.0.2
• Spring Cloud 2022.0.1
• Spring Authorization Server 1.0.0 (with PKCE)
• Vue3 (vite)
• oidc-client-ts

[vishu221b]

@uniquejava You should use StackOverflow Spring Security forum or respective online spring security forums to ask your questions, this isn't the right place to do so.

Quick note: Since I don't see your config annotated with Order annotation, you might want to refer to Spring authorization server - getting started config once. Make sure you have default authorization server config set up. (you can ignore this if you already have your config Bean in another Class annotated with @order(Ordered.HIGHEST_PRECEDENCE))

Anyways, If you have any further questions, please refer to the docs and/or ask it in respective forums and not here. Thank you for your understanding and Happy Hacking!! 🙂🙂

[vishu221b]

@vishu221b Your proposal for the guide (custom login page, success/failure handlers) makes sense but I can't help feel that this guide should live in Spring Security since formLogin() is provided by Spring Security.

So I'm really questioning if we should do anything about this ticket after all. At this point, we're going to hold off and we might consider adding these customizations to one of the existing samples.

@jgrandja This can be included with the How to guide for SPA with PKCE. Since it's relevant for login implementation. Basically it would be a React/NextJS client providing user auth with oauth2-server.
A sample for angular-client already exists. Couldn't find it for React/NextJS (maybe i missed it?).
The requirement of this ticket would therefore be covered in SPA guide itself and this wouldn't need a separate ticket under spring-authorization-server.
If any guide doesn't exist yet, I can do the same as well, if it's required.

[jgrandja]

Thanks for your feedback @vishu221b.

We're thinking over some ideas on how best to address the How-To guides in an efficient manner.

Our current thinking is we may restructure the samples to have only 2:

1. default-authorizationserver would remain as-is and represents the getting started experience
2. federated-identity-authorizationserver and custom-consent-authorizationserver would be combined into a new sample called all-features-authorizationserver (name TBD). The idea around this sample is to integrate all features currently available in Spring Authorization Server and also to provide example implementations of other features that may (or may not) be provided Spring Authorization Server.

We're still thinking this over but our plan is to implement it after 1.1.0-RC1 is released.

[m-jayson]

@jgrandja do we have atleast a sample project that does what the ticket describes?

[jgrandja]

Closing this as a duplicate of gh-1189

NOTE: The demo-sample is configured with a custom form login page.

spring-authorization-server/samples/demo-authorizationserver/src/main/java/sample/config/DefaultSecurityConfig.java

Line 54 in 6eeca49

.loginPage("/login")