NextAuth를 통한 사용자 인증의 IE환경 문제와 해결방법

최근 가벼운 Next.js를 활용 한 프로젝트를 진행하며 사용자 인증 관리를 NextAuth.js를 통해 구현해보았다.

 

Next.js 프로젝트에서 간편하게 인증관리를 할 방법이 없을까 고민을 하고 있던 차 NextAuth.js를 알게 되었고,

가벼운 프로젝트기에 부담 없이 적용해보았다.

 

NextAuth에서 제공하는 많은 Provider 중에 Credentials를 이용하여 사용자 인증을 구현, 관리하도록 세팅했다.

 

실 적용하는데에는 크게 문제가 없었고, 배포 이후 클라이언트 측의 IE 환경에서의 문제가 발견되었다.

로그인 진행이 안 되어 관리자 페이지는 확인 못 하였으나... (생략)

 

Problem

1. NextAuth는 수시로 /api/auth/session을 요청하며 수시로 로그인 상태인지를 확인하도록 하는데,

2. IE에서 해당 경로로의 최초 request가 캐싱되어 로그인을 하여도 인증 상태가 업데이트되지 않았다.

3. 그리하여 로그인 요청에 성공 하였으나, NextAuth의 인증 상태가 업데이트되지 않는 버그가 발생한 것이다.

 

Why

크로스브라우징 테스트 때에 발견하지 못했었나

항상 크로스브라우징 할 때에는 IE에서의 style이 깨지는 부분을 즉시 고쳐보고 적용하기 위해 개발자 도구를 켜놓고 작업을 하는데, 이게 화근이었다. 개발자 도구의 [항상 서버에서 새로고침] 옵션이 켜져 있었고, 위 문제는 나에게 발생하지 않았던 것이다.

 

문제 발생의 원인도 추적해보았고, 이제 문제를 고칠 일만 남았다.

 

https://docs.microsoft.com/ko-kr/troubleshoot/browsers/how-to-prevent-caching

Internet Explorer에서 캐싱을 방지 하는 방법 - Browsers

1. Header를 통해 캐시를 방지하는 방법

2. querystring을 통해 캐시를 방지하는 방법

3. GET 요청이 아닌 POST 요청을 통해 캐시를 방지하는 방법

 

IE에서의 request cache는 생각보다 많은 개발자들이 이미 겪어온 문제인 듯하다.

많은 해결법 중 가장 많이 제안된 방법으로 위 세 가지를 추려보았다.

 

이중 1번, Header를 통해 컨트롤하는 방법을 통해 문제를 해결하였다.

 

2번과 3번 방법의 경우는 대부분 권장하지 않는 방법이었고, NextAuth를 사용하며 내가 설정할 수 있는 영역이 아니었다.

 

그럼 Header설정은 어떻게 하지?

 

Next.js의 공식 문서를 찾아보니 next.config.js를 통해 특별한 API-endpoin에 별도 header를 지정할 수 있는 방법이 있었다!

 

nextjs.org/docs/api-reference/next.config.js/headers

next.config.js: Custom Headers | Next.js

 

Nextjs Custom Headers

 

위와 같이 Next.js에서 제공 한 Custom Header를 적용해보았다.

자! 이제 NextAuth를 통해 수시로 요청하여 로그인 상태인지를 확인하는 api가 IE에서 캐싱되지 않고 정확하게 작동한다.

 

—

NextAuth를 통해 사용자 인증을 적용한 새로운 프로젝트를 만들어보았다.

서버사이드와 클라이언트 사이드 양측에서 인증에 따른 제한을 걸기가 보다 쉬워졌고, 사용자 측면에서의 UX도 개선된 듯하다.

부족한 부분들을 디벨롭시켜 세팅해놓는다면 앞으로의 프로젝트에서도 충분히 적용 가능할 것으로 보인다!