인증(Auth) 구현 — NextAuth.js v5로 소셜 로그인부터 JWT까지
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. NextAuth.js v5에서 서버 컴포넌트에서 현재 세션을 가져오는 올바른 방법은?
💡 NextAuth.js v5(Auth.js)에서는 `import { auth } from "@/auth"`로 가져온 후 `const session = await auth()`로 서버 컴포넌트에서 세션을 가져옵니다. `useSession()`은 클라이언트 컴포넌트 전용입니다.
Q2. JWT 세션 전략에서 토큰에 커스텀 필드(role, id 등)를 추가하려면 어디서 작업해야 하나요?
💡 `jwt` 콜백에서 토큰에 필드를 추가하고, `session` 콜백에서 클라이언트가 접근할 수 있는 session 객체에 복사합니다. jwt 콜백이 먼저 실행되어 토큰을 만들고, session 콜백이 그 토큰을 참조합니다.
Q3. NextAuth.js v5에서 API 라우트 핸들러를 설정하는 올바른 경로와 코드는?
💡 App Router에서는 `app/api/auth/[...nextauth]/route.ts`에 `import { handlers } from "@/auth"; export const { GET, POST } = handlers;` 형태로 설정합니다.
Q4. 미들웨어에서 /admin 라우트를 관리자만 접근하도록 보호할 때 올바른 접근법은?
💡 미들웨어는 모든 요청에 대해 실행되며 Edge Runtime에서 동작합니다. `auth` 미들웨어 래퍼를 사용하면 `req.auth`로 세션에 접근할 수 있어 역할 기반 접근 제어를 구현할 수 있습니다.
Q5. Credentials 프로바이더에서 `authorize` 함수가 `null`을 반환하면 어떻게 되나요?
💡 `authorize`가 `null`을 반환하면 NextAuth는 인증 실패로 처리하고, 설정된 로그인 페이지로 `?error=CredentialsSignin` 쿼리 파라미터와 함께 리다이렉트합니다. 이를 활용해 에러 메시지를 표시할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.