🔏

[Next.js] Auth.jsでマルチログイン機能を実装する

2023/05/17に公開

この記事のゴール

localhost:3000でGoogle, Github, FaceBook, LinkedInアカウントでログイン機能を実装する
サンプルのリポジトリはこちらです。
https://github.com/22yk/nextauth-multi-login

実装手順

以下の手順で実装します。

  1. Next.jsプロジェクト作成/NextAuthインストール
  2. Session Provider
  3. [...nextauth].jsの作成/.env.localの作成
  4. ログイン画面実装
  5. ローカル環境でテスト
  6. 各プロバイダの認証情報を取得(CLIENT ID, CLIENT SEACRET)
  7. JWTのシークレット取得
  8. 環境変数を設定
  9. 動作確認

1. Next.jsプロジェクト作成/NextAuthインストール

Next.jsプロジェクト作成

プロジェクト名をnextauth_multi_loginとして進めます

$ npx create-next-app nextauth_multi_login --ts

NextAuthインストール

公式のGetting Started に沿って進めてください

  1. npm install next-authまたはyarn add next-authを実行
  2. touch pages/api/auth/[...nextauth].js[...nextauth].jsを作成

2. Session Provider

src/pages/_app.tsx のComponentをSessionProviderでラップすると、useSession() を通し Component間で Session情報を共有できます。 以下の様に設定してください。

pages/_app.jsx
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

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

3.  [...nextauth].jsの設定/.env.localの作成

次に.env.local を作成し NEXTAUTH_URL を設定します。
[CLIENT ID], [CLIENT SECRET], には後に各プロバイダから取得するCLIENT ID, CLIENT SEACRETを、[JWT SECRET]にはJWTシークレットを環境変数としてセットします。

env.local
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=[JWT SECRET]

# Google
GOOGLE_CLIENT_ID=[CLIENT ID]
GOOGLE_CLIENT_SECRET=[CLIENT SECRET]

# Github
GITHUB_CLIENT_ID=[CLIENT ID]
GITHUB_CLIENT_SECRET=[CLIENT SECRET]

# Facebook
FACEBOOK_CLIENT_ID=[CLIENT ID]
FACEBOOK_CLIENT_SECRET=[CLIENT SECRET]

# LinkedIn
LINKEDIN_CLIENT_ID=[CLIENT ID]
LINKEDIN_CLIENT_SECRET=[CLIENT SECRET]

4. ログイン画面実装

ログイン画面は以下のようにします。

pages/_app.jsx
import React from 'react';
import { useSession, signIn, signOut } from 'next-auth/react';
import { NextPage } from 'next';

const Login: NextPage = () => {
    const { data: session } = useSession();
    return (
        <>
            {
                session && (
                    <div>
                       <h1>ようこそ, {session.user && session.user.name}さん</h1>
                        <button onClick={() => signOut()}>ログアウト</button>
                    </div>
                )
            }
            {
                !session && (
                    <div>
                        <p>ログインしていません</p>
                        <button onClick={() => signIn()}>ログイン</button>
                    </div>
                )
            }
        </>
    );
};

export default Login;

上記を実装すると以下の様な画面になっているはずです。

5. ローカル環境でテスト

一度、動くかどうかをテストします。ログインボタンを押下してみてください。
すると以下のような画面になるはずです。

この段階ではまだ、認証情報が設定されていないため、以下のようなエラーが起きます。
次章で認証情報を取得します。

6. 各プロバイダの認証情報を取得(CLIENT ID, CLIENT SEACRET)

プロバイダから認証情報を取得します。
公式ドキュメントに従ってCLIENT ID, CLIENT SEACRETを取得してください。
当たり前ですが、各プロバイダのアカウントが必要です。

Google

https://console.cloud.google.com/apis/credentials

Github

https://github.com/settings/apps

FaceBook

https://developers.facebook.com/apps/create/

LinkedIn

https://www.linkedin.com/developers/login

CLIENT ID, CLIENT SEACRETが取得できたら
.env.local[CLIENT ID], [CLIENT SECRET]に記述してください。

7. JWTのシークレット取得

以下のコマンドを入力し、シークレットを取得してください。

$ openssl rand -base64 32

eeb◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯ef6/bF1aN8=のような値を取得できたら、
.env.localの[JWT SECRET]に記述してください。

8. 動作確認

ここまでで準備は完了しました。
以下の画面からログインしたいプロバイダのボタンを押してください。
(例ではGoogleログインを試行)

すると以下のように認証画面が出ます。

認証ができたら以下の様に名前が表示されていれば成功です。

最後に

こんなにも簡単にログイン機能を作れるのは非常に便利ですね。
もし間違いなどがあればコメントをいただけると幸いです。

フィシルコム

Discussion