Create own login page

[SamTV12345]

I'd like to create my own html form page for login. The problem is that this works as expected. As soon as I am authenticated I am getting redirected to /error with 404.
But when switching back to the standard login form I realized that there is a second page that asks for my consent. When manipulating the loginpage do I also need to implement the following page?

[SamTV12345]

I know that there is a Stackoverflow over here https://stackoverflow.com/questions/71214613/spring-authorization-server-with-custom-login . But nobody has an answer for customizing the login page and the page mentioned above. So I would be glad if you could offer the ability to customize the process.

[ramonmalcolm10]

No you don’t need to implement the consent page. All the custom login page should do is replace spring default login page. Spring should handle the form submission and will automatically redirect the user to the consent page. You can post your login page and your security config code for me to look at and offer more assistance.

[SamTV12345]

This is my login page:

import {PublicBackground} from "./components/PublicBackground";

export const Login = ()=>{
    return <PublicBackground>
            <h1 className="col-span-2 text-center text-4xl">Login</h1>
            <form method="post" action="http://localhost:9000/login" className="col-span-2 font-serif">
                <div className="grid grid-cols-2 gap-4 text-2xl">
                    <label htmlFor="username">Username</label>
                    <input id="input-username" name="username" type="text" required className="form-control block w-full p-1 font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"/>
                    <label htmlFor="password">Password</label>
                    <input type="password" name="password" id="password" required className="form-control block w-full p-1 font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"/>
                </div>
                <div className="flex justify-center top-16 relative">
                    <input type="submit" value="Login" alt="Login" title="Submit button" className=" text-xl w-3/4 inline-block px-7 py-3 bg-blue-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"/>
                </div>
                <div className="flex justify-center top-24 relative">
                    No account? nbsp; Register <a href="#" className="text-blue-700	">here </a>.
                </div>
            </form>
        </PublicBackground>
}

It is built using eirslett frontend plugin and then copied to the root of the public folder. When someone navigates to /ui/login the index.html of the React application is forwarded to the user. When the submit button is pressed the data is POSTed to the /login endpoint of spring security.

This is my security configuration:

@Configuration
public class DefaultSecurityConfig {

	@Bean
	@Order(1)
	public SecurityFilterChain authorizationServerSecurityFilterChain(HttpSecurity http)
			throws Exception {

		OAuth2AuthorizationServerConfiguration.applyDefaultSecurity(http);
		http.getConfigurer(OAuth2AuthorizationServerConfigurer.class)
		    .oidc(Customizer.withDefaults());    // Enable OpenID Connect 1.0
		http.exceptionHandling((exceptions) -> exceptions
				    .authenticationEntryPoint(
						    new LoginUrlAuthenticationEntryPoint("/login"))
		    )
				// Accept access tokens for User Info and/or Client Registration
				.oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt);

		return http.build();
	}

	@Bean
	@Order(2)
	public SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http)
			throws Exception {
		http.csrf().disable()
				.authorizeHttpRequests((authorize) -> {
					try {
						authorize.requestMatchers(
								         "/ui/**",
								         "/index.html",
								         "/api/public/**",
								         "/assets/**",
								         "/*.svg",
								         "/static/**", "*.css",
								         "/*.js", "/*.json",
								         "/*.ico")
						         .permitAll()
						         .requestMatchers(HttpMethod.POST, "/api/v1/public/**").permitAll()
						         .anyRequest()
						         .authenticated()
						         .and()
						         .formLogin()
						         .loginPage("/ui/login")
						         .loginProcessingUrl("/login");
					}
					catch (Exception e) {
						throw new RuntimeException(e);
					}
				});

		return http.build();
	}

	@Bean
	public JwtDecoder jwtDecoder(JWKSource<SecurityContext> jwkSource) {
		return OAuth2AuthorizationServerConfiguration.jwtDecoder(jwkSource);
	}
}

Thanks for your help. I spent 20+ hours on this problem and can't solve it.

[SamTV12345]

And these are the logs:

