公式Webサイト
お問い合わせ
ブログ
パワフルな
ブログ一覧
firebase
JavaScript
next.js
PHP
React
Stripe
TypeScript
WordPress
①next.js・typeScript・firebaseでサインアップ、ログイン機能を作る
next.js・typeScript・firebaseでサインアップ、ログイン機能を作る機会があり、キャッチアップを行なったのでまとめたいと思います。 firebaseConfigの作成 プロジェクトのルートディレクトリ直下にfirebaseとの接続や、firebaseライブラリを使用するために必要な初期設定を行う、firebaseConfig.tsファイルを作成します。 firebaseConfig.ts import { initializeApp, getApp, getApps } from "firebase/app"; // 認証機能を取得するために追加 import { getAuth } from "firebase/auth"; //初期設定をする上で必要な設定オブジェクト const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }; //初期設定がされているアプリを入れるための定数 let app; //getApps()で初期化されたアプリをリスト化、その中に値がなければ中の処理を実行 if (!getApps().length) { //initializeApp(設定したオブジェクト)でアプリの初期設定を行う app = initializeApp(firebaseConfig); } else […]
