Next-Auth를 사용하여 손쉽게 OAuth기반 권한관리하기 + RefreshToken + Private Route

# NEXT Auth env
NEXTAUTH_URL=Next 서버 주소 (이 서버주소를 매개로 redirect url이 생성되므로 필수)
NEXTAUTH_SECRET=발급받은 ClientSecret
NEXTAUTH_CLIENT_ID=발급받은 ClientId

/* KaKao Login 사용시 예시 */
export default NextAuth({
  providers: [
    KakaoProvider({
      clientId: process.env.NEXTAUTH_CLIENT_ID,
      clientSecret: process.env.NEXTAUTH_SECRET,
    }),
  ],
})

const oAuthProviders: Provider[] = [
  {
    //....생략
    profile(profile) {
      return {
        id: profile.sub,
        name: profile.name,
        email: profile.email,
        nickname: profile.nickname,
        birth: profile.brith,
        phone: profile.phone,
        gender: profile.gender,
      }
    },
  },
]

// NextAuth 옵션 지정 객체
const nextAuthOptions: NextAuthOptions = {
  providers: [...oAuthProviders],

  callbacks: {
    /**
     * JWT Callback
     * 웹 토큰이 실행 혹은 업데이트될때마다 콜백이 실행
     * 반환된 값은 암호화되어 쿠키에 저장됨
     */
    async jwt({ token, account, user }) {
      // 초기 로그인시 User 정보를 가공해 반환
      if (account && user) {
        return {
          accessToken: account.access_token,
          accessTokenExpires: account.expires_at,
          refreshToken: account.refresh_token,
          user,
        }
      }
      return token
    },

    /**
     * Session Callback
     * ClientSide에서 NextAuth에 세션을 체크할때마다 실행
     * 반환된 값은 useSession을 통해 ClientSide에서 사용할 수 있음
     * JWT 토큰의 정보를 Session에 유지 시킨다.
     */
    async session({ session, token }) {
      session.user = token.user as User
      session.accessToken = token.accessToken
      session.accessTokenExpires = token.accessTokenExpires
      session.error = token.error
      return session
    },
  },
}

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

//_app.tsx
function _App({
  Component,
  pageProps: { session, ...pageProps },
  router: { route },
}: MyAppProps) {
  const [sessionRefetchInterval, setSessionRefetchInterval] = useState(10000)

  return (
    <SessionProvider
      session={pageProps.session}
      refetchInterval={sessionRefetchInterval}
    >
      ...생략
      <RefreshTokenHandler
        setSessionRefetchInterval={setSessionRefetchInterval}
      />
    </SessionProvider>
  )
}

export default _App

import { useSession } from 'next-auth/react'
import { Dispatch, SetStateAction, useEffect } from 'react'

interface Props {
  setSessionRefetchInterval: Dispatch<SetStateAction<number>>
}

const RefreshTokenHandler = ({ setSessionRefetchInterval }: Props) => {
  const { data: session } = useSession()

  useEffect(() => {
    if (!!session) {
      const nowTime = Math.round(Date.now() / 1000)
      const timeRemaining =
        (session.accessTokenExpires as number) - 7 * 60 - nowTime
      setSessionRefetchInterval(timeRemaining > 0 ? timeRemaining : 0)
    }
  }, [session, setSessionRefetchInterval])

  return null
}

export default RefreshTokenHandler

import { getSession } from 'next-auth/react'
import { GetServerSideProps, Redirect } from 'next'
import { GetServerSidePropsContext } from 'next'

const defaultGssp = async () => {
  return {
    props: {},
  }
}

interface GsspData {
  props?: any
  redirect?: Redirect
  notFound?: true
}

export const withAuth = (gssp: GetServerSideProps = defaultGssp) => {
  return async (ctx: GetServerSidePropsContext) => {
    const session = await getSession(ctx)

    //권한이 없을경우 Redirect 시킴
    if (session === null) {
      return {
        redirect: {
          destination: '/',
        },
      }
    }

    //세션이 있을 경우 전달된 getServerSideProps 함수를 실행
    const gsspData: GsspData = await gssp(ctx)

    return {
      props: {
        ...gsspData.props,
      },
    }
  }
}

const PrivatePage = () => {
  return 'Is Private Page'
}
export default PrivatePage

export const getServerSideProps = withAuth()
//or
export const getServerSideProps = withAuth(async (ctx) => {
  //...do something
})

import React, { useEffect } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/router'
import { AuthInfo } from '@pages/_app.page'

interface Props {
  children: any
  authInfo: AuthInfo
}

const AuthContainer = ({ children, authInfo }: Props) => {
  const router = useRouter()
  const { data: session, status } = useSession()
  const isUser = !!session?.user

  const redirect = authInfo?.redirect || '/'
  const role = authInfo.role
  const loading = authInfo?.loading || <div>Loading</div>

  useEffect(() => {
    if (status === 'loading') return
    if (!isUser) {
      router.push(redirect)
    }
  }, [isUser, status])

  if (isUser) {
    return children
  }

  return loading
}

export default AuthContainer

const PrivatePage = () => {
  return 'Is Private Page'
}

PrivatePage.auth = {
  loading: <div>another loading</div>,
  redirect: '/another-path',
}

export default PrivatePage