hanko state variable is undefined even after initializing it with the Hanko instance with the Setter function

[sojinsamuel]

"use client";

import { UserCircleIcon } from "@heroicons/react/24/solid";
import { Button } from "@nextui-org/react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

function LoggedIn() {
  const router = useRouter();
  const [hanko, setHanko] = useState<Hanko>();
  async function logger() {
    // console.log(hanko);
    //@ts-ignore
    const { id, email } = await hanko?.user.getCurrent();
    console.log(`user-id: ${id}, email: ${email}`);
  }

  useEffect(() => {
      setHanko(new Hanko(hankoApi ?? ""));
      //   console.log(Hanko);
    logger();
  }, []);

  const logout = async () => {
    try {
      logger();
      await hanko?.user.logout();

      // router.push("/login");
      // router.refresh();
      return;
    } catch (error) {
      console.error("Error during logout:", error);
    }
  };

  return (
    <Button
      color="primary"
      className="text-sm font-normal text-default-600 bg-default-100"
      startContent={<UserCircleIcon height={30} width={30} />}
      variant="ghost"
      onClick={logout}
    >
      Logout
    </Button>
  );
}

export default LoggedIn;

I was trying to log the currently logged in user id and email. When the component mounts and renders for the first time, useEffect runs and initializes the hanko state variable with the instance value. So when the function logger() runs after the setter function is initialized.

I should see this in the console.

// Browser console
user-id: 122432xxxxxx, email: [email protected]

But its giving me undefined. okay may be due to some other hidden conflicts which i need to debug further. but there is a gist, as you can see in the code i commented out these lines in the logout function:

      // router.push("/login");
      // router.refresh();

in purpose to see what its gonna log, is that still undefined. NO. it logs both the values. When i hit the logout Button, it does work. But when i calls the logger inside or outside of useEffect it doesnt work in any rerender.

I tried to explain what i am doing in the best way possible. I hope hanko community can help me out here to see why the hanko state variable is not undefined when the logout function runs and is undefined even after the setter function is been initialized first before calling logger()

[sojinsamuel]

I have also tried to reproduce it, using the nextjs app router starter template for hanko. Same issue.

[sojinsamuel]

Resolved:

  useEffect(() => {
    if (hanko) {
      logger("From Useffect");
      return;
    }
    setHanko(new Hanko(hankoApi ?? ""));
  }, [hanko]);

I am trying to escape the infine loop. But still have to debug further to see if it fits right in, if the community have any suggestions please let me know.