NextAuth 및 Serverless Redis를 사용한 Next.js 인증

Next.js는 React를 핵심으로 하는 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다. 정적 HTML을 생성하거나 클라이언트와 서버에서 동적으로 렌더링할 수 있습니다. 따라서 모든 유형의 응용 프로그램 및 웹 사이트를 위한 다목적 도구입니다. 그리고 가장 좋은 점은 오픈 소스이며 무료로 사용할 수 있다는 것입니다!

NextAuth는 다양한 ID 공급자와 데이터베이스를 통합하는 데 도움이 되는 Next.js용 타사 라이브러리입니다. 등록할 때 사용자의 시간을 절약할 수 있으며 선택한 데이터베이스에 모든 필수 계정 정보를 보관할 수 있습니다. NextAuth는 GitHub, Google, Facebook, Coinbase 등을 포함하여 50개 이상의 인증 공급자를 지원합니다.

NextAuth Upstash Redis 어댑터

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

upstash-redis NextAuth adapter 많은 호스팅 서비스에서 작동하는 Upstash HTTP 클라이언트를 사용합니다. 접두사가 있는 여러 NextAuth 지원 애플리케이션에 대해 하나의 프리 티어 Redis 데이터베이스를 사용할 수 있습니다.

이제 새로 출시된 이 어댑터를 사용하여 NextAuth에 대해 알아보겠습니다.

Upstash Redis를 사용한 NextAuth 예

이 튜토리얼을 사용하려면 최소 버전 16.13.2의 Node.js가 설치되어 있어야 합니다. GitHub 및 Upstash 계정도 필요합니다.

애플리케이션 설정

기본 Next.js 앱을 만들어야 합니다. 학습 시작 템플릿은 이 예제에 적합합니다.

다음 명령을 사용할 수 있습니다.

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

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 계정에 대한 새 OAuth 애플리케이션을 등록할 때 GitHub 공급자 자격 증명을 받습니다. 그림 2는 등록 양식을 보여줍니다. 로컬 머신에서 예제를 실행하려면 https://localhost:3000을 URL로 사용해야 합니다.

앱을 등록하면 클라이언트 ID가 표시되며 "새 클라이언트 암호 생성" 버튼을 클릭하여 암호를 생성할 수 있습니다.

서비스를 설정한 후에는 앱 구성 요소에 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 앱의 모든 구성 요소에 세션 데이터를 제공하므로 현재 사용자가 로그인되어 있는지 확인할 수 있습니다.

모든 것이 작동하는지 확인하려면 page/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를 테스트하고 반복할 수 있습니다.