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

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

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

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

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 関数を作成します。

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

  return { logout }
}

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

const { logout } = useLogout()

handleLogout内にlogoutを使用します。

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

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

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

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

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

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

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

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

image3

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

image4

image5

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

image6

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

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

ブログ一覧