【NextAuth.js】ソーシャルログインの実装。

2022/6/21

2023/1/21

GoogleやTwitter、FacebookなどのSNSアカウントを使ってログインできる「ソーシャルログイン」の実装方法をまとめていきたいと思います。

1. 使用するパッケージをインストールする
- 「next-auth」をインストール
2. プロバイダ側（SNSサービス側）の設定をする
- 「Googleアカウント」でログインしたい場合
- 「Twitterアカウント」でログインしたい場合
3. Next.js側の設定をする
4. ログインボタンを作る
5. ログインユーザー情報をデータベースに保存する

1. 使用するパッケージをインストールする

「next-auth」をインストール

$ npm install next-auth

2. プロバイダ側（SNSサービス側）の設定をする

GoogleやTwitterなど認証機能を使いたいサービスごとに「⑴ clientId」と「⑵ clientSecret」を事前に取得する必要があります。

「Googleアカウント」でログインしたい場合

Google Cloud Platform（GCP）で「clientId」と「clientSecret」の2つを取得します。

こちらは下記記事がとても参考になりました。

NextAuth.jsを使ったGoogle認証機能＋データベース(Prisma)の設定の理解

「Twitterアカウント」でログインしたい場合

※分かり次第更新します。

3. Next.js側の設定をする

「.env」ファイル

プロバイダ側の設定で取得した「clientId」と「clientSecret」を.envファイル内記載します。

（もしトップディレクトリに.envファイルがない場合は作成してください。）

GOOGLE_CLIENT_ID=[取得したクライアントID]
GOOGLE_CLIENT_SECRET=[取得したクライアントシークレット]

「pages/api/[…nextauth].js」ファイル

pages/apiディレクトリ内にauthフォルダを作成し、そこに[...nextauth].jsを作成します。

[…nextauth].jsでは「使用するプロバイダの指定」をします。

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
    // 1: ログインに使用するプロバイダを指定
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    secret: 'secret',
});

プロバイダごとに記載方法が異なるので、こちらの記事を参考に選んで記載してみてください。

NextAuth.jsで使える主要なプロバイダ一覧まとめ。

「_app.js」ファイル

_app.jsのComponentをSessionProviderで囲います。

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

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

4. ログインボタンを作る

NextAuthでは、signIn()でログイン、signOut()でログアウトの処理を実装することができます。

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

export default function LoginButton(props) {
    // セッション情報を取得
    const { data: session } = useSession()

    return (
        {session ?  // ログイン判定
            <button onClick={() => signOut()}>ログアウト</button>:
            <button onClick={() => signIn()}>ログイン</button>
        }
    );
};