Skip to main content

useLogout Hook


This doc assumes you're storing your pages/styles/etc. in a directory called src, and you have the baseUrl option set to src in your tsconfig.json for importing modules from the root.

The useLogout hook provides a way to logout a user from your headless frontend.

The following example shows how you could use the useLogout hook in a logout.tsx page:

import { client } from 'client';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
export default function Logout() {
const router = useRouter();
const { isLoggedOut, logout } = client.auth.useLogout();
useEffect(() => {
if (isLoggedOut !== undefined) {

// Initiate the logout process.
// This could also be called on a button click, for example, in a nav menu.
}, [isLoggedOut, logout]);

useEffect(() => {
if (isLoggedOut) {
// The user was successfully logged out. Redirect them.
}, [router, isLoggedOut]);
return <>Logging out...</>;

useLogout exports an object with the following properties:

  • logout: a function that initiates a request to logout the user by clearing their refresh token from the cookie.
  • isLoggedOut: undefiend until the logout function is called. Then a boolean that indicates whether the user was successfully logged out
  • isLoading: A boolean that indicates whether the logout function is currently logging out the user.