Next.js × firebase で Google Logout 実装

Logout の呼び出し

公式ドキュメントによる Logout コードの記述は以下のとおり

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

それに reload (ユーザーの更新) を加え、以下のように export します

src/service/firebase.js

export const logOut = () => {
  firebase
    .auth()
    .signOut()
    .then(() => {
      console.log("logged out");
      document.location.reload();
    })
    .catch((error) => {
      console.log(error.message);
    });
};

Login button と Logout button を出し分ける

今回 Header に Login button を実装したため、ユーザーの情報の有無によって Login button と Logout　button を切り替えられるようにします

• 条件分岐は好みにより三項演算子を用いています
• npm i object-dig により obuject-dig をインストールしています
• object-dig を使用し、 currentUser uid の値を取得できるようにします

src/components/Header.jsx

import { useContext } from "react";
import { signInWithGoogle, logOut } from "../service/firebase";
import dig from "object-dig";
import { AuthContext } from "../providers/AuthProviders";

export const Header = () => {
  const currentUser = useContext(AuthContext);
  console.log(currentUser);
  const changeLogButton = () => {
    let changeLogButtonDom;
    {
      dig(currentUser, "currentUser", "uid")
        ? (changeLogButtonDom = <button onClick={logOut}>Logout</button>)
        : (changeLogButtonDom = (
            <button onClick={signInWithGoogle}>Login</button>
          ));
    }
    return changeLogButtonDom;
  };
  return <div>{changeLogButton()}</div>;
};

これにて Logout の実装は完了！