【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する
Firebase

【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する

作成日:2022年02月27日
更新日:2022年02月28日

前回は、Firebase Authentication の機能を使って、React でログイン機能を実装しました。

firebase-user-login

【Firebase】Firebase Authentication の機能を使って、Reactでログイン機能を実装する

今回は、React でログアウト機能を実装します。

まずは、Home.tsx にヘッダーを作成し、ログアウトボタンを作成します。

テンプレートは、 MUI の AppBar を基にします。

tsx
import React, { useState } from "react";
import {
AppBar,
Box,
Toolbar,
IconButton,
Menu,
MenuItem,
Snackbar,
Alert,
} from "@mui/material";
import AccountCircle from "@mui/icons-material/AccountCircle";
export default function Home() {
const [auth, setAuth] = useState(true);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [open, setOpen] = useState(false);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleLogout = () => {};
const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar sx={{ justifyContent: "right" }}>
{auth && (
<div>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>プロフィール</MenuItem>
<MenuItem onClick={handleLogout}>ログアウト</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
<Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
ログアウトしました
</Alert>
</Snackbar>
</Box>
);
}

image2

useAuth.ts に、useLogout 関数を作成します。

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

Home.tsx へ戻り、useLogoutを使いましょう。

tsx
const { logout } = useLogout();

handleLogout内にlogoutを使用します。

tsx
const handleLogout = () => {
logout();
};

ログアウトすると、メッセージを表示するようにします。

tsx
const handleLogout = () => {
logout();
setOpen(true);
};

また、ポップアップされているログアウトを閉じましょう。

tsx
const handleLogout = () => {
logout();
setOpen(true);
setAnchorEl(null);
};

さらに、ログアウト後は、ログイン画面へ遷移するようにします。

tsx
import { useNavigate } from "react-router-dom";
tsx
const navigate = useNavigate();
tsx
const handleLogout = () => {
logout();
setOpen(true);
setAnchorEl(null);
setTimeout(() => {
navigate("/login");
}, 2000);
};

では、動作確認してみましょう。

image3

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

image4

image5

メッセージが表示され、ログイン画面へ遷移しました。

image6

Console を確認すると、ログアウトできていました。

次回は、ユーザーが認証されていない場合、ログイン画面へ遷移します。

firebase-user-validate

【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法

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