Theo's Typesafe Cult•2y ago

Next Auth Refresh Session Token is not working

(please help i spend almost one day on this) i am trying to refetch my session by useSession update function but it's only working in some cases example 1 (where it is not working)

"use client";

import { useEffect, useRef, useTransition } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const { update } = useSession();
  useEffect(() => {
    startTransition(async () => {
      await update();
      router.refresh();
    });
  }, []);
  return <div>loading</div>;
}

"use client";

import { useEffect, useRef, useTransition } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const { update } = useSession();
  useEffect(() => {
    startTransition(async () => {
      await update();
      router.refresh();
    });
  }, []);
  return <div>loading</div>;
}

example2(where it's working) :-

"use client";

import { useEffect, useRef, useTransition } from "react";
import useUpdateRole from "./useUpdateRole";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const ref = useRef<HTMLDivElement>(null);
  const router=useRouter()
  const { update } = useSession();
  useEffect(() => {
    ref.current?.click();
  }, []);
  return (
    <div
      ref={ref}
      onClick={async () => {
        await update();
        router.refresh();
      }}
    >
      loading
    </div>
  );
}

"use client";

import { useEffect, useRef, useTransition } from "react";
import useUpdateRole from "./useUpdateRole";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const ref = useRef<HTMLDivElement>(null);
  const router=useRouter()
  const { update } = useSession();
  useEffect(() => {
    ref.current?.click();
  }, []);
  return (
    <div
      ref={ref}
      onClick={async () => {
        await update();
        router.refresh();
      }}
    >
      loading
    </div>
  );
}

2 Replies

pradeepOP•2y ago

https://next-auth.js.org/getting-started/client#refetching-the-session i am trying to do this but it's not working my code trying to impliment this

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition } from "react";

export default function useUpdateRole() {
  const { update } = useSession();
  const router = useRouter();
  const [firstTime, setFirstTime] = useState(false);
  const [isPending, startTransition] = useTransition();
  useEffect(() => {
    if (!firstTime) {
      update();
      console.log("hello there");
      setFirstTime(true);
    }
    const interval = setInterval(() => update(), 1000 * 60 * 60);
    return () => clearInterval(interval);
  }, [update]);
  useEffect(() => {
    const visibilityHandler = () =>
      document.visibilityState === "visible" && update();
    window.addEventListener("visibilitychange", visibilityHandler, false);
    return () =>
      window.removeEventListener("visibilitychange", visibilityHandler, false);
  }, [update]);

  return null;
}

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition } from "react";

export default function useUpdateRole() {
  const { update } = useSession();
  const router = useRouter();
  const [firstTime, setFirstTime] = useState(false);
  const [isPending, startTransition] = useTransition();
  useEffect(() => {
    if (!firstTime) {
      update();
      console.log("hello there");
      setFirstTime(true);
    }
    const interval = setInterval(() => update(), 1000 * 60 * 60);
    return () => clearInterval(interval);
  }, [update]);
  useEffect(() => {
    const visibilityHandler = () =>
      document.visibilityState === "visible" && update();
    window.addEventListener("visibilitychange", visibilityHandler, false);
    return () =>
      window.removeEventListener("visibilitychange", visibilityHandler, false);
  }, [update]);

  return null;
}

Client API | NextAuth.js

The NextAuth.js client library makes it easy to interact with sessions from React applications.

pradeepOP•2y ago

i have found one more thing it start working when I empty dependency array in useEffect

"use client";

import { useEffect, useRef, useTransition } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const { update } = useSession();
  useEffect(() => {
    startTransition(async () => {
      await update();
      router.refresh();
    });
  });
  return <div>loading</div>;
}

"use client";

import { useEffect, useRef, useTransition } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function UpgradingAccount() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const { update } = useSession();
  useEffect(() => {
    startTransition(async () => {
      await update();
      router.refresh();
    });
  });
  return <div>loading</div>;
}

can anyone Tell me How i make start working useUpdateRole?

Gaming

Programming

Next Auth Refresh Session Token is not working