Next.jsでのソーシャルログイン機能の追加

Next.jsで作成されたアプリケーションにソーシャルログイン機能を追加する方法について説明します。

目次

1. 環境設定と必要なパッケージのインストール
2. プロバイダー用のAPIキーとシークレットキーの取得
3. next-authの設定
4. ソーシャルログイン用のコンポーネントの作成
5. ソーシャルログインの実装

1. 環境設定と必要なパッケージのインストール

まず、必要なパッケージをインストールしましょう。next-authを使用してソーシャルログインを実装するため、next-authと対応するプロバイダーをインストールします。

npm install next-auth
npm install @next-auth/{プロバイダー名}

2. プロバイダー用のAPIキーとシークレットキーの取得

それぞれのプロバイダー（Google、Facebook、Twitterなど）からAPIキーとシークレットキーを取得します。これらのキーは、次の手順でnext-authの設定に使用されます。

3. next-authの設定

next-authを設定するために、./pages/api/auth/[...nextauth].jsファイルを作成し、以下のように記述します。

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.{プロバイダー名}({
      clientId: process.env.{プロバイダー名}_CLIENT_ID,
      clientSecret: process.env.{プロバイダー名}_CLIENT_SECRET,
      callbackUrl: process.env.CALLBACK_URL,
    }),
  ],
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
  },
});

次に、.env.localファイルに環境変数を設定します。

{プロバイダー名}_CLIENT_ID=取得したAPIキー
{プロバイダー名}_CLIENT_SECRET=取得したシークレットキー
CALLBACK_URL=コールバックURL
JWT_SECRET=jwtシークレット

4. ソーシャルログイン用のコンポーネントの作成

ソーシャルログインボタンを表示するためのコンポーネントを作成します。

// components/SocialLoginButton.js
import { signIn } from 'next-auth/client';

function SocialLoginButton({ provider }) {
  return (
    <button onClick={() => signIn(provider.id)}>{provider.name}でログイン</button>
  );
}

export default SocialLoginButton;

5. ソーシャルログインの実装

最後に、ソーシャルログインボタンを表示するために、コンポーネントを適切な場所に配置します。

// pages/index.js
import { getProviders } from 'next-auth/client';
import SocialLoginButton from '../components/SocialLoginButton';

export default function Home({ providers }) {
  return (
    <div>
      <h1>ソーシャルログイン</h1>
      {Object.values(providers).map((provider) => (
        <SocialLoginButton key={provider.id} provider={provider} />
      ))}
    </div>
  );
}

export async function getServerSideProps(context) {
  const providers = await getProviders();
  return {
    props: {
      providers,
    },
  };
}

以上で、Next.jsアプリケーションにソーシャルログイン機能を追加できました。適切な環境設定とコンポーネントの配置を行うことで、簡単に他のソーシャルネットワークを追加できます。