NextAuth.js : Getting Started – Add API route

1. Reference
https://next-auth.js.org/getting-started/example#add-api-route

2. Add API route

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)

3. ハマる場所
以下の2つはGITHUB内,NextAuth.js内で検索しても出てこない
– GITHUB_ID
– GITHUB_SECRET

yahoo 知恵袋でgithub IDってどれのことですか?
ベストアンサー:
アカウントは作成済みですか?githubのアカウント登録時に設定したIDです。

4. OAuth の説明の最後の方にヒントがある
– Home > Configuration > Providers > OAuth
https://next-auth.js.org/configuration/providers/oauth#override-default-options
– clientId: process.env.GOOGLE_CLIENT_ID,
               ^^^^^^^^
– clientSecret: process.env.GOOGLE_CLIENT_SECRET,
                 ^^^^^^^^

$ cat /api/auth/[...nextauth].js
import GoogleProvider from "next-auth/providers/google"

GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,

  profile(profile) {
    return {
      // Return all the profile information you need.
      // The only truly required field is `id`
      // to be able identify the account when added to a database
    }
  },
})

5. In short
GITHUB_ID -> GITHUB の ‘client id’
GITGUB_SECRET -> GITHUB の ‘client secret’

6. Create ‘client id’ and ‘client secret’

GITHUB
  |- Settings 
        |- Developers settings - OAuth Apps - [New OAuth App]

Register a new OAuth application
https://github.com/settings/applications/new

7. 元のAdd API route のcodeはどうであれば、迷わなかったか?

要 変更
GithubProvider({
  clientId: process.env.GITHUB_ID,
  clientSecret: process.env.GITHUB_SECRET,
}),
GithubProvider({
  clientId: process.env.GITHUB_CLIENT_ID,
  clientSecret: process.env.GITHUB_CLIENT_SECRET,
}),