노션: https://hkpark130.notion.site/PKCE-1c295d023a3b804f8857e151ce340134
# OIDC 로그인 - PKCE 트러블슈팅 (HTTPS 필수)
## 개요
**React App + Keycloak** 연동 시 **OIDC 로그인 과정에서 발생한 PKCE 관련 문제**와
그 해결 방법을 정리한 블로그입니다.
**발생했던 문제:**
1. **로그인을 눌러도 PKCE 코드 챌린지를 전송하지 못하는 문제**
2. **HTTPS 환경이 아니어서 PKCE가 동작하지 않는 오류**
3. **문제를 해결하기 위해 HTTPS 설정이 필요함**
---
## PKCE란?
PKCE (**Proof Key for Code Exchange**)는 **OAuth 2.0 보안 강화 메커니즘**입니다.
주로 **클라이언트에서 인증 요청**을 보낼 때 **code_challenge / code_verifier** 검증을 통해
악의적인 인증 코드 탈취 공격을 방지하는 방식입니다.
**일반적인 OIDC 인증 과정**
1. **클라이언트가 code_challenge 를 Keycloak에 전송**
2. **Keycloak이 code_challenge 를 저장하고 Authorization Code 발급**
3. **클라이언트가 Authorization Code를 다시 Keycloak에 전송, 동시에 code_verifier 도 함께 제출**
4. **Keycloak이 저장된 code_challenge 와 클라이언트가 제공한 code_verifier를 비교 후 토큰 발급**
PKCE를 사용하면 `client_secret` 없이도 OIDC 인증을 **더 안전하게 보호**할 수 있습니다.
---
## 문제 발생 (`PKCE 실패 - HTTPS 미사용`)
### **에러 설명**
> PKCE를 사용하려면 **HTTPS 프로토콜이 필수**입니다.
**문제 상황:**
- `code_challenge`를 포함한 인증 요청을 보냈지만, Keycloak이 이를 정상적으로 처리하지 않음
- `console`에서 아무런 에러가 없음
**OIDC 인증 요청 (HTTP 환경)**
```sh
http://192.168.x.x:3000 HTTP 환경이어서 PKCE 불가능!
```
**Keycloak에서 PKCE 코드 챌린지를 검증하려면 HTTPS 필요**
```sh
https://192.168.x.x:3000 HTTPS 환경에서만 작동!
```
** 원인: HTTP 환경에서는 PKCE가 동작하지 않음!**
- **PKCE는 보안 강화를 위한 기능이므로, HTTPS 환경이 아니면 인증 코드 노출 위험이 존재**
- **따라서, Keycloak은 HTTP 환경에서는 PKCE 기반 요청을 허용하지 않음**
- **이 문제를 해결하려면 HTTPS 설정이 필수!**
---
## 최종 다이어그램 (PKCE 실패 + HTTPS 필요)
