Keycloak 인증 토큰 지속성: React/Vue/JS 앱에서 페이지 새로고침 시 재로그인 문제 해결 가이드

핵심 기술: 본 콘텐츠는 Keycloak JavaScript 어댑터를 사용하는 SPA에서 발생하는 페이지 새로고침 시 인증 토큰 유실 및 재로그인 문제를 해결하기 위한 방안을 제시합니다. 기본적으로 메모리에만 저장되는 토큰을 localStorage 또는 sessionStorage에 저장하거나, 더 안전한 HttpOnly 쿠키 사용, 그리고 Silent SSO 기법을 소개합니다.

기술적 세부사항:
* 문제 원인: keycloak-js는 기본적으로 액세스 토큰, 리프레시 토큰, ID 토큰을 메모리에만 저장합니다. SPA가 새로고침되면 메모리의 토큰이 사라져 사용자가 로그아웃된 것처럼 동작합니다.
* 해결 방안 1: LocalStorage/SessionStorage 사용:
* keycloak.init({ onLoad: 'login-required' }) 이후 keycloak.token, keycloak.refreshToken을 localStorage 또는 sessionStorage에 저장합니다.
* SPA 재시작 시 저장된 토큰으로 keycloak.init()을 호출하여 인증 상태를 복원합니다.
* localStorage: 재로드 시에도 유지되지만 XSS 공격에 취약하여 보안 수준이 낮습니다.
* sessionStorage: 브라우저 탭/창을 닫으면 삭제되어 localStorage보다 안전하지만 지속성은 떨어집니다.
* 토큰 갱신: setInterval을 사용하여 주기적으로 keycloak.updateToken()을 호출하고, 갱신된 토큰을 다시 저장하여 만료를 방지합니다.
* 해결 방안 2: Silent SSO 사용:
* keycloak.init({ onLoad: 'check-sso', silentCheckSsoRedirectUri: '...' }) 설정을 통해 백그라운드에서 토큰 갱신을 시도합니다.
* 브라우저의 서드파티 쿠키 차단 정책에 영향을 받을 수 있습니다.
* 해결 방안 3: HttpOnly Cookies 사용 (권장):
* 가장 높은 보안 수준을 제공하며, JavaScript에서 토큰에 접근할 수 없어 XSS 공격으로부터 안전합니다.
* 백엔드에서 토큰 관리를 담당해야 하며, 요청 시 자동으로 쿠키가 첨부됩니다.
* 보안 권고사항: CSP 헤더 사용, 입력값 검증 및 Sanitization, innerHTML 사용 자제 등을 권고합니다.

개발 임팩트: 사용자의 로그인 경험을 크게 개선하여 페이지 새로고침 시 불편함을 해소합니다. 또한, 토큰 저장 방식에 따른 보안 강점을 이해하고 적절한 방법을 선택함으로써 애플리케이션의 전반적인 보안 수준을 향상시킬 수 있습니다.

커뮤니티 반응: 원문에서는 명시적인 커뮤니티 반응을 언급하지 않지만, SPA 환경에서 SPA의 상태 유지 문제는 빈번하게 발생하는 이슈로, 해당 해결책은 개발자들에게 높은 관심과 실질적인 도움을 줄 것으로 예상됩니다.