Issue: Need Client-side Session Cache Refresh Mechanism for Auth0 NextJS SDK v4

[arealesramirez]

Checklist

• 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.

Describe the problem you'd like to have solved

Problem Description

When user session data is updated server-side (e.g., through Auth0 Actions, custom claims, or API operations), there's currently no straightforward way to refresh the client-side session cache in the @auth0/nextjs-auth0 v4 SDK. This leads to stale data being displayed to users until a full page refresh occurs.

Current Limitations

In applications with a hybrid server/client architecture using NextJS:

• User attributes can be updated in Auth0 through Rules, Actions, or Management API
• Custom session properties may be modified during middleware or server components
• The client-side cache continues to serve outdated session data via useUser() hook
• Users see inconsistent data between server-rendered and client-side components

This is particularly problematic in workflows where:

• User completes an onboarding process that updates their profile
• User gains or loses permissions that should immediately affect UI elements
• User data is enriched from external systems after authentication

My Scenario

In my application, I updated the user profile in an /api/profile endpoint. This updates the basic user data in my database. Additionally, I updated the Auth0 user session using:

    await auth0.updateSession({
      ...session,
      user: {
        ...session.user,
        name: user.name,
        firstName: user.firstName,
        lastName: user.lastName,
      },
    });

However, these changes are not reflected in the client-side session (useUser()) until a full page refresh or re-login.

This creates a confusing user experience where parts of the UI reflect the updated state while others show outdated information.

Requested Feature

I request a mechanism to programmatically refresh the client-side session cache without requiring a full page reload.

Describe the ideal solution

Given the implementation of useUser hook leveraging SWR, I propose extending the useUser hook to expose SWR's revalidation capabilities:

"use client";

import useSWR from "swr";
import type { User } from "../../types";

export function useUser() {
  const { data, error, isLoading, mutate } = useSWR<User, Error, string>(
    process.env.NEXT_PUBLIC_PROFILE_ROUTE || "/auth/profile",
    (...args) =>
      fetch(...args).then((res) => {
        if (!res.ok) {
          throw new Error("Unauthorized");
        }

        return res.json();
      })
  );

  // if we have the user loaded via the provider, return it
  if (data) {
    return {
      user: data,
      isLoading: false,
      error: null,
      revalidate: () => mutate() // Expose SWR's mutate function for cache revalidation
    };
  }

  if (error) {
    return {
      user: null,
      isLoading: false,
      error,
      revalidate: () => mutate() // Still provide revalidation function
    };
  }

  return {
    user: data,
    isLoading,
    error,
    revalidate: () => mutate() // Always provide revalidation function
  };
}

Alternatives and current workarounds

For now, my workaround in my code was to add the following import and use the useSWRConfig hook

import { useSWRConfig } from "swr";


const MyComponent = () => {
  const { mutate } = useSWRConfig();
 // rest of the code
}

and refresh the cache of the request /auth/profile

const updateProfile = () => {
   // request to update profile

   // on success
        mutate("/auth/profile", undefined, {
        revalidate: true,
      });
}

Additional context

No response

[tusharpandey13]

Hi @arealesramirez, thanks for bringing this up, we are working on this and will have a solution shortly.
#1920 might be related.

[tusharpandey13]

Hi @arealesramirez, while we are planning to release a fix for this shortly, can you try the following workaround:

import { useSWRConfig } from "swr";
const MyComponent = () => {
  const { mutate } = useSWRConfig();
  const updateProfile = () => {
    // Update profile API call
    // On success:
    mutate("/auth/profile");
  }
};

Please let us know if this solution works for your setup!