NextAuth와 서버리스 Redis(Upstash)로 구축하는 Next.js 인증 완벽 가이드

Next.js는 React를 기반으로 하는 가장 인기 있는 프런트엔드 프레임워크 중 하나입니다. 정적 HTML을 생성하거나 클라이언트와 서버에서 동적으로 렌더링할 수 있어, 어떤 유형의 애플리케이션과 웹사이트에도 활용할 수 있는 다재다능한 도구입니다. 게다가 오픈소스로 누구나 무료로 사용할 수 있다는 점도 큰 장점입니다.

NextAuth는 Next.js용 서드파티 라이브러리로, 다양한 아이덴티티 프로바이더(identity provider)와 데이터베이스를 손쉽게 통합할 수 있도록 도와줍니다. 사용자의 회원가입 절차를 간소화하면서도 필수 계정 정보는 원하는 데이터베이스에 그대로 저장할 수 있습니다. NextAuth는 GitHub, Google, Facebook, Coinbase 등 50개 이상의 인증 프로바이더를 기본 지원합니다.

NextAuth Upstash Redis 어댑터

현재 Upstash Redis는 NextAuth가 지원하는 데이터베이스 중 하나입니다!

upstash-redis NextAuth 어댑터는 Upstash HTTP 클라이언트를 사용하기 때문에 대부분의 호스팅 서비스에서 문제없이 동작합니다. 또한 프리픽스(prefix)를 활용하면 무료 티어 Redis 데이터베이스 하나로 여러 개의 NextAuth 애플리케이션을 운영할 수도 있습니다.

그럼 이제 새롭게 출시된 어댑터를 활용해 NextAuth를 직접 살펴보겠습니다.

Upstash Redis를 활용한 NextAuth 예제

이 튜토리얼을 따라 하려면 Node.js 16.13.2 이상이 설치되어 있어야 하며, GitHub 계정과 Upstash 계정도 준비해야 합니다.

애플리케이션 설정

먼저 기본적인 Next.js 앱을 생성합니다. 이 예제에서는 learn-starter 템플릿을 사용해도 충분합니다.

다음 명령어를 실행하세요:

$ npx create-next-app nextauth-upstash-redis \
--use-npm \
--example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

자격 증명(credentials) 설정을 좀 더 편리하게 하기 위해 dotenv 패키지를 사용합니다. dotenv, NextAuth, Redis 어댑터, Upstash HTTP Redis 클라이언트를 설치하려면 아래 명령어를 입력하세요:

$ npm i dotenv next-auth @upstash/redis @next-auth/upstash-redis-adapter

인증 API 엔드포인트 생성

NextAuth의 API 엔드포인트는 간단한 JS 파일입니다. pages/api/auth/[...nextauth].js 경로에 파일을 만들고 아래 내용을 작성하세요:

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import { UpstashRedisAdapter } from "@next-auth/upstash-redis-adapter";
import { Redis } from "@upstash/redis";
import "dotenv/config";

export default NextAuth({
  adapter: UpstashRedisAdapter(
    new Redis({
      url: process.env.UPSTASH_REDIS_URL,
      token: process.env.UPSTASH_REDIS_TOKEN,
    })
  ),
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});

UpstashRedisAdapter는 upstashRedisClient를 감싸는 구조이며, 환경 변수에서 가져온 Upstash 자격 증명을 전달받습니다. 이 예제에서는 애플리케이션 루트 디렉터리의 .env 파일에서 dotenv 패키지를 통해 값을 불러옵니다. GitHub 프로바이더 자격 증명도 같은 방식으로 관리됩니다.

환경 변수 설정

환경 변수를 설정하려면 다음 내용을 담은 .env 파일을 생성해야 합니다:

UPSTASH_REDIS_URL=
UPSTASH_REDIS_TOKEN=
GITHUB_ID=
GITHUB_SECRET=

Upstash 자격 증명은 Upstash 콘솔에서 확인할 수 있습니다. 콘솔에 로그인한 후 데이터베이스를 생성하고, 개요 화면에서 해당 데이터베이스를 클릭하세요. 그림 1은 필요한 자격 증명이 표시되는 콘솔 위치를 보여줍니다.

