NextAuthとサーバーレスRedisを使用したNext.js認証

環境変数を設定するには、.envを作成する必要があります 次の内容のファイル：

    UPSTASH_REDIS_URL=
    UPSTASH_REDIS_TOKEN=
    GITHUB_ID=
    GITHUB_SECRET=

UpstashコンソールからUpstashクレデンシャルを取得します。コンソールにログインし、データベースを作成して、概要でそれをクリックします。図1は、必要な資格情報を含むコンソール内の場所を示しています。

GitHubアカウントに新しいOAuthアプリケーションを登録すると、GitHubプロバイダーの資格情報を取得します。図2に登録フォームを示します。ローカルマシンで例を実行するには、URLとしてhttp：// localhost：3000を使用する必要があります。

アプリを登録すると、クライアント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

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