【Next】Firebase Authentication で取得したユーザ情報を整形してアプリケーション内で使う

Firebase Authentication を活用したアプリケーションにおいて、取得したユーザ情報を useContext などを使ってグローバルに保持するケースがあると思います。

具体的には以下のような実装です。

import { FC, createContext, useEffect, useState } from 'react';
import firebase from '../lib/firebase';

type AuthContextProps = {
  currentUser: firebase.User | null | undefined
}

const AuthContext = createContext<AuthContextProps>({ currentUser: undefined });

const AuthProvider: FC = ({ children }) => {
  const [currentUser, setCurrentUser] = useState<firebase.User | null | undefined>(undefined)

  useEffect(() => {
    // ログイン状態をウォッチ
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // ユーザ情報を格納する
        setCurrentUser(user)
      }
    })
  },[])

  return (
    <AuthContext.Provider value={{ currentUser: currentUser }}>
      {children}
    </AuthContext.Provider>
  )
}

export { AuthContext, AuthProvider }

これでもユーザ情報を格納する目的は果たされるのですが、不要なプロパティを含んだ未整形のユーザオブジェクトがごそっと保持されてしまい、使い勝手がよくありません。

その場合、ユーザ情報を格納する際には、アプリケーション内で必要なプロパティのみを取捨選択した新たなオブジェクト（mappedUser）を作り、それを格納する使い方が有効です。

（略）

export type User = {
  uid: string
  displayName: string | null
  email: string | null
  emailVerified: boolean
  isAnonymous: boolean
  phoneNumber: string | null
  photoURL: string | null
}

useEffect(() => {
    // ログイン状態をウォッチ
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {

        // 必要なプロパティのみを集めた `mappedUser` オブジェクトを定義
        const mappedUser = {
          uid: user.uid,
          displayName: user.displayName,
          email: user.email,
          emailVerified: user.emailVerified,
          isAnonymous: user.isAnonymous,
          phoneNumber: user.phoneNumber,
          photoURL: user.photoURL
        }

        setCurrentUser(mappedUser)
      }
    })
  },[])

（略）

参考記事

今更ながらのNext.js + TypeScript + Firebaseで認証機能を実装する