Why does the following HOC keep refreshing even though it is returning a memoized component?

Question

For context, I am working with integrating a Django Rest Framework backend with Next.js + Next-Auth. I have most of the integration down, except one part. The requirement is to have a refresh token system that will try to refresh the access token when it is almost expired. Here is the logic that I have:

/api/auth/[...nextauth].ts

import { NextApiRequest, NextApiResponse } from "next";
import NextAuth from "next-auth";
import { NextAuthOptions } from "next-auth";
import Providers from "next-auth/providers";
import axios from "axios";

import { AuthenticatedUser } from "../../../types";
import { JwtUtils, UrlUtils } from "../../../constants/Utils";
namespace NextAuthUtils {
  export const refreshToken = async function (refreshToken) {
    try {
      const response = await axios.post(
        // "http://localhost:8000/api/auth/token/refresh/",
        UrlUtils.makeUrl(
          process.env.BACKEND_API_BASE,
          "auth",
          "token",
          "refresh",
        ),
        {
          refresh: refreshToken,
        },
      );

      const { access, refresh } = response.data;
      // still within this block, return true
      return [access, refresh];
    } catch {
      return [null, null];
    }
  };
}

const settings: NextAuthOptions = {
  secret: process.env.SESSION_SECRET,
  session: {
    jwt: true,
    maxAge: 24 * 60 * 60, // 24 hours
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn(user: AuthenticatedUser, account, profile) {
      // may have to switch it up a bit for other providers
      if (account.provider === "google") {
        // extract these two tokens
        const { accessToken, idToken } = account;

        // make a POST request to the DRF backend
        try {
          const response = await axios.post(
            // tip: use a seperate .ts file or json file to store such URL endpoints
            // "http://127.0.0.1:8000/api/social/login/google/",
            UrlUtils.makeUrl(
              process.env.BACKEND_API_BASE,
              "social",
              "login",
              account.provider,
            ),
            {
              access_token: accessToken, // note the differences in key and value variable names
              id_token: idToken,
            },
          );

          // extract the returned token from the DRF backend and add it to the `user` object
          const { access_token, refresh_token } = response.data;
          user.accessToken = access_token;
          user.refreshToken = refresh_token;

          return true; // return true if everything went well
        } catch (error) {
          return false;
        }
      }
      return false;
    },

    async jwt(token, user: AuthenticatedUser, account, profile, isNewUser) {
      if (user) {
        const { accessToken, refreshToken } = user;

        // reform the `token` object from the access token we appended to the `user` object
        token = {
          ...token,
          accessToken,
          refreshToken,
        };

        // remove the tokens from the user objects just so that we don't leak it somehow
        delete user.accessToken;
        delete user.refreshToken;

        return token;
      }

      // token has been invalidated, try refreshing it
      if (JwtUtils.isJwtExpired(token.accessToken as string)) {
        const [
          newAccessToken,
          newRefreshToken,
        ] = await NextAuthUtils.refreshToken(token.refreshToken);

        if (newAccessToken && newRefreshToken) {
          token = {
            ...token,
            accessToken: newAccessToken,
            refreshToken: newRefreshToken,
            iat: Math.floor(Date.now() / 1000),
            exp: Math.floor(Date.now() / 1000 + 2 * 60 * 60),
          };

          return token;
        }

        // unable to refresh tokens from DRF backend, invalidate the token
        return {
          ...token,
          exp: 0,
        };
      }

      // token valid
      return token;
    },

    async session(session, userOrToken) {
      session.accessToken = userOrToken.accessToken;
      return session;
    },
  },
};

export default (req: NextApiRequest, res: NextApiResponse) =>
  NextAuth(req, res, settings);

Next, the example in the Next-Auth documentation shows the use of useSession() hook. But I am not a fan of it because:

1. It does not update the state of the session once the access token is refreshed unless the window itself is refreshed (it is an open issue)
2. It feels like a lot of code repetition on every component that wants to use the session, with the guards that check the existence of session object, whether the session is loading etc. So I wanted to use a HOC.

As such, I came up with the following solutions:

constants/Hooks.tsx

import { Session } from "next-auth";
import { useEffect, useMemo, useState } from "react";

export function useAuth(refreshInterval?: number): [Session, boolean] {
  /*
    custom hook that keeps the session up-to-date by refreshing it

    @param {number} refreshInterval: The refresh/polling interval in seconds. default is 10.
    @return {tuple} A tuple of the Session and boolean
  */
  const [session, setSession] = useState<Session>(null);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    async function fetchSession() {
      let sessionData: Session = null;
      setLoading(true);

      const response = await fetch("/api/auth/session");

      if (response.ok) {
        const data: Session = await response.json();

        if (Object.keys(data).length > 0) {
          sessionData = data;
        }
      }

      setSession(sessionData);
      setLoading(false);
    }

    refreshInterval = refreshInterval || 10;

    fetchSession();
    const interval = setInterval(() => fetchSession(), refreshInterval * 1000);

    return () => clearInterval(interval);
  }, []);

  return [session, loading];
}

constants/HOCs.tsx

import { Session } from "next-auth";
import { signIn } from "next-auth/client";
import React from "react";
import { useAuth } from "./Hooks";

type TSessionProps = {
  session: Session;
};

export function withAuth<P extends object>(Component: React.ComponentType<P>) {
  return React.memo(function (props: Exclude<P, TSessionProps>) {
    const [session, loading] = useAuth(); // custom hook call

    if (loading) {
      return <h2>Loading...</h2>;
    }

    if (!loading && !session) {
      return (
        <>
          Not signed in <br />
          <button onClick={() => signIn()}>Sign in</button>
          <pre>{!session && "User is not logged in"}</pre>
        </>
      );
    }

    return <Component {...props} session={session} />;
  });
}

Then, in a component where I have periodic data fetching requirements (I know this could be achieved in a much better way, this is just a contrived example where I am trying to simulate user inactivity but the app can still work in the background if needed), I am using the HOC:

pages/posts.tsx

import React, { useEffect, useState } from "react";
import Post from "../components/Post";
import { withAuth } from "../constants/HOCs";
import { TPost } from "../constants/Types";
import Link from "next/link";

function Posts(props) {
  const { session } = props;
  // const [session, loading] = useAuth();
  const [posts, setPosts] = useState<TPost[]>([]);
  const [fetchingPosts, setFetchingPosts] = useState<boolean>(false);

  useEffect(() => {
    if (!session) {
      return;
    }

    async function getPosts() {
      setFetchingPosts(true);
      const response = await fetch("http://127.0.0.1:8000/api/posts", {
        method: "get",
        headers: new Headers({
          Authorization: `Bearer ${session?.accessToken}`,
        }),
      });

      if (response.ok) {
        const posts: TPost[] = await response.json();
        setPosts(posts);
      }

      setFetchingPosts(false);
    }

    // initiate the post fetching mechanism once
    getPosts();
    const intervalId = setInterval(() => getPosts(), 10 * 1000);

    // useEffect cleanup
    return () => clearInterval(intervalId);
  }, [JSON.stringify(session)]);

  // {
  //   loading && <h2>Loading...</h2>;
  // }

  // {
  //   !loading && !session && (
  //     <>
  //       Not signed in <br />
  //       <button onClick={() => signIn()}>Sign in</button>
  //       <pre>{!session && "User is not logged in"}</pre>
  //     </>
  //   );
  // }

  return (
    <div>
      <h2>Fetched at {JSON.stringify(new Date())}</h2>
      <Link href="/">Back to homepage</Link>
      {posts.map((post) => (
        <Post key={post.title} post={post} />
      ))}
    </div>
  );
}

export default withAuth(Posts);

The problem is that the entire page gets re-rendered due to the withAuth HOC and possibly due to the useAuth hook every 10 seconds. However, I have had no luck trying to debug it. Maybe I am missing something key in my React concepts. I appreciate any and all suggestions/help possible. Thanks in advance.

PS. I am aware of a solution that uses SWR library, but I would like to avoid using that library if at all possible.

Answer 1

I ended up using the useSwr() hook after spending an unworldly amount of time trying to fix this issue. Also ended up writing this article for those who are interested.