Contents [hide]
そもそも認証とは
認証とは、「あなたが本当にあなたであること」を確認するプロセスです。
手順
パッケージをインストールします
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:3000GitHubの認証情報を取得
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の認証画面が表示され、承認後にログイン完了