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'