Issue on docs. NextJS Logout Button.

[Jemeni11]

Path: /quickstarts/fullstack/next

Next JS - Implement logout functionality

Pages Directory

You can use @teamhanko/hanko-elements to easily manage user logouts. Below, we make a logout button component that you can use anywhere.

import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

export function LogoutBtn() {
  const router = useRouter();
  const [hanko, setHanko] = useState<Hanko>();

  useEffect(() => {
    import("@teamhanko/hanko-elements").then(({ Hanko }) =>
      setHanko(new Hanko(hankoApi ?? ""))
    );
  }, []);

  const logout = async () => {
    try {
      await hanko?.user.logout();
      router.push("/login");
      router.refresh(); <---------- error
      return;
    } catch (error) {
      console.error("Error during logout:", error);
    }
  };

  return <button onClick={logout}>Logout</button>;
}

The docs mention router.refresh() but that method doesn't exist on the Next Router object. I think the author of this meant to use router.reload()

[Ashutosh-Bhadauriya]

Hey @Jemeni11 thanks for the pr. Yeah you're right, but router.refresh is available in nextjs app directory. And you seem to have replace the router.refresh in both the codes(app directory and pages directory). can you please fix that. Thanks!

[Jemeni11]

Hey! Thanks for that, I've seen and corrected my mistake