Zenn
🤯

【完全解決】Vercel環境変数の罠でGoogle OAuth認証が失敗する問題を1時間溶かした話

に公開
Next.js
Vercel
OAuth
環境変数
googleauth
tech

TL;DR

Vercel CLIで環境変数を設定する時、改行文字が含まれてGoogle OAuth認証が失敗していた。echo -nを使えば解決！

# ❌ ダメな例（改行が入る）
vercel env add GOOGLE_CLIENT_ID production
> 値を入力してEnter... # ← ここで改行が入る！

# ✅ 正しい例（改行が入らない）
echo -n "your-client-id" | vercel env add GOOGLE_CLIENT_ID production

🔥 1時間溶かした「Error 400: invalid_request」

本番環境にデプロイしたら、こんなエラーが...

Google OAuth Error

エラー 400: invalid_request
You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy

localhostでは完璧に動くのに、本番環境（salary.ryosh.in）だけエラー！

🕵️ 原因調査の泥沼

最初に疑ったこと：

  • ❓ Google Cloud ConsoleのリダイレクトURI設定ミス？
  • ❓ OAuth同意画面の設定？
  • ❓ HTTPSじゃない？
  • ❓ Vercelの設定問題？

全部確認したけど問題なし...

💡 まさかの原因発見

Vercelの環境変数を実際にダウンロードしてみたら...

vercel env pull .env.vercel.production --environment production
cat .env.vercel.production

GOOGLE_CLIENT_ID="1054446564538-xxxxx.apps.googleusercontent.com\n"
GOOGLE_CLIENT_SECRET="GOCSPX-xxxxxxxxxxxxx\n"
GOOGLE_REDIRECT_URI="https://salary.ryosh.in/api/auth/callback\n"

なんと末尾に\n（改行文字）が！！

🎯 なぜ改行が致命的だったか

Google OAuthはリダイレクトURIの完全一致を要求します：

期待される値 実際の値（見えない改行付き）
https://salary.ryosh.in/api/auth/callback https://salary.ryosh.in/api/auth/callback\n

この見えない1文字の違いで認証が失敗！

🛠️ 解決方法

1. 既存の環境変数を削除

vercel env rm GOOGLE_CLIENT_ID production --yes
vercel env rm GOOGLE_CLIENT_SECRET production --yes
vercel env rm GOOGLE_REDIRECT_URI production --yes

2. 改行なしで再設定（echo -nが重要！）

echo -n "your-client-id" | vercel env add GOOGLE_CLIENT_ID production
echo -n "your-client-secret" | vercel env add GOOGLE_CLIENT_SECRET production
echo -n "https://your-domain/api/auth/callback" | vercel env add GOOGLE_REDIRECT_URI production

3. デプロイして確認

git push  # または vercel --prod

🚨 同じ罠にハマらないための予防策

1. 環境変数追加時は必ずecho -nを使う

# ✅ 常にこの形式で
echo -n "値" | vercel env add KEY_NAME production

2. 追加後は必ず確認

# 環境変数をダウンロードして確認
vercel env pull .env.check --environment production

# 改行文字を可視化して確認
cat -v .env.check | grep KEY_NAME

3. 複数の環境変数を一括設定するスクリプト

#!/bin/bash
# deploy-env.sh

# 改行なしで環境変数を設定
echo -n "your-client-id" | vercel env add GOOGLE_CLIENT_ID production
echo -n "your-secret" | vercel env add GOOGLE_CLIENT_SECRET production
echo -n "https://your-domain.com" | vercel env add NEXTAUTH_URL production

echo "✅ 環境変数の設定完了"

📊 この問題の発生確率

実は結構高い！なぜなら：

  1. Vercel CLIのデフォルト動作

    • 対話型プロンプトでEnterを押すと改行が入る
    • ドキュメントにも明記されていない

  2. 見えない文字

    • ブラウザのエラーメッセージには表示されない
    • Vercelのダッシュボードでも見えない

  3. localhostとの挙動の違い

    • 開発環境では.env.localを手動で作成（改行なし）
    • 本番環境だけCLIで設定（改行あり）

🎓 学んだこと

  1. 環境変数の値は「見た目」を信じるな

    • 必ず実際の値をダウンロードして確認
    • cat -vで不可視文字を可視化

  2. OAuth認証のデバッグは設定値の完全一致から

    • エラーメッセージは曖昧（セキュリティのため）
    • 1文字の違いも許されない

  3. CLIツールの対話型入力は罠が多い

    • パイプで値を渡す方が安全
    • スクリプト化して再現性を確保

🏃 まとめ

Vercel CLIで環境変数を設定する時は、必ずecho -nを使おう！

この記事が同じ問題で悩む人の助けになれば幸いです。もし役に立ったら、ぜひシェアしてください！

🔗 関連リンク

🏷️ タグ

#Vercel #GoogleOAuth #環境変数 #NextJS #認証エラー #デバッグ

GitHubで編集を提案

Discussion