feat(client): add `refetchWhenOffline` option

[balazsorban44]

☕️ Reasoning

When the session polling is enabled (refetchInterval option), the request to /api/auth/session is made regardless of the browser network's status. If the browser is offline (i.e. computer puts itself to sleep), the request fails, and the session is invalidated (null). This behavior can cause UI issues and make other requests fail when the application stores access tokens in the session object.

This PR adds a new flag similar to the SWR's refreshWhenOffline. When disabled, all requests will be paused while the browser is offline, so the session would not be invalidated. This flag does not introduce any breaking change, but it'd make the behavior configurable by the user.

In my opinion, it would make sense to flip this to be the default behavior in the next major version.

🧢 Checklist

• [x] Documentation
• [ ] Tests
• [x] Ready to be merged

🎫 Affected issues

Fixes #4935

📌 Resources

• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
next-auth	⬜️ Ignored (Inspect)		Oct 23, 2022 at 3:03PM (UTC)

[github-actions[bot]]

🎉 Experimental release published on npm!

npm i [email protected]

yarn add [email protected]

[viperfx]

Hi folks - is there any workaround for this or ETA on when this may go in? This is an issue we are hitting often as our endusers often are mobile and get their session invalidated when offline.

[maiieul]

Hi folks - is there any workaround for this or ETA on when this may go in? This is an issue we are hitting often as our endusers often are mobile and get their session invalidated when offline.

You can wrap your logic in an if(navigator.onLine) { your logic }. My app would redirect to the signin page when offline because it has a redirect based on user roles. Wrapping the redirect logic in this if statement solved it for me.

Here is an example:

export default function Layout({ children }) {
  const router = useRouter();
  const { data: session, status } = useSession();
  
  useEffect(() => {
    if (navigator.onLine) {
      if (status === "unauthenticated" || session === null) {
        router.push("/first-route");
      }
      if (status === "authenticated" && session?.user?.role === "role1") {
        router.push("/second-route");
      }
      if (status === "authenticated" && session?.user?.role === "role2") {
        router.push("/third-route");
      }
    }
        return;
  }, [status, session]);

  if (status === "loading") {
    return <Spinner />;
  }
  return (
    <>
      <main>{children}</main>
    </>
  );
}

[brendonco]

Which next-auth version to use with this changes?

[nik32]

@ThangHuuVu @balazsorban44 Hi guys! This is not working. Kindly refer to my comment in https://github.com/nextauthjs/next-auth/issues/4935#issuecomment-1606108080