Next.jsにてAuth.js（旧Next-Auth）を導入したいが、GoogleのOAuthを組み込むことができない

Question

実現したいこと

Next.jsにてAuth.js（旧Next-Auth）をを使用して、GoogleのOAuthを組み込みたい

発生している問題・分からないこと

以下のエラーが面が表示された。

エラーメッセージ

アクセスをブロック: 認証エラーです
The OAuth client was not found.
このアプリのデベロッパーの場合は、エラーの詳細をご確認ください。
エラー 401: invalid_client

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Next.jsを新たに立ち上げ（６月２０日時点で最新のバージョン、app router使用）、Auth.jsはbeta版をインストールしました。beta版については、公式サイトにてバージョン４からbeta版となったときに破壊的変更が行われたために、特段の理由がない場合はbeta版を推奨していたためです。
そこから、Next.js、Auth.jsの公式サイトに従い、トップページの真ん中にGoogleサインインのボタンを配置するだけのページを作成しました。

中心に”Signin with Google”とあるだけのページ

google cloudでは、以下のように設定を行いました。
（一部ID等を隠しております。）

ディレクトリ構成やファイルは以下のように、公式ページそのままなはずです。







google chrome, microsoft edge, firefoxの3つのブラウザーで、拡張機能を切った状態でも発生しました。

追記

GitHubのOAuth認証の設定も行ってみたところ、Chrome、Edgeでは以下の画面が表示されました。

その一方で、FirefoxとBraveブラウザーでは、以下の画面が表示されました。

しかし、FirefoxとBraveでGithubからサインインを行おうとすると、Chrome、Edgeの時と同様の404エラーが表示されました。

GithubのDeveloper Settingを見てみると、以下のようにキーが”Never Used”となっていましたので、Auth.js側から呼び出されていないようです。

Auth.jsのバグのようにも感じられます。

Answer 1

.env.localの値について、{}を外すと正常に動作しました。