【Firebase】React Router+Firebase+Cloudflareで認証サイトを作った(2025-06-12時点)

The blog is now open for testing.

2025/6/12 - 3 : 5

やりかったこと

私が開発しているWeb3 SDKであるVXのダッシュボードやドキュメントで使うアカウント連携機能用に認証アプリケーションを作る。

処理の流れ

ドキュメントサイトなどでログインボタン押下 => 認証ページに遷移 => Google又はGitHubで認証 => 元のページに戻る

コールバックで元のページに戻った段階で裏で認証情報を読み取ります

APIキーで詰んだ

エラーコード

code

// うごかねぇ
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
//import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,　// process.envではよめない
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };

修正済コード

code

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
//import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: import.meta.env.VITE_REACT_APP_API_KEY,
  authDomain: import.meta.env.VITE_REACT_APP_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_REACT_APP_PROJECT_ID,
  storageBucket: import.meta.env.VITE_REACT_APP_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_REACT_APP_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_REACT_APP_APP_ID,
  measurementId: import.meta.env.VITE_REACT_APP_MEASUREMENT_ID
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//const analytics = getAnalytics(app);
const auth = getAuth(app);

export { auth };

動かなかった原因

認証用サイトは裏でViteを使っていたのですが、Vitejsはほかのフロントエンドフレームワークとは環境変数の読み込み方が違っており、それが原因でローカルでもデプロイ先でも画面がブラックアウトしたまま固まってしまってましたw

エラーの解消に数時間かかった...

認証サイト

https://auth.varius.technology/

参考

https://dash.cloudflare.com/

https://qiita.com/bisketoriba/items/0b70fd5e130e8eabeeb1

Back to blog