Next.js 인증을 사용하여 Next.js 웹사이트에 간단한 인증 구현

배포를 위한 암호 보호는 웹 사이트를 호스팅할 때, 특히 분기 배포를 보호하려는 경우 비용이 많이 들 수 있습니다.

오늘 튜토리얼에서는 Next.js 10 및 Next.js Auth를 사용하여 이러한 브랜치에서 간단한 인증 보호를 설정하는 방법을 보여드리겠습니다.

시작하기

# Create simple-auth-example
npx create-next-app simple-auth-example
cd simple-auth-example
# Install packages required
npm i next-auth --legacy-peer-deps
# Create required auth route
mkdir pages/api/auth
touch "pages/api/auth/[...nextauth].js"
# We'll also create a private page we a basic example
touch pages/private.js

API 설정

pages/api/auth/[...nextauth].js에서 다음을 추가합니다.

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

const isCorrectCredentials = credentials =>
  credentials.username === process.env.NEXTAUTH_USERNAME &&
  credentials.password === process.env.NEXTAUTH_PASSWORD

const options = {
  // Configure one or more authentication providers
  providers: [
    Providers.Credentials({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: "Credentials",
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      authorize: async credentials => {
        if (isCorrectCredentials(credentials)) {
          const user = { id: 1, name: "Admin" }
          // Any object returned will be saved in `user` property of the JWT
          return Promise.resolve(user)
        } else {
          // If you return null or false then the credentials will be rejected
          return Promise.resolve(null)
          // You can also Reject this callback with an Error or with a URL:
          // return Promise.reject(new Error('error message')) // Redirect to error page
          // return Promise.reject('/path/to/redirect')        // Redirect to a URL
        }
      },
    }),
  ],
}

export default (req, res) => NextAuth(req, res, options)

NEXTAUTH_USERNAME 및 NEXTAUTH_PASSWORD를 사용하여 기본 환경 변수를 설정합니다.

위의 내용은 비교를 수행하고 해당 비교가 올바르면 이름이 user이고 ID가 admin인 1 개체를 반환합니다.

비공개 페이지 설정

pages/private.js에서 다음을 추가합니다.

import React from "react"
import { signIn, useSession } from "next-auth/client"

export default function Page() {
  const [session, loading] = useSession()

  if (loading) {
    return <p>Loading...</p>
  }

  return (
    <>
      {session ? (
        <p>Super secret page!</p>
      ) : (
        <p>
          <p>You are not permitted to see this page.</p>
          <button onClick={signIn}>Sign in</button>
        </p>
      )}
    </>
  )
}

여기에서는 useSession 라이브러리에서 signIn를 사용하여 사용자가 로그인할 수 있는 옵션을 제공하는 동안 next-auth/client 후크를 사용하여 로그인했는지 확인합니다.

페이지/index.js 및 페이지/_app.js 업데이트

마지막으로 기본 페이지를 업데이트하겠습니다.

import React from "react"
import Link from "next/link"
import { signIn, signOut, useSession } from "next-auth/client"

export default function Page() {
  const [session, loading] = useSession()

  if (loading) {
    return <p>Loading...</p>
  }

  return (
    <>
      {!session && (
        <>
          Not signed in <br />
          <button onClick={signIn}>Sign in</button>
        </>
      )}
      {session && (
        <>
          Signed in as {session.user.name} <br />
          <button onClick={signOut}>Sign out</button>
        </>
      )}
      <div>
        <Link href="/private">
          <a>Go to private page</a>
        </Link>
      </div>
    </>
  )
}

이것은 세션을 기반으로 하는 비공개 페이지와 유사합니다.
pages/_app.js의 경우 인증 공급자가 있는지 확인합니다.

import { Provider } from "next-auth/client"

export default function App({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

이것이 코드 설정에 필요한 전부입니다!

환경 변수 설정

로컬 개발을 위해 환경 변수를 .env.local 파일에 추가할 수 있습니다. 지금 다음을 추가하십시오.

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_USERNAME=superuser123
NEXTAUTH_PASSWORD="#3bgQ]Xu(,GwVH7bLc4gQjR"

여기에서 인증 및 앱 URL에 필요한 사용자 이름과 비밀번호를 설정합니다(여기서는 그냥 localhost임).

완벽합니다. 이제 실제로 작동하는 것을 볼 수 있습니다!

웹사이트 탐색

npm run dev 를 실행하면 next dev 스크립트를 통해 package.json 실행되고 localhost:3000 에서 웹 사이트가 시작됩니다.


로그인이 필요한 기본 페이지

현재 있는 페이지에는 액세스 권한이 없으므로 로그인 메시지가 표시됩니다.

액세스 여부와 관계없이 클릭하면 모든 콘텐츠가 비공개인 당사/private 페이지로 연결되는 링크가 있습니다.

그것을 선택하면 권한이 없음을 알 수 있습니다.


비공개 페이지에 대한 액세스가 거부되었습니다.

이제 로그인을 클릭하기로 결정하면 Next.js Auth에서 제공하는 sign in 페이지가 표시됩니다.


Next.js 인증에서 제공하는 로그인 페이지

환경 변수에 설정한 대로 사용자 이름과 암호를 입력하면 액세스 권한이 있는 이전 페이지로 리디렉션됩니다.


액세스 허용됨

성공! 우리는 Next.js 애플리케이션에 간단하고 기본적인 인증을 추가했습니다.

Vercel에서 호스팅할 수 있습니다try out the project.

리소스 및 추가 자료

Live project

Code repo

Next.js Auth

Next.js Auth - credentials

이미지 크레디트: Chris Yang

원래 내 blog에 게시되었습니다. 더 많은 숨겨진 보석을 보려면 Twitter에서 저를 팔로우하세요.