実現したいこと
Next Authを使ってのGoogle認証を実現したい。
発生している問題
フルスタックチャンネルの『Django REST Framework + Next.js + NextAuth Google認証』を見ながらNext AuthのGoogle認証を実装したのですが、ログイン画面からログインを試すとエラー画面になります。コンソールにはCALLBACK_OAUTH_ERRORと表示されます。
一人で解決するには時間が掛かりそうです。はる先生、どうかお力添えお願い致します。
ソースコード
[...nextauth].js
import GoogleProvider from "next-auth/providers/google"
import LineProvider from "next-auth/providers/line";
import axios from 'axios'
const settings = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
LineProvider({
clientId: process.env.LINE_CLIENT_ID,
clientSecret: process.env.LINE_CLIENT_SECRET,
}),
],
secret: 'secret',
callbacks: {
async signIn(user, account, profile){
if (account.provider === 'google'){
const { accessToken, idToken } = account
try {
const response = await axios.post(
`${process.env.DJANGO_URL}/api/social/login/google/`,
{
access_token: accessToken,
id_token: idToken,
}
)
const { access_token } = response.data
user.accessToken = access_token
return true
}
catch(error){
return false
}
}
return false
},
async jwt(token, user, account, profile, isNewUser){
if (user){
const { accessToken } = user
token.accessToken = accessToken
}
console.log(`account:${JSON.stringify(account)}`);
return token;
},
async session(session, user){
session.accessToken = user.accessToken
return session
},
},
pages: {
signIn: '/auth/signin',
},
}
export default (req, res) => NextAuth(req, res, settings)
### 自分で試したこと
CALLBACK_OAUTH_ERRORの内容がcode_verifier cookieが見つからなかったり、OAuthプロバイダから無効な状態が返された場合、コールバックの処理中に発生する可能性があるとのことですが、原因が特定できません。
### 補足情報
回答 3件
回答するにはログインが必要です
Githubからダウンロードして自分で書いたコードと比較しました。結果、Next.js側でのエラーではなくDRF側の設定の問題でした。
settings.pyのINSTALLED_APPSでdj_rest_authを追加し忘れていたことが原因でした。
アドバイスのおかげでエラーの原因に辿り着けました。ありがとうございました。
下記がチュートリアルのコードですので、ダウンロードしてGoogle認証できるか試してみてください。
こういった時は、下記を試してみてください。
Googleアカウント側の問題か、コードの問題かが分からないので、NextAuthの公式サンプルを動かしてみる
https://next-auth.js.org/getting-started/example
https://github.com/nextauthjs/next-auth-example
Google認証でログイン出来るか試す
Google認証がうまくいった場合は、Gooleアカウント側は問題ないので、サンプルと見比べながら、足りないコードを探す
よろしくお願いします。