運用中の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
エラー 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>
);
}
以上がうまくいったコードになります。
同じような問題に遭遇している人の役に立てれば幸いです😊