Nextjs 15 + NextAuth

1. Next-auth 초기 설정

• 초기 설정 가이드 내용 참고
  • app router를 사용중이기 때문에 이 가이드를 참고

2. 구글 OAuth 설정

• 구글OAuth

3. 클리언트 컴포넌트 예시

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>
    </>
  )
}

4. 서버 컴포넌트 예시

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>
    </>
  )
}