스프링부트 thymeleaf 로그인 폼 submit 후 오동작(새창 띄움)

문제인식

스프링부트로 OAuth 자체 서버를 구축하고 react에서 PKCE를 이용한 로그인 기능을 사용하고 있었습니다.

하지만 인증과정에서 가끔 새창으로 redirect가 되어 로그인에 실패하는 경우가 있었습니다.

서비스가 무조건 로그인을 해야 사용할 수 있는 서비스여서 해당 문제를 해결하고자 했습니다.

 

문제파악

로그로는 새창이 띄어지는 이유가 전혀 파악이 되지 않아서 먼저 버그 상황을 재현을 하고자 했습니다.

여러 시도 끝에 비밀번호를 빠르게 타이핑한 후 엔터(submit)를 하면 해당 버그가 발생하는 것을 확인했습니다.

빠르게 타이핑을 하는 것이 브라우저가 예상치 못한 동작을 하게된 이유 중 하나가 될 수 있다는 것을 처음 접하였습니다.

 

문제해결

- form 태그에 아래와 같이 onsubmit을 추가

<form th:action="@{/login}" method="post" onsubmit="return handleSubmit(event)">

 

- handleSubmit은 아래와 같이 script 부분에 추가

<script>
    function handleSubmit(event) {
        // 새 창 열림 방지
        event.preventDefault();

        // 명시적으로 form을 현재 탭에서 제출
        event.target.submit();
    }
</script>

 

위와 같이 submit에 대한 동작을 명시적으로 정의하여 해결하였습니다.

 

해당 문제가 스프링부트 thymeleaf에서만 발생하는 것인지는 모르겠으나, 저와 같은 문제가 있으신 분은 위 해결방법을 적용해보면 좋을 것 같습니다.