Firebase + Microsoft で認証機能実装

Posted at 2025-03-02

背景

自社サービス作成時に社内で使用しているMicrosoft365アカウントで認証出来るようにするという仕様になりました
FirebaseとMicrosoft Entral IDを使用しての認証機能実装が可能ということは知っていたのですが

実装方法がわからなかった
調べても殆ど記事が見つからなかった

というのもあり記事に残して今後似た実装する可能性のあるエンジニアのために記事にの構想と思った次第です

ファイル構成

.
└── src
    ├── App.css
    ├── App.ts
    ├── configs
    │   └── firebase.ts → Firebaseの初期化用
    ├── hooks
    │   └── useAuth.ts → 認証周りの処理
    ├── index.css
    ├── main.tsx
    └── vite-env.d.ts

プロジェクト作成

zsh

npm create vite@latest

上記コマンドをターミナルで叩いて対話形式で会話していきます

Project name
- 自分自身の分かりやすい名前にしてください
Select a framework
- Reactを選択(別フレームワークでも問題ありませんが、今後書いていくコードは読み替えてください)
Select a variant
- Typescriptを選択(TypescriptではなくJavascriptでも問題ありませんが、今後書いていくコードは読み替えてください)

zsh

npm create vite@latest
│
◇  Project name:
│  vite-project
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /Users/roll1226/personalDevelopment/vite-project...
│
└  Done. Now run:

  cd vite-project
  npm install
  npm run dev

コードを書いていく

vite-env.d.ts

環境変数の型を定義していきます

vite-env.d.ts

/// <reference types="vite/client" />

+ interface ImportMetaEnv {
+   VITE_API_KEY: string;
+   VITE_AUTH_DOMAIN: string;
+   VITE_PROJECT_ID: string;
+   VITE_STORAGE_BUCKET: string;
+   VITE_MESSAGE_SENDER_ID: string;
+   VITE_APP_ID: string;
+   VITE_MICROSOFT_TENANT_ID: string;
+ }

+ interface ImportMeta {
+   readonly env: ImportMetaEnv;
+ }

firebase.ts

Firebaseの初期化処理になります
殆どよくみる処理ですが、OAuthProvider部分が追加しています

src/configs/firebase.ts

import { initializeApp } from "firebase/app";
import { getAuth, OAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGE_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

const app = initializeApp(firebaseConfig);
const provider = new OAuthProvider("microsoft.com");

provider.setCustomParameters({
  tenant: import.meta.env.VITE_MICROSOFT_TENANT_ID,
});

const auth = getAuth(app);

export { auth, provider };

インスタンス作成時にmicrosoft.comを引数として渡してあげます
またsetCustomParametersにMicrosoftEntralIDのテナントIDを指定してあげます

const provider = new OAuthProvider("microsoft.com");

provider.setCustomParameters({
  tenant: import.meta.env.VITE_MICROSOFT_TENANT_ID,
});

useAuth.ts

先ほどsrc/configs/firebase.tsで定義したauthとproviderを仕様して認証処理を作成していきます
実装時はsignInWithPopupにauthとproviderを引数として渡してあげるとMicrosoftの認証処理を実装してくれます

src/hooks/useAuth.ts

import { signInWithPopup, signOut } from "firebase/auth";
import { useCallback, useState } from "react";
import { auth, provider } from "../configs/firebase";

type UseAuthReturn = {
  login: () => void;
  logout: () => void;
  isLogin: boolean;
};
type UseAuth = () => UseAuthReturn;

export const useAuth: UseAuth = () => {
  const [isLogin, setIsLogin] = useState(false);

  const login = useCallback(async () => {
    await signInWithPopup(auth, provider)
      .then((r) => {
        setIsLogin(true);
        console.log(r);
      })
      .catch((e) => console.error(e));
  }, []);

  const logout = useCallback(() => {
    signOut(auth);
    setIsLogin(false);
  }, []);

  return { login, logout, isLogin };
};

App.tsx

useAuth.tsで定義した認証処理を呼んであげます

src/App.tsx

import "./App.css";
import { useAuth } from "./hooks/useAuth";

function App() {
  const { login, logout, isLogin } = useAuth();

  return (
    <>
      {isLogin ? (
        <button onClick={logout}>ログアウト</button>
      ) : (
        <button onClick={login}>ログイン</button>
      )}
    </>
  );
}

export default App;