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