kaz.dev

Vercel + Firebase Authentication で illegal url for new iframe になる

tag: vercel


はじめに

localではうまくのにdeployするとこける
はじめはnext-authのせいかと思ったけど、よくよく考えたらその手前なのでFAかVercelしかなかった





原因

エラーのURLをよくよく見ると

https://hoge.firebaseapp.com%0A/__/auth/iframe?apiKey=key%0A&appName=%5BDEFAULT%5D&v=9.6.6&eid=p&usegapi=1

みたいな感じ

Chromeのコンソールで

new URL("https://hoge.firebaseapp.com%0A/__/auth/iframe?apiKey=key%0A&appName=%5BDEFAULT%5D&v=9.6.6&eid=p&usegapi=1")

と叩くと

Uncaught TypeError: Failed to construct 'URL': Invalid URL

と怒られた

原因は%0Aの改行コードがなぜか入ってるから





解決策

まず、vercelのenvを全てチェックしたり、書き換えたが変わらなかった

多分読み出しが原因なので

import { initializeApp } from "firebase/app";
import type { FirebaseOptions } from "firebase/app";

const firebaseConfig: FirebaseOptions = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY?.trim(),
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN?.trim(),
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL?.trim(),
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID?.trim(),
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET?.trim(),
  messagingSenderId:
    process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID?.trim(),
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID?.trim(),
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID?.trim(),
};

export const firebaseApp = initializeApp(firebaseConfig);

と読み出し時にtrimで除去した

"123\n".trim() // '123'