🛠️ Azure AD B2C OAuth Provider 개요

 

🛠️ Azure AD B2C OAuth Provider 개요

Azure AD B2C는 Microsoft의 클라우드 기반 ID 관리 서비스로,
OAuth 2.0 및 OpenID Connect(OIDC)를 사용하여 인증할 수 있습니다.
NextAuth.js와 통합하여 MS 계정, 조직 계정, 소셜 계정 등으로 인증할 수 있습니다.

---

📦 기본 설정 예시 (pages/api/auth/[...nextauth].ts)

import NextAuth from "next-auth"
import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c"

export default NextAuth({
  providers: [
    AzureADB2CProvider({
      clientId: process.env.AZURE_AD_B2C_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_B2C_TENANT_ID,
      primaryUserFlow: "B2C_1_sign_in",
      authorization: {
        params: {
          scope: "https://yourtenant.onmicrosoft.com/api/user.read",
        },
      },
    }),
  ],
})

---

📑 환경 변수 설정 (.env)

AZURE_AD_B2C_CLIENT_ID=your-client-id
AZURE_AD_B2C_CLIENT_SECRET=your-client-secret
AZURE_AD_B2C_TENANT_ID=your-tenant-id
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret

---

🌐 Azure AD B2C 애플리케이션 설정

1. Azure 포털 접속
2. Azure AD B2C → App registrations → New registration
3. Redirect URI:
4. http://localhost:3000/api/auth/callback/azure-ad-b2c
5. API 권한 추가:
   • Microsoft Graph → User.Read, User.ReadBasic.All

---

🔑 사용자 정보 가져오기

async function jwt({ token, account }) {
  if (account?.provider === "azure-ad-b2c") {
    token.accessToken = account.access_token
  }
  return token
}

세션에 포함시키기

async function session({ session, token }) {
  session.accessToken = token.accessToken
  return session
}

---

🧑‍💻 사용자 정보 표시 예제

반응형

import { useSession } from "next-auth/react"

export default function Profile() {
  const { data: session } = useSession()
  return (
    <>
      <p>Signed in as {session?.user?.name}</p>
      <p>Access Token: {session?.accessToken}</p>
    </>
  )
}

---

⚠️ 주의사항

• Tenant ID와 User Flow 이름이 정확하지 않으면 인증이 실패할 수 있습니다.
• primaryUserFlow는 Azure AD B2C에서 정의한 사용자 흐름의 이름과 일치해야 합니다.
• 권한(Scope)을 명시하지 않으면 기본값으로 설정됩니다.

---

 

NextAuth Azure AD B2C, Azure OAuth 설정, Microsoft 인증 구현, Azure Client ID 설정, OAuth2 Next.js 연동, 사용자 정보 가져오기, MS 계정 로그인, B2C Tenant 설정, OIDC 인증 처리, SEO 최적화 10개

---