Auth.js(NextAuth v5)のOAuthでinvalid_requestエラーを回避する

運用中のNext.jsアプリに組み込んでいるNextAuth.js v4をAuth.js(NextAuth v5)にバージョンアップし、Auth.jsのガイドに従いOAuth(Google)を実装したところ、ローカル環境上は問題なかったのにCloud Runにデプロイしサインイン処理しようとすると次のようなエラーが出てしまいました。

You can’t sign in to this app because it doesn’t comply with Google’s OAuth 2.0 policy for keeping apps secure.
エラー 400: invalid_request
リクエストの詳細: redirect_uri=https://0.0.0.0:3000/api/auth/callback/google flowName=GeneralOAuthFlow
サインイン処理はガイドを真似て下記のように実装していました(ガイトとほぼ一緒)。
// sign-in.tsx 

"use client";

import { signIn } from "next-auth/react";

export default function SignIn() {
    return (
        <button
            onClick={() => signIn("google")}
        >
            Googleでサインイン
        </button>
    );
}
結論から申し上げると、この”next-auth/react”のsignIn関数を使うのではなく、auth.tsでexportするsignIn関数を利用すると先のエラーを解消できました。auth.tsもガイドに従いsignIn関数をexportする書き方をしているにもかかわらず、このsignIn関数を利用していなかったので気になってはいました。私の環境ではそちらを利用するのが正解だったようです。
下記がうまくいった実装内容です。
最初のauth.tsはガイドそのものですが参照するため掲載しています。そのauth.jsでexportしているsignInはコード2つ目のサーバーアクション内で呼び出しています。そのサーバーアクションをコード3つ目のサインインフォームのactionで呼び出すようにしました。
// auth.ts(ガイドそのまま)

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"

export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: [Google],
})
// sign-in-action.ts

"use server";

import { signIn } from "@/auth";

export async function signInAction() {
    await signIn("google");
}
// sign-in.tsx

"use client";

import { signInAction } from "@/sign-in-action";

export default function SignIn() {
    return (
        <form action={signInAction}>
            <button>
                Googleでサインイン
            </button>
        </form>
    );
}
以上がうまくいったコードになります。
同じような問題に遭遇している人の役に立てれば幸いです😊
sponsor