2022-11-28T10:04:42.013+01:00  INFO 9560 --- [nio-9000-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 1 ms
2022-11-28T10:04:42.026+01:00 DEBUG 9560 --- [nio-9000-exec-1] o.s.security.web.FilterChainProxy        : Securing POST /login
2022-11-28T10:04:42.033+01:00 DEBUG 9560 --- [nio-9000-exec-1] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped to ResourceHttpRequestHandler [classpath [META-INF/resources/], classpath [resources/], classpath [static/], classpath [public/], ServletContext [/]]
2022-11-28T10:04:52.522+01:00  INFO 9560 --- [nio-9000-exec-1] d.s.saar.security.UserDetailServiceImpl  : Logging in withtest@test.com
2022-11-28T10:04:52.584+01:00 DEBUG 9560 --- [nio-9000-exec-1] o.s.s.a.dao.DaoAuthenticationProvider    : Authenticated user
2022-11-28T10:04:52.603+01:00 DEBUG 9560 --- [nio-9000-exec-1] w.c.HttpSessionSecurityContextRepository : Created HttpSession as SecurityContext is non-default
2022-11-28T10:04:52.603+01:00 DEBUG 9560 --- [nio-9000-exec-1] w.c.HttpSessionSecurityContextRepository : Stored SecurityContextImpl [Authentication=UsernamePasswordAuthenticationToken [Principal=org.springframework.security.core.userdetails.User [Username=test@test.com, Password=[PROTECTED], Enabled=true, AccountNonExpired=true, credentialsNonExpired=true, AccountNonLocked=true, Granted Authorities=[ROLE_GUEST]], Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_GUEST]]] to HttpSession [org.apache.catalina.session.StandardSessionFacade@37f8384f]
2022-11-28T10:04:52.604+01:00 DEBUG 9560 --- [nio-9000-exec-1] w.a.UsernamePasswordAuthenticationFilter : Set SecurityContextHolder to UsernamePasswordAuthenticationToken [Principal=org.springframework.security.core.userdetails.User [Username=test@test.com, Password=[PROTECTED], Enabled=true, AccountNonExpired=true, credentialsNonExpired=true, AccountNonLocked=true, Granted Authorities=[ROLE_GUEST]], Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_GUEST]]
2022-11-28T10:04:52.604+01:00 DEBUG 9560 --- [nio-9000-exec-1] o.s.s.web.DefaultRedirectStrategy        : Redirecting to /
2022-11-28T10:04:52.608+01:00 DEBUG 9560 --- [nio-9000-exec-2] o.s.security.web.FilterChainProxy        : Securing GET /
2022-11-28T10:04:52.611+01:00 DEBUG 9560 --- [nio-9000-exec-2] o.s.s.w.a.AnonymousAuthenticationFilter  : Set SecurityContextHolder to anonymous SecurityContext
2022-11-28T10:04:52.613+01:00 DEBUG 9560 --- [nio-9000-exec-2] o.s.s.web.DefaultRedirectStrategy        : Redirecting to http://localhost:5173/ui/login

In my React application I get a 404 error. / is also the wrong redirect uri. This problem also occurs with the spring security form but once I start authenticating back it somehow memorized that I was already logged in and the consent page appears.

[ramonmalcolm10]

Going to look at it now, but any specific reason why you need to use React?

[SamTV12345]

Great. It is because I have multiple pages like a Register form which uses the same styling or a clients page that serves as a public oauth2 client. That is also the app that I use to test the authorization.

[SamTV12345]

If you don't find the error right away I can also send you the full project.

[ramonmalcolm10]

If you don't find the error right away I can also send you the full project.

Yes please share the project

[ramonmalcolm10]

Great. It is because I have multiple pages like a Register form which uses the same styling or a clients page that serves as a public oauth2 client. That is also the app that I use to test the authorization.

I believe adding React is a bit of overkill to be honest, you can use Thymeleaf fragment to achieve the same. Also you can use Postman to test by using OAuth 2.0 as the authorization method

[SamTV12345]

Yes but that is currently also not working. I can't manage to get a token. I also tested against Keycloak so I don't have something wrong in my postman config. This doesn't work with the spring form and the React form. I might switch but the thyme leaf form essentially does the same as to post to /login with username and password. If you have a working Spring Boot 3 sample app with Thymeleaf login that would be also great as a starting point.

[ramonmalcolm10]

Can I share a sample version using Spring boot version 3.0.0 and OAuth server version 1.0.0?

[SamTV12345]

Yes. So I could start from there and find the point where I get the error.

[ramonmalcolm10]

Yes. So I could start from there and find the point where I get the error.

Demo Auth Server

[SamTV12345]

Thanks for creating the example. I just did a test run and everything worked as expected. I will get back to you when I am done with integrating your example.