firebase ユーザーログイン、ログアウトの状態でDOMの出し分け

firebase

2022.10.12 2022.08.29

まず普通にやってみる
object-digを使ってみる
firebase-hooksを使う (おすすめ！)
1. uid、ログインしているユーザーを取得
サインアウト

まず普通にやってみる

currentUserにログイン情報が入っているので、それがあるか無いかで条件分岐して出し分ける。

import React, { useContext } from 'react'
import { AuthContext } from '../providers/AuthProvider';
import { singInWithGoogle, logOut } from '../service/firebase'

const Header = () => {
  const currentUser = useContext(AuthContext);
  const buttonRebder = () => {
    let buttonDom;
    if (currentUser) {
      buttonDom = <button onClick={logOut}>ログアウト</button>
    } else {
      buttonDom = <button onClick={singInWithGoogle}>ログイン</button>
    }
    return buttonDom;
  }
  return (
    <div>
      <header>
        ヘッダー
        {buttonRebder()}
      </header>
    </div>
  )
}

export default Header

これでは、ログアウトしてもずっとボタンの表示は、「ログアウト」のまま…

object-digを使ってみる

object-dig

This allow you to use method like Ruby's hash#dig in JavaScript.. Latest version: 0.1.3, last published: 6 years ago. Start using object-dig in your project by ...

npm i object-dig

・使い方

dig(obj, 'objInner')第一引数に探索したいオブジェクト、第２引数に探索したいキーを文字列で渡す。

そうすると、第２引数に合致したバリューが返却される。

var dig = require('object-dig');
 
var object = { a: { b: { c: 'c' } } };
 
dig(object, 'a', 'b');
// => { c: 'c' }
 
dig(object, 'a', 'b', 'c');
// => 'c'
 
dig(object, 'a', 'unknownProp', 'c');
// =>undefined

上記if文を書き換えると。

 import dig from 'object-dig';


if (dig(currentUser, 'currentUser')) {
      buttonDom = <button onClick={logOut}>ログアウト</button>
    } else {
      buttonDom = <button onClick={singInWithGoogle}>ログイン</button>
    }
    return buttonDom;
  }

currentUserの中にcurrentUserがあればそのバリューが取得できる。ということは、trueになる。

currentUserが無ければundefinedが返ってくる(falsey)。

firebase-hooksを使う (おすすめ！)

npm i --save react-firebase-hooks

import SingIn from "./componets/SingIn";
import { useAuthState } from 'react-firebase-hooks/auth'

import { auth } from './firebase'

function App() {
  const [ user ] = useAuthState(auth); //trueかfalseが返ってくる
  return (
    <div>
      {user ? <Line /> : <SingIn />}
    </div>
  );
}

export default App;

uid、ログインしているユーザーを取得

Firebase でユーザーを管理する

import { onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
  if (user) {
    const uid = user.uid;
  }
});

サインアウト

auth.signOut()を実行するだけで、サインアウトできる。

import { Button } from '@mui/material'
import { auth } from '../firebase'

const SignOut = () => {
  const singOutWithGoogle = () => {
    auth.signOut();
  }

  return (
    <div>
      <Button onClick={singOutWithGoogle}>サインアウト</Button>
    </div>
  )
}

export default SignOut