Auth-JWT

Overview

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.
login 및 jwt는 next-auth 라이브러리를 사용하여 구현되어 있습니다.

Usage

1. 기본 사용법 예시

/components/authProviders.tsx

'use client'

import { Session } from 'next-auth'
import { SessionProvider } from 'next-auth/react'
import { ReactNode } from 'react'

interface Props {
  session: Session | null
  children: ReactNode
}
function AuthProviders({ children, session }: Props) {
  return <SessionProvider session={session}>{children}</SessionProvider>
}

export default AuthProviders

app/layout.tsx

import type { Metadata } from 'next'
import AuthProviders from '@/components/authProviders' // 모듈 임포트
...
import { getServerSession } from 'next-auth' // 모듈 임포트  
...

export default async function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {

  ...
  const session = await getServerSession(authOptions) // 서버 세션 얻어오기
  ...

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          <AuthProviders session={session}> // 인증 모듈 주입
            <NavigationGuardProvider>
              <ThemeProviders>
                <TopMenuLink />
                <MainContent>{children}</MainContent>
              </ThemeProviders>
            </NavigationGuardProvider>
          </AuthProviders>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

app/login/page.tsx

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { signIn, signOut, useSession } from 'next-auth/react' // 모듈 임포트
...
import {
  ...
} from '@confy-ui/react/themes'

import { NavigationGuardHook } from '@/components/navigationGuardHook'

const formSchema = z.object({
  ...
})

export default function LoginPage() {
  const [loginError, setLoginError] = useState('')
  const { data: session } = useSession() // 세션 데이터 가져오기
  const form = useForm<z.infer<typeof formSchema>>({
    ...
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    ...
  }

  async function requestLogin(values: z.infer<typeof formSchema>) {
    try {
      const result = await signIn('credentials', {
        email: values.email,
        password: values.password,
        redirect: false
      })

      if (result?.error) {
        setLoginError('로그인에 실패했습니다.')
        return
      } else {
        console.log('로그인 성공 session: ', session)
        // router.push('/dashboard')
      }
    } catch (error) {
      setLoginError('로그인 중 오류가 발생했습니다.')
      console.error(error)
    }
  }

  return (
    <>
      ...
    </>
  )
}

어플리케이션 전체에서 SessionProvider 를 사용하기 위하여 layout 페이지에서 주입합니다.
로그인 / 로그아웃은 'next-auth/react' 의 기능을 상속 받아 사용합니다.
로그인 / 로그아웃의 실제 구현은 'lib/auth.ts' 에 정의되어 있습니다.
로그인 이후 'useSession()' 를 이용하여 정보를 얻습니다.

2. 적용 예시

참고

next-auth

PreviousApp Version

NextForm Validate

Edit this page on GitHub.

Overview

React

NEXT.js

Interface

Auth-JWT

Overview

Usage

1. 기본 사용법 예시

2. 적용 예시

참고