Nextjs 15 + NextAuth

엔케이·2024년 12월 16일
  1. Next-auth 초기 설정
  1. 구글 OAuth 설정
  1. 클리언트 컴포넌트 예시
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}
  1. 서버 컴포넌트 예시
import { getServerSession } from 'next-auth'
import { signIn, signOut } from "next-auth/react"

export default async function Component() {
  const session = await getServerSession(authOptions)
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}
profile
FE 개발자

0개의 댓글