728x90

Client API | NextAuth.js

The NextAuth.js client library makes it easy to interact with sessions from React applications.

next-auth.js.org

💡 getSession() 함수 호출 시 위 문서와 같이 설정했음에도 2가지 에러가 발생하여 Session 로그인 정보를 에러없이 불러오는 것을 목적으로 합니다.
1. api/auth/session 400 에러 ( GET http://localhost:3000/api/auth/session 400)
2. ClientFetchError: Unexpected token '<', "<!DOCTYPE </aside>

SessionProvider 설정

MetaData 사용을 위해 SessionProvider는 컴포넌트로 생성

// RootLayout layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Session>{children}</Session>
      </body>
    </html>
  )
}

// Session.tsx
'use client'
import React from 'react'
import { SessionProvider } from 'next-auth/react'

function Session({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>
}

export default Session

Next Auth 설정

// auth.ts
export const { handlers, auth, signIn, signOut } = NextAuth({
	...authConfig,
})

export const authConfig = {
    jwt: async ({ user, token, account }) => {
      if (user) {
        token.uid = user.id
      }
      return token
    },
    session: async ({ session, token }) => {
      if (session?.user) {
        if (token.sub != null) {
          session.user.id = token.sub
        }
      }
      return session
    },
  },
  session: {
    strategy: 'jwt',
  },
} satisfies NextAuthConfig

ENV 설정

# `openssl rand -base64 32`
NEXTAUTH_SECRET=Aa0Mv3ckdtLyMRjSBU9PLDNPCUY0FN94w1iPOq1rANw=
AUTH_URL=http://localhost:3000/api/auth

[…nextauth] 설정

해당 파일을 생성하지 않는다면 아래와 같은 에러가 발생합니다.

api/auth/session 400 에러 ( GET http://localhost:3000/api/auth/session 400)
ClientFetchError: Unexpected token '<', "<!DOCTYPE </aside>

[...nextauth]는 동적 경로로, NextAuth.js와 관련된 모든 요청을 처리하도록 설정되며 getSession()이 세션 정보를 가져오기 위해 /api/auth/session에 GET 요청했기에 해당 설정은 기본 엔드포인트에서 특정 요청을 처리할 수 있도록 설정하는 것입니다

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth'

export const { GET, POST } = handlers

Session 확인

'use client'
import { useSession } from 'next-auth/react'

export default function ProfileForm() {
  const { data: session, status, update } = useSession()
  
  if (!session?.user) return null
  
  return (<div>{session.user.id}</div>)
}