✅ NextAuth.js 클라이언트 API

 

✅ NextAuth.js 클라이언트 API

NextAuth.js는 React 애플리케이션에서 세션(Session) 정보를 쉽게 관리할 수 있도록 하는 클라이언트 라이브러리를 제공합니다.

---

📦 useSession() 훅

✔ 용도

• 클라이언트 측에서 로그인 여부 확인, 세션 정보 접근을 쉽게 하기 위한 React Hook입니다.
• 반드시 pages/_app.jsx 또는 .tsx에 SessionProvider로 감싸야 합니다.

✔ 사용 예시

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

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

✔ 반환값

• data: Session | undefined | null
• status: "loading" | "authenticated" | "unauthenticated"

---

🔐 보호된 페이지에서 세션 필수 설정하기

const { status } = useSession({
  required: true,
  onUnauthenticated() {
    // 인증되지 않았을 경우 처리
  },
})

required: true로 설정하면 세션이 없을 경우 기본적으로 로그인 페이지로 리디렉션됩니다.
onUnauthenticated()로 커스텀 처리를 설정할 수도 있습니다.

---

🧩 App 전체에 인증 흐름 적용하기

반응형

// pages/_app.jsx
import { SessionProvider, useSession } from "next-auth/react"

export default function App({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

function Auth({ children }) {
  const { status } = useSession({ required: true })
  if (status === "loading") return <div>Loading...</div>
  return children
}

// pages/admin.jsx
function AdminDashboard() {
  return <div>관리자 전용 페이지</div>
}
AdminDashboard.auth = true

특정 페이지에만 인증을 요구할 수 있는 구조입니다.

---

🔄 세션 업데이트 하기

✔ update() 메서드 사용

const { update } = useSession()
await update({ name: "홍길동" }) // 클라이언트에서 서버로 데이터 전달

• 서버에서는 trigger: "update"와 함께 jwt 또는 session 콜백을 활용해 세션 갱신

// [...nextauth].ts
callbacks: {
  jwt({ token, trigger, session }) {
    if (trigger === "update" && session?.name) {
      token.name = session.name
    }
    return token
  }
}

---

🔐 주의사항

• update()로 전달된 데이터는 클라이언트에서 오기 때문에 서버에서 검증 필수입니다.
• 전략이 "jwt"이면 jwt() 콜백이 호출되고,
• 전략이 "database"면 session() 콜백이 호출됩니다.

---

📌 세션 객체 예시

{
  "user": {
    "name": "홍길동",
    "email": "hong@example.com",
    "image": "https://..."
  },
  "expires": "2025-05-01T12:34:56Z"
}

expires는 세션 만료 시간이며, 민감한 정보(토큰 등)는 포함되지 않습니다.

---

 

NextAuth.js 클라이언트, useSession 훅, React 세션 관리, 세션 업데이트, 인증 리디렉션, Next.js 인증 흐름, 보호된 페이지 처리, JWT 콜백, 세션 유지