【Firebase】Authenticationでログアウトする
Firebase

【Firebase】Authenticationでログアウトする

作成日:2022年02月13日
更新日:2022年02月13日

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

firebase-authentication-profile-get

【Firebase】Authenticationでプロフィールを取得する

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

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

jsx
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をインポートします。

jsx
import { signOut } from "firebase/auth";

signOutfireauthを指定します。

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

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

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

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

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

jsx
const { logout } = useLogout();

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

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

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

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

image2

image3

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

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

image4

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

image5

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

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

image6

usernullで返されました。

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

firebase-database-auth

【Firebase】認証されているユーザーのみ、Firebaseを使えるようにする

© 2024あずきぱんウェブスタジオ