Can you do a demo on custom login page

[uniquejava]

Greetings!

With the PKCE edition, I can login with the default login page. but I cannot login when use a custom login page. Would you please do a demo for custom login page. Thanks.

My configuration:

  @Bean
  SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception {
      http
              .authorizeHttpRequests((authorize) -> authorize
                      .anyRequest().authenticated()
              );

        http.formLogin((formLogin) -> formLogin
                .loginPage("/login")
                .defaultSuccessUrl("http://127.0.0.1:3000", true)
                .permitAll()
        );
      return http.build();

  }

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

LoginControll.java

@Controller
@Slf4j
public class LoginController {
    @GetMapping(value = "/login")
    public String loginPage(){
        return "login";
    }
}

And I have a custom templates/login.html page!

For frontend, I used vue3 and oidc-client-ts.

import type { UserManagerSettings } from 'oidc-client-ts'
import { UserManager } from 'oidc-client-ts'

// All endpoints => http://corfu-auth:9000/.well-known/openid-configuration
const settings: UserManagerSettings = {
  authority: "http://corfu-auth:9000",
  client_id: 'client',
  redirect_uri: 'http://127.0.0.1:3000/user/signin-callback',
  response_type: 'code',
  scope: "openid profile",
  revokeAccessTokenOnSignout: true,

  // metadata: {
  //   authorization_endpoint: `http://corfu-auth:9000/oauth2/authorize`,
  //   token_endpoint: `http://corfu-auth:9000/oauth2/token`,
  //   end_session_endpoint: `http://corfu-auth:9000/oauth2/revoke`
  // }
}

export const userManager = new UserManager(settings)

export const getUser = ()=>{
  return userManager.getUser()
}

export const login = ()=>{
  return userManager.signinRedirect()
}

export const logout = ()=>{
  return userManager.signoutRedirect()
}

The login from backend works, but It cannot forward me to my frontend after successful login. 😢

[andifalk]

Hi @uniquejava thanks for your question. I will check if I can provide such a demo.