NextAuth　Githubアカウントを利用

そもそも認証とは

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

ユーザー アプリ 認証プロバイダー (GitHub/Google/Email等) 1. ログイン要求 2. 認証リクエスト 3. 認証情報返却 主な認証方式: – ソーシャルログイン: GitHub, Google, Twitter, Facebook等 – メール/パスワード認証: 独自のユーザーデータベースを使用 – Magic Links: メールアドレスのみでワンタイムリンクを使用
https://authjs.dev/

手順

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

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”をクリック 以下を入力:

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>
  )
}

動作確認：

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