Zenn
🐙

NextAuth.jsを導入し、GitHubアカウントでログイン可能にする（Pages Router版）

2023/02/19に公開
GitHub
NextAuth
tech

目標

localhost:3000でGitHubアカウントでログイン可能にする

https://github.com/nextauthjs/next-auth-example

選定理由

Google・GitHubでログインが簡単に実装できそう
email passwordでログインも可能
スター数が多い
更新が活発

実装

公式のGetting Started に沿って進めます

  1. npm install next-authまたはyarn add next-authを実行
  2. pages/api/auth/[...nextauth].jsを追加
pages/api/auth/[...nextauth].js
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}
export default NextAuth(authOptions)
  1. pages/_app.jsxに以下を追加
pages/_app.jsx
import { SessionProvider } from "next-auth/react"
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}
  1. signIn signOutボタンを追加したい場所に以下コードを追加
    今回はpages/signin.tsxに追加
pages/signin.tsx
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.name} <br />
        <img
          src={session.user.image}
          alt="icon"
          style={{ width: "100px", height: "100px" }}
        />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

これでSign in with GitHubボタンが追加出来ました
しかしクリックしてもTry signing in with a different account.とエラーになります

これは[...nextauth].jsで環境変数を読み込んでるがそれが存在しないため

clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,

なのでGITHUB_IDとGITHUB_SECRETを用意して.env.localに追加します

  1. https://github.com/settings/apps にアクセスしNew Github Appボタンをクリックして以下を入力
    Github App nameに任意の名前（他のユーザーと被るとエラーになる）
    Homepage URL
    Callback URL
    →callback URLがないとThis GitHub App must be configured with a callback URLエラーが出るので追加必要。Homepage URLと同じでも問題ない）
    Webhook Activeのチェックを外す（今回は必要ナシ）


  1. Create Github Appボタンをクリック

  2. Client IDが表示されるので.env.localのGITHUB_IDに追加

  3. Generate a new client secretボタンをクリックするとclient secretという長い文字列が表示されるのでコピーして.env.localのGITHUB_SECRETに追加

.env.localは以下のようになります

.env.local
GITHUB_ID=Client IDの値
GITHUB_SECRET=client secretの値

  1. Save Changesボタンをクリック

  2. localhostの方のボタンをクリックすると以下画面になる

Authorizedをクリックすると

ログインできました！

最後に

こんなに簡単にログイン実装できるのは神
間違いなどありましたらコメント頂けると幸いです！

Discussion