Firebase
【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する
作成日：2022年02月27日
更新日：2022年02月28日
前回は、Firebase Authentication の機能を使って、React でログイン機能を実装しました。
【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>
);
}
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);
};
では、動作確認してみましょう。
『ログアウト』をクリックすると、
メッセージが表示され、ログイン画面へ遷移しました。
Console を確認すると、ログアウトできていました。
次回は、ユーザーが認証されていない場合、ログイン画面へ遷移します。
【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら（Udemyの外部サイトへ遷移します）