GitHub 프로바이더 자격 증명은 GitHub 계정에 새 OAuth 애플리케이션을 등록하면 발급받을 수 있습니다. 그림 2는 등록 폼의 모습입니다. 로컬 머신에서 예제를 실행하려면 URL에 https://localhost:3000을 사용하는 것이 좋습니다.

NextAuth와 서버리스 Redis(Upstash)로 구축하는 Next.js 인증 완벽 가이드

앱 등록을 마치면 Client ID가 표시되고, “generate new client secret” 버튼을 클릭해 시크릿을 생성할 수 있습니다.

서비스 설정이 끝났다면, 이제 NextAuth가 가져오는 세션 데이터를 앱 컴포넌트에 공급해야 합니다.

이를 위해 pages/_app.js 파일을 새로 만들고 아래 코드를 작성하세요:

import { SessionProvider } from "next-auth/react";

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

이 코드는 Next.js 앱의 모든 컴포넌트에 세션 데이터를 제공하여, 현재 사용자가 로그인했는지 여부를 손쉽게 확인할 수 있게 해줍니다.

모든 것이 정상 동작하는지 확인하려면 pages/index.js 페이지도 아래 코드로 업데이트하세요:

import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();
  if (session) {
    const { email, image, name } = session.user;
    return (
      <>
        <img src={image} width="150" /> <br />
        Signed in as {name} ({email}) <br />
        <button onClick={signOut}>Sign out</button>
      </>
    );
  }
  return <button onClick={signIn}>Sign in</button>;
}

세션이 존재하면 현재 사용자의 프로필 이미지, 이름, 이메일 주소가 표시됩니다. 세션이 없다면 로그인 버튼만 보이며, 버튼을 클릭하면 자동으로 로그인 페이지로 이동합니다.

애플리케이션 테스트

전체 설정을 테스트하려면 다음 명령어를 실행하세요:

$ npm run dev

이 명령어는 포트 3000에서 HTTP 서버를 시작하므로, 브라우저에서 해당 주소를 열면 됩니다. 모든 것이 정상이라면 로그인 버튼이 나타납니다. 버튼을 클릭하고 앱이 GitHub 계정에 연결되도록 허용하세요.

회원가입이 성공하면 인덱스 페이지로 리디렉션되고, GitHub 계정 정보를 확인할 수 있습니다.

하나의 Redis 데이터베이스로 여러 애플리케이션 운영하기

Upstash는 계정당 하나의 무료 Redis 데이터베이스를 제공합니다. 이 데이터베이스는 프리픽스를 활용하면 서로 독립적인 여러 애플리케이션에서 함께 사용할 수 있습니다. 저장소에 기록되는 모든 키에 프리픽스가 추가되기 때문입니다.

이를 설정하려면 pages/api/auth/[...nextauth].js 안의 코드를 수정해야 합니다. 어댑터 팩토리 함수는 Upstash Redis 클라이언트 외에 두 번째 인자를 받을 수 있습니다.

UpstashRedisAdapter(
  new Redis({
    url: process.env.UPSTASH_REDIS_URL,
    token: process.env.UPSTASH_REDIS_TOKEN,
  }),
  { baseKeyPrefix: "app-specific-prefix-1:" }
);

이렇게 하면 여러 앱의 사용자 데이터가 데이터베이스 안에서 충돌하지 않도록 안전하게 분리할 수 있습니다.

마무리

NextAuth는 복잡한 과정 없이 애플리케이션에 인증 기능을 손쉽게 도입할 수 있는 매우 유용한 라이브러리입니다. 간편한 Redis 데이터베이스 호스팅 서비스인 Upstash Redis 역시 비슷한 수준의 사용 편의성을 제공합니다. 새로 출시된 Upstash Redis용 NextAuth 데이터베이스 어댑터를 활용하면 두 도구가 강력한 시너지를 발휘해, 짧은 시간 안에 새로운 애플리케이션을 만들어 낼 수 있습니다!

Upstash Redis는 서버리스 데이터베이스로, 사용한 만큼만 요금을 지불하면 됩니다. 따라서 사용자가 없는 앱 때문에 큰 비용이 청구될 걱정 없이 여러 MVP를 자유롭게 테스트하고 반복 개발할 수 있습니다.