End Auth0 User Session with the logout Method from useAuth0 Hook

You can log out users from your React application by logging them out of their Auth0 sessions using the logout() method from the Auth0 React SDK.

Create a logout-button.js file in the src/components/buttons folder

Create a logout button component with the following code

import { useAuth0 } from "@auth0/auth0-react";
import React from "react";

export const LogoutButton = () => {
  const { logout } = useAuth0();

  const handleLogout = () => {
    logout({
      logoutParams: {
        returnTo: window.location.origin,
      },
    });
  };

  return (
    <button className="button__logout" onClick={handleLogout}>
      Log Out
    </button>
  );
};

The `logout() method from Auth0 React SDK clears the application session and redirects to the Auth0 /v2/logout endpoint to clear the Auth0 session.

You can pass an object argument to logout() to customize the logout behavior of the React application. You can define a logoutParams property on that object to define parameters for the /v2/logout call. This process is invisible to the user.

Pass the logoutParams.returnTo option to specify the URL where Auth0 should redirect your users after they log out.

Setting logoutParams.returnTo to window.location.origin will ensure that Auth0 redirects your users to your production URL that you add to the "Allowed Logout URLs" list.