この記事のゴール
localhost:3000でGoogle, Github, FaceBook, LinkedInアカウントでログイン機能を実装する
サンプルのリポジトリはこちらです。
実装手順
以下の手順で実装します。
- Next.jsプロジェクト作成/NextAuthインストール
- Session Provider
- [...nextauth].jsの作成/.env.localの作成
- ログイン画面実装
- ローカル環境でテスト
- 各プロバイダの認証情報を取得（CLIENT ID, CLIENT SEACRET）
- JWTのシークレット取得
- 環境変数を設定
- 動作確認
1. Next.jsプロジェクト作成/NextAuthインストール
Next.jsプロジェクト作成
プロジェクト名をnextauth_multi_loginとして進めます
$ npx create-next-app nextauth_multi_login --ts
NextAuthインストール
公式のGetting Started に沿って進めてください
-
npm install next-authまたはyarn add next-authを実行 -
touch pages/api/auth/[...nextauth].jsで[...nextauth].jsを作成
2. Session Provider
src/pages/_app.tsx のComponentをSessionProviderでラップすると、useSession() を通し Component間で Session情報を共有できます。 以下の様に設定してください。
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シークレットを環境変数としてセットします。
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. ログイン画面実装
ログイン画面は以下のようにします。
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を取得してください。
当たり前ですが、各プロバイダのアカウントが必要です。
Github
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ログインを試行）
すると以下のように認証画面が出ます。
認証ができたら以下の様に名前が表示されていれば成功です。
最後に
こんなにも簡単にログイン機能を作れるのは非常に便利ですね。
もし間違いなどがあればコメントをいただけると幸いです。
フィシルコムのテックブログです。マーケティングSaaSを開発しています。 マイクロサービス・AWS・NextJS・Golang・GraphQLに関する発信が多めです。 カジュアル面談はこちら（ficilcom.notion.site/bbceed45c3e8471691ee4076250cd4b1）から
Discussion