Description
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