✅ NextAuth.js OAuth Provider 사용법

 

✅ NextAuth.js OAuth Provider 사용법

OAuth Provider란?
NextAuth.js에서 제공하는 인증 방식 중 하나로,
사용자가 Google, GitHub, Twitter 등 기존 계정으로 로그인할 수 있도록 합니다.

NextAuth.js는 대부분의 OAuth 1.0, 1.0A, 2.0, OpenID Connect 기반 로그인 서비스를 지원합니다.
기본 제공 Provider 외에도 커스텀 OAuth 설정도 가능합니다.

---

🔄 OAuth 기본 플로우 (6단계)

1. 사용자가 애플리케이션에서 "로그인"을 클릭
2. 애플리케이션이 인증 서버(예: GitHub)에 권한 요청
3. 인증 서버가 사용자를 로그인 페이지로 리디렉션
4. 사용자가 로그인 후 **인가 코드(code)**를 발급받음
5. 앱이 해당 코드를 사용해 Access Token을 요청
6. 토큰이 유효하면 사용자 정보와 함께 세션 생성

---

⚙️ 설정 방법 요약

1. Provider 포털에서 앱 등록

• 예: Google, GitHub, Twitter 등
• Callback URL은 반드시 아래 형식으로 등록:

http://localhost:3000/api/auth/callback/[provider]

---

2. .env 파일에 키 등록

반응형

TWITTER_ID=당신의_트위터_CLIENT_ID
TWITTER_SECRET=당신의_트위터_CLIENT_SECRET

---

3. Provider 추가 코드 작성

// pages/api/auth/[...nextauth].ts
import TwitterProvider from "next-auth/providers/twitter"

export default NextAuth({
  providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
    }),
  ],
})

---

4. 로그인 페이지 접근

설정이 완료되면 /api/auth/signin 경로에서
자동으로 Provider 목록이 나타나는 기본 로그인 페이지가 렌더링됩니다.

---

✨ 고급 옵션 설명

wellKnown

• OIDC 기반 Provider인 경우 자동 설정 가능
• authorization, token, userinfo를 수동 설정할 필요 없음

authorization

• 사용자 로그인 화면 URL
• ex) https://accounts.google.com/o/oauth2/v2/auth

token

• Access Token을 받는 URL
• ex) https://oauth2.googleapis.com/token

userinfo

• 인증된 사용자 정보를 요청하는 URL

---

🧩 커스텀 Provider도 가능

Google, GitHub 외에도 OAuth 표준만 지원한다면 어떤 서비스든 연동 가능합니다.
Endpoint들을 수동으로 작성하여 완전한 커스터마이징이 가능합니다.

---

🧪 참고 링크

• OAuth2 Simplified by Aaron Parecki
• OAuth 2.0 with PKCE 권장

---

 

NextAuth OAuth, OAuth 로그인 설정, Google OAuth Next.js, GitHub OAuth, Twitter 로그인 API, 커스텀 OAuth Provider, 인증 콜백 설정, Next.js OAuth 연동, 소셜 로그인 구현, SEO 최적화 10개

---