logo 公式Webサイト

パワフルな
ブログ

①next.js・typeScript・firebaseでサインアップ、ログイン機能を作る

firebaseJavaScriptReact
2024年4月4日

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 {
  //初期設定されたものがあるなら、getApp()でそのアプリを取得
  app = getApp();
}

//auth機能のインスタンスが生成される関数を変数に代入
const auth = getAuth(app);

export { auth };

initializeApp, getApp, getAppsメソッドをインポート

import { initializeApp, getApp, getApps } from "firebase/app";

Firebase SDKで提供される「初期設定の為」に必要なinitializeAppメソッド、「初期設定されたアプリを取得する為」のgetApp関数, 「設定の終わったアプリをリスト化する為」のgetApps関数をfirebase/app（モジュールインストール時に追加されたディレクトリ）からインポートします。

認証機能を使うためのメソッドをインポート

// 認証機能を取得するために追加
import { getAuth } from "firebase/auth";

firebaseの認証機能を使うために、getAuthというメソッドが用意されているため、インポートが必要です。

getAuth(初期設定のされたアプリ)と定義することで、そのアプリで認証機能を使用できます。

初期設定をする為のオブジェクトを定義

初期設定をするinitializeAppメソッドは引数に規定のオブジェクトを渡すことで、初期設定が実行されます。

そのため、引数に入れる為のオブジェクトをfirebaseConfigとして定義しています。

//初期設定をする上で必要な設定オブジェクト
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
};

各種値については、セキュリティの観点から.env.localファイルに記述して環境変数として扱う必要があるので、そこから使用しています。

初期設定をしたアプリを定義する定数を作成

後ほど初期設定を行うアプリを入れる定数を作成します。

//初期設定がされているアプリを入れるための定数
let app;

初期化されているアプリをapp定数に代入

getAppsメソッドで初期設定がされているアプリを取得し、存在しない場合はinitializeAppメソッドで初期設定を実行してapp定数に代入します。もしすでに設定されているものがある場合はgetAppメソッドを扱って、初期設定のされたアプリを取得してapp定数に代入します。
これでapp定数には初期設定されたfirebaseアプリが格納される形となります。

//getApps()で初期化されたアプリをリスト化、その中に値がなければ中の処理を実行
if (!getApps().length) {
  //initializeApp(設定したオブジェクト)でアプリの初期設定を行う
  app = initializeApp(firebaseConfig);
} else {
  //初期設定されたものがあるなら、getApp()でそのアプリを取得
  app = getApp();
}

auth機能を使う為のインスタンスを作成

認証機能を扱うためにgetAuthメソッドを使用し、authの中にインスタンスが生成されるようにします。
これをすることで、変数authをインポートしたページでは生成されたインスタンスの中から認証機能に纏わるメソッドを扱うことができます。
今回はログインとサインアップ実装に伴い、必須となります。

const auth = getAuth(app);

auth機能のインスタンスを生成するauth変数をエキスポート

作成した、auth変数をエキスポートします。
これをインポートすることで、そのページでauthインスタンスに含まれるメソッドを使用することができます。

export { auth };