NextAuth Credentials Provider와 Postman 연동하기: 로그인부터 API 요청까지

NextAuth를 사용하는 경우, Postman으로 API를 테스트할 때 accessToken 때문에 불편함을 겪을 수 있습니다. NextAuth는 보안 강화를 위해 accessToken을 HTTPOnly 쿠키에 저장하므로, 일반적인 방식으로는 Postman에서 직접적인 접근이 어렵습니다.

이때 활용할 수 있는 간단한 방법이 있습니다. NextAuth의 Credentials Provider를 사용하여 로그인 후, 세션 엔드포인트에서 accessToken을 추출하여 Postman 환경변수에 저장하고 이를 사용하는 것입니다.

이 방법을 단계별로 설명하여, Postman에서 NextAuth 세션 정보를 보다 효율적으로 활용할 수 있도록 안내해 드리겠습니다.

주요 목표

• 이미 구현된 NextAuth 기반의 로그인 시스템 활용
• Postman의 환경변수에 세션 정보 저장
• 저장된 토큰을 활용해 인증이 필요한 API 요청 수행

---

구현 순서

1. Postman 환경변수 설정하기

Postman에서 반복적인 값을 쉽게 관리하고 재사용하기 위해 환경변수를 설정합니다. (직접 body에 넣어도 되지만, 재사용을 위해서 환경변수를 추천드려요)

• BASE_URL: http://localhost:3000
• EMAIL: your-email@example.com
• PASSWORD: your-password
• CSRF_TOKEN: (초기값 비워둠)
• ACCESS_TOKEN: (초기값 비워둠)

2. 로그인 요청 (CSRF 토큰 포함)

Credentials 로그인을 시도하려면  /api/auth/callback/credentials 주소로 POST요청을 하면 됩니다. NextAuth에서는 로그인 요청 시 보안을 위해 CSRF 토큰을 요구합니다. Postman의 Pre-request 단계에서 먼저 CSRF 토큰을 가져오도록 설정합니다.

nextauth credentials signin endpoint : /api/auth/callback/credentials

Pre-request Script 예시

const baseUrl = pm.environment.get("APP_URL");

pm.sendRequest(`${baseUrl}/api/auth/csrf`, function (err, response) {
    var jsonData = response.json();
    pm.environment.set("CSRF_TOKEN", jsonData.csrfToken);
});

로그인 요청 전에 CSRF_TOKEN이 설정되지 않았다면 Pre-request 단계에서 자동으로 설정됩니다.

(credentials sigin 요청 전에는 csrf token 환경변수가 빨갛게 세팅이 안되어있지만, send버튼을 눌러 로그인 요청을 하게 되면 pre-request의 내용을 진행하여 csrf token을 환경변수 세팅 후 (파랗게 변함) 로그인 요청을 보내게 됩니다.)

3. 로그인을 성공했다면, nextauth의 session endpoint로 요청

Credentials 로그인 엔드포인트로 로그인을 시도후 200 성공을 받아도, 세션 정보는 같이 주지 않습니다. 따로 session을 조회하는 endpoint로 조회를 해야 httponly쿠키로 관리 중인 session 정보를 받을 수 있습니다.

nextauth get session endpoint : /api/auth/session

요청이 성공하면, 로그인한 사용자의 세션이 돌아옵니다. 저희는 이 응답에서 accessToken을 추출해서 postman의 환경변수에 셋팅해주면 됩니다. 이 과정은 postman의 post-response에서 가능합니다.

Post-response Script 예시

const response = pm.response.json();

if (response.user.accessToken) {
  pm.environment.set("ACCESS_TOKEN", response.user.accessToken);
}

4. 요청헤더에 token 넣기

이제 사용하고 싶은 api request 탭에서 직접 이 토큰을 활용하거나, 폴더로 하나로 감싼후에 공통된 header 옵션을 상속하도록 해서 api 요청을 보내면 됩니다.

---

위 이미지에 사용된 마스킹 처리는 Maskit(https://maskit.kr)을 사용했습니다.

마스킷 서비스를 써보시고 부족한점이나 더 있으면 좋겠다 하는 점이 있으면 피드백 주시면 열심히 반영해 볼게요

MaskIt은 이미지에서 개인정보나 민감한 정보를 빠르고 쉽게 마스킹 처리할 수 있는 서비스입니다. 🚀

👉 마스킷 서비스를 사용해 보시고, 부족한 점이나 개선 사항이 있으면 피드백 부탁드립니다. 🙌
👉 더 나은 서비스를 제공할 수 있도록 열심히 반영해 보겠습니다. 😎