NextAuth×サーバーレスRedisで実現するNext.js認証の実装ガイド

Next.jsは、Reactをベースとした最も人気のあるフロントエンドフレームワークの一つです。静的なHTMLを生成できるだけでなく、クライアント側・サーバー側のどちらでも動的にレンダリングでき、この柔軟性によりあらゆる種類のアプリケーションやWebサイトに対応できる万能なツールとなっています。しかもオープンソースで、無料で利用できる点も大きな魅力です。

NextAuthは、Next.js向けのサードパーティライブラリで、さまざまなIDプロバイダーやデータベースとの統合を簡単に実現できます。ユーザーのサインアップの手間を省きながら、必要なアカウント情報を選択したデータベースに保存できます。NextAuthはGitHub、Google、Facebook、Coinbaseなど、50以上の認証プロバイダーに対応しています。

NextAuth Upstash Redis アダプターとは

現在、Upstash RedisはNextAuthが公式にサポートするデータベースの一つです。

upstash-redis NextAuthアダプターはUpstashのHTTPクライアントを使用しており、多くのホスティングサービス上で動作します。さらに、プレフィックス(接頭辞)を活用すれば、1つの無料枠の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"

認証情報の設定を簡単にするため、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の認証情報を渡します。この例では、dotenvパッケージを使って、アプリケーションのルートディレクトリにある.envファイルから値を読み込んでいます。GitHubプロバイダーの認証情報も同様の扱いです。

環境変数の設定

環境変数を設定するには、以下の内容で.envファイルを作成します。

UPSTASH_REDIS_URL=
UPSTASH_REDIS_TOKEN=
GITHUB_ID=
GITHUB_SECRET=

Upstashの認証情報はUpstashコンソールから取得できます。コンソールにログインし、データベースを作成したら、概要画面でそのデータベースをクリックしてください。図1は、必要な認証情報が表示されるコンソール内の場所を示しています。

GitHubプロバイダーの認証情報は、GitHubアカウントに新しいOAuthアプリケーションを登録すると取得できます。図2は登録フォームの様子です。ローカルマシンでサンプルを実行する場合は、URLとしてhttps://localhost:3000を指定してください。

アプリを登録すると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アカウントの情報が表示されるはずです。

1つのRedisデータベースを複数アプリケーションで共有する

Upstashでは、アカウントごとに1つの無料Redisデータベースが提供されています。このデータベースは、書き込まれるすべてのキーに付与されるプレフィックスを指定すれば、互いに独立した複数のアプリケーションで利用できます。

設定するには、pages/api/auth/[...nextauth].js内のコードを変更します。アダプターのファクトリー関数は、Upstash Redisクライアントに加えて第2引数を受け取ります。

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

これにより、複数アプリのユーザーデータがデータベース内で衝突する心配がなくなります。

まとめ

NextAuthは、面倒な作業なしにアプリケーションへ認証機能を組み込める非常に便利なライブラリです。そしてUpstash Redisも同様に扱いやすく、シンプルなRedisデータベースホスティングサービスです。新しく登場したNextAuth用Upstash Redisアダプターによって、この2つは強力な相乗効果を発揮し、短時間で新しいアプリケーションを開発できるようになります。

Upstash Redisはサーバーレスデータベースなので、利用した分だけの支払いで済みます。そのため、まだユーザーのいないアプリに高額な請求が来ることを心配せずに、複数のMVPをテストしながら素早く反復改善できます。