前回は、Authentication でプロフィールを取得しました。

今回は、Authentication でログアウトします。

まずは、フックでuseLogoutを作成します。

export const useLogout = () => {
  const logout = () => {
    signOut(fireauth)
      .then(() => {
        console.log("Sign-out successful.")
      })
      .catch(err => {
        console.log(err.message)
      })
  }

  return { logout }
}

ログアウト機能を実装するために、signOutを使用します。

firebase/authからsignOutをインポートします。

import { signOut } from "firebase/auth"

signOutfireauthを指定します。

const fireauth = firebaseApp.fireauth
export const useLogout = () => {
  const logout = () => {
    signOut(fireauth)
  }

  return { logout }
}

ログアウトが成功した場合と失敗した場合に、Console.log でメッセージを表示する様にします。

export const useLogout = () => {
  const logout = () => {
    signOut(fireauth)
      .then(() => {
        console.log("Sign-out successful.")
      })
      .catch(err => {
        console.log(err.message)
      })
  }

  return { logout }
}

ホーム画面にログアウトボタンを作成します。

useLogoutをインポートしましょう。

const { logout } = useLogout()

ログアウトのボタンを作成します。

<button onClick={logout}>ログアウト</button>

では、ブラウザで確認しましょう。

まずは、ログインします。

image2

image3

accessTokenemailを取得することができました。

では、ログアウトしてみます。

image4

『ログアウト』をクリックすると、

image5

Console にログアウトが成功したメッセージが表示されました。

accessTokenemailを再度取得してみると、

image6

usernullで返されました。

次回は、Firestore Databese にルールを編集し、認証されてるユーザーのみ、Firebase を使えるようにします。

ブログ一覧