🌐 Auth0 OAuth Provider 개요

 

🌐 Auth0 OAuth Provider 개요

Auth0는 OAuth 2.0 및 OpenID Connect를 기반으로 하는 인증 서비스입니다.
NextAuth.js와 연동하여 다양한 로그인 방식을 간편하게 구현할 수 있습니다.

---

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

import NextAuth from "next-auth"
import Auth0Provider from "next-auth/providers/auth0"

export default NextAuth({
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      issuer: process.env.AUTH0_ISSUER,
    }),
  ],
})

---

📑 환경 변수 설정 (.env)

AUTH0_CLIENT_ID=your-auth0-client-id
AUTH0_CLIENT_SECRET=your-auth0-client-secret
AUTH0_ISSUER=https://your-tenant.auth0.com
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret

---

🌐 Auth0 애플리케이션 설정

반응형

1. Auth0 Dashboard에 로그인
2. Applications → Create Application 클릭
3. Regular Web Application 선택
4. Callback URL:
5. http://localhost:3000/api/auth/callback/auth0
6. Allowed Logout URL:
7. http://localhost:3000
8. Allowed Web Origins:
9. http://localhost:3000

---

🗺️ 사용자 정보 가져오기

async function jwt({ token, account }) {
  if (account?.provider === "auth0") {
    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>
    </>
  )
}

---

⚠️ 주의사항

• Auth0의 도메인(issuer) 설정이 올바르지 않으면 인증 오류가 발생합니다.
• 반드시 https://your-tenant.auth0.com 형식을 지켜야 합니다.
• 클라이언트 ID와 시크릿을 환경 변수로 관리하여 보안을 강화하세요.

---

🔑 추가 기능

• Custom Claims: Auth0 대시보드에서 사용자 프로필에 커스텀 클레임 추가 가능
• Role 기반 접근 제어: Auth0의 역할(Role) 기능을 사용해 관리

---

 

NextAuth Auth0, Auth0 OAuth 설정, Next.js 로그인 구현, Auth0 Client ID 설정, Auth0 JWT 토큰 관리, 사용자 세션 관리, NextAuth 프로바이더 설정, Auth0 사용자 정보 가져오기, OAuth2 인증 처리, SEO 최적화 10개

---