How create a /logout route (how to call mutation on page load)

[tordans]

I wanted to share how to create a route /logout that logs the user out when the route is opened.

This has the advantage to contain the logout mutation and redirect code in one page, which we can link to from multiple places in the app.

[tordans]

The part that had to ask for help for to figure out is, how to void-call the async mutation function in a useEffect.

This is my page in src/pages/auth/logout.tsx

The button part could be removed, it is never visible to users anymore.
The const next part could likely be simplified to be just / for most apps; I just kept it was and did not investigate further.
The "componentDidMount"-useEffect might not need the useEffect but in then a guard is needed so it only runs in the browser; did not investigate further.

(This is a Next 12 app.)

import { BlitzPage } from "@blitzjs/next"
import { useMutation } from "@blitzjs/rpc"
import { useRouter } from "next/router"
import { useEffect } from "react"
import logout from "src/auth/mutations/logout"
import { buttonStyles } from "src/core/components/links"
import { LayoutMiddleBox, MetaTags } from "src/core/layouts"

const LogoutRedirectPage: BlitzPage = () => {
  const [logoutMutation] = useMutation(logout)
  const router = useRouter()

  const handleLogout = async () => {
    await logoutMutation()
    const next = router.query.next ? decodeURIComponent(router.query.next as string) : "/"
    return router.push(next)
  }

  useEffect(() => {
    const asyncawaitLogout = async () => await handleLogout()
    void asyncawaitLogout()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <LayoutMiddleBox title="Abmelden" subtitle="Sie werden abgemeldet…">
      <MetaTags noindex title="Abmelden" />
      <p className="text-center">
        <button
          className={buttonStyles}
          onClick={async () => {
            await handleLogout()
          }}
        >
          Abmelden
        </button>
      </p>
    </LayoutMiddleBox>
  )
}

LogoutRedirectPage.authenticate = true

export default LogoutRedirectPage

[tordans]

Happy to hear which parts can be approved…