NextAuth　Githubアカウントを利用

投稿日 2022年9月29日
更新日 2024年11月8日
著者 i_20220622
カテゴリー Next.js

そもそも認証とは

認証とは、「あなたが本当にあなたであること」を確認するプロセスです。

手順

パッケージをインストールします

npm install next-auth

認証の設定ファイルを作成します

app/api/auth/[…nextauth]/route.tsを作成します

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

const handler = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
})

export { handler as GET, handler as POST }

環境変数を設定します

プロジェクトのルートに.envファイルを作成します

GITHUB_ID=あなたのGitHub Client ID
GITHUB_SECRET=あなたのGitHub Client Secret
NEXTAUTH_SECRET=任意の安全な文字列
NEXTAUTH_URL=http://localhost:3000

GitHubの認証情報を取得

GitHub.comにログイン Settings > Developer settings > OAuth Apps “New OAuth App”をクリック以下を入力:

Application name: 任意の名前
Homepage URL: http://localhost:3000
Authorization callback URL: http://localhost:3000/api/auth/callback/github

NextAuthのプロバイダーを設定します

app/layout.tsxを編集します

import { SessionProvider } from "next-auth/react"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  )
}

ログインボタンを作成します

app/page.tsxを編集します

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

export default function Home() {
  const { data: session } = useSession()

  if (session) {
    return (
      <div>
        <p>ようこそ, {session.user?.name}さん</p>
        <button onClick={() => signOut()}>ログアウト</button>
      </div>
    )
  }

  return (
    <div>
      <p>ログインしていません</p>
      <button onClick={() => signIn('github')}>GitHubでログイン</button>
    </div>
  )
}

動作確認：

http://localhost:3000 にアクセス
「GitHubでログイン」ボタンをクリック
GitHubの認証画面が表示され、承認後にログイン完了