Client side `getAccessToken` makes a request every time

[ColemanDunn]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Currently getAccessToken on the client side make a request every time it is called. This seems like overkill and is cluttering the network tab for components that make requests from the client. the component below demonstrated that when you press the button it makes 5 requests and logs the same key every time:

"use client";
import { getAccessToken } from "@auth0/nextjs-auth0";

export default function Page() {
  async function handleClick() {
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
  }
  return <button onClick={handleClick}>Press me</button>;
}

Is there a recommended way to get around this? Some sort of global store with expiry? React Context?

I feel like this should be cached by nextjs-auth0 internally somehow or using next cache. This is something that clerk auth does by only making a network request if the token has expired.

Also the typing for this function could probably be improved to return a Promise<string> since it seems to either throw or return the token.

Reproduction

Press this button, observe console and network tab

"use client";
import { getAccessToken } from "@auth0/nextjs-auth0";

export default function Page() {
  async function handleClick() {
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
    console.log(await getAccessToken());
  }
  return <button onClick={handleClick}>Press me</button>;
}

Additional context

No response

nextjs-auth0 version

4.0.2

Next.js version

14.2.25

Node.js version

22.11.0