# React SPA cannot refresh user data after update

**URL:** <https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084>\
**Category:** Get Help\
**Tags:** configuration, application\
**Created:** [May 14, 2024, 9:54am UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084 "2024-05-14T09:54:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 14, 2024, 9:54am UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/1 "2024-05-14T09:54:07Z")

</div>

I’m developing a SPA web app at the moment with the React SPA SDK; I access user’s profile information through through the useAuth0 hook.

When the user wants to update their profile (name etc), that information is posted to my backend, where I use the .net management SDK to complete the update. So far, so good.

After the successful update, I need a way to tell the React SDK to refresh the user information from Auth0 - at the moment only logging out/back in will refresh the data coming from the useAuth0 hook.

I’ve found older threads which say to call `getAccessTokenSilently({ ignoreCache: true })`; I’ve tried this (updated to use `cacheMode: 'off'`) but it doesn’t seem to make a difference. To be clear; I don’t want the user to have to do anything at all; I just want the hook to return updated information.

Is there some way to force the update?

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [May 14, 2024, 6:04pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/3 "2024-05-14T18:04:55Z")

</div>

Hey there @jono.rogers welcome to the community!

> [@jono.rogers](#):
>
> I’ve found older threads which say to call `getAccessTokenSilently({ ignoreCache: true })`; I’ve tried this (updated to use `cacheMode: 'off'`) but it doesn’t seem to make a difference. To be clear; I don’t want the user to have to do anything at all; I just want the hook to return updated information.

Using `getAccessTokenSilently` should indeed also update the `user`:

> <https://github.com/auth0/auth0-react/pull/146>
>
> \### Description
> 
> Everytime we call \`getAccessToken\*\`, update the \`user\` from t…he spa client - since it may have been updated.
> 
> With the caveat that, if you're relying on the user as a dependant key of some memoized operation, the reference to the user might change when the user properties haven't. eg
> 
> \`\`\`js
> // DON'T
> useEffect(() =\> {
> (async () =\> {
> setProfile(await fetch(\`/profile/{user.sub}\`));
> })()
> }, \[user\]) // \<= ref might change
> 
> // DO
> useEffect(() =\> {
> (async () =\> {
> setProfile(await fetch(\`/profile/{user.sub}\`));
> })()
> }, \[user.sub\]) // \<= primitive won't change
> \`\`\`
> 
> \### References
> 
> Fixes #109 
> 
> \### Testing
> 
> Given I login to the auth0-react playground
> And I update the user's claims
> When I click \`getAccessTokenSilently\`
> Then the user's claims should be updated
> 
> \### Checklist
> 
> \- \[\] I have added documentation for new/changed functionality in this PR or in auth0.com/docs
> \- \[\] All active GitHub checks for tests, formatting, and security are passing
> \- \[\] The correct base branch is being used, if not \`master\`

I just tested in the React [sample app](https://github.com/auth0-samples/auth0-react-samples) and do see the user’s profile information updated (I’m changing the `name` property) in [Profile.js](https://github.com/auth0-samples/auth0-react-samples/blob/decb8f9fb3a22e7a71796035e0f42fffc2451642/Sample-01/src/views/Profile.js#L9) which uses `useAuth0`. For testing, I’m just relying on the call to `getAccessTokenSilently` in [ExternalAPI.js](https://github.com/auth0-samples/auth0-react-samples/blob/decb8f9fb3a22e7a71796035e0f42fffc2451642/Sample-01/src/views/ExternalApi.js#L57).

When calling `getAccessTokenSilently` in your own code, do see a successful silent auth event in your dashboard logs (Monitoring → Logs)? If you are using refresh tokens it will show up as a successful refresh token exchange.

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 14, 2024, 11:55pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/4 "2024-05-14T23:55:48Z")

</div>

Hi Ty,

Thanks for the reply… No; I don’t see a successful silent auth event in my Auth0 dashboard logs. I do see the succesful user update API operation, but that’s it. I log (to the JS console) the result of the getAccessTokenSilently call; and that returns id and access tokens (detailedResponse is turned on), but that id\_token does not have the updated information… I also don’t see any network call to auth0 in dev tools; so I don’t see how it could be updating it…

Here’s my provider:

```auto
<Auth0Provider
			domain={domain}
			clientId={clientId}
			authorizationParams={{
				redirect_uri: redirectUri,
				audience: audience,
			}}
			useRefreshTokens={true}
			cacheLocation="localstorage"
			onRedirectCallback={onRedirectCallback}
		>
			{children}
		</Auth0Provider>

```

And after a successful save (after my backend has indicated it’s successfully updated the management API)

```auto
const token = await getAccessTokenSilently({
					cacheMode: "off",
					detailedResponse: true,
				});

```

I’m not doing anything with the returned token, it’s just there for temporary logging…

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 15, 2024, 12:24am UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/5 "2024-05-15T00:24:17Z")

</div>

Ok, so I’ve made a bit of progress here; and I have a workaround, but I’d still appreciate some answers.

No 1; thanks to some more digging I found I needed to enable Offline Access on my API settings to enable the refresh tokens properly…

No 2; I updated the scopes in AuthProvider - I’m still not sure if this is necessary, new code below:

```auto
<Auth0Provider
	domain={domain}
	clientId={clientId}
	authorizationParams={{
		redirect_uri: redirectUri,
		audience: audience,
		scope: "openid profile email offline_access",
	}}
	useRefreshTokens={true}
	cacheLocation="localstorage"
	onRedirectCallback={onRedirectCallback}
>
	{children}
</Auth0Provider>

```

No 3; (and most importantly), I have changed to calling `getAccessTokenSilently` through a `useEffect` rather than synchronously after my API update call in an event handler. This was my previous update code:

```auto
const onSave = async (updatedProfile: ProfileFormData) => {
	if (canSave) {
		try {
            // API Update (using management API)
			await updateUser(updatedUser).unwrap();
                         
            await getAccessTokenSilently({ cacheMode: 'off' });
		} catch (err) {
			// Error logging
		}
	}
};

```

Now, I use this effect:

```auto
useEffect(() => {
	const loadToken = async () => {
		await getAccessTokenSilently({ cacheMode: "off" });
	};
	if (updateSuccessful) {
		loadToken();
	}
}, [updateSuccessful]);

```

Luckily I have some state from my API library that I can use to fire this effect once after a successful API response; but I don’t see why I would have to - what’s the difference?

I arrived at this fix because I thought I would try and put the `getAccessTokenSilently` call into a `useEffect` on page load, and it immediately threw errors related to refresh tokens (which led me to fixes 1 & 2), but the call in the event handler doesn’t do that at all. Am I missing something about javascript/react, or is this a bug in the Auth0 SDK?

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [May 15, 2024, 10:13pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/6 "2024-05-15T22:13:27Z")

</div>

Thanks for following up!

> [@jono.rogers](#):
>
> No 1; thanks to some more digging I found I needed to enable Offline Access on my API settings to enable the refresh tokens properly…

Good catch! This is indeed required.

> [@jono.rogers](#):
>
> No 2; I updated the scopes in AuthProvider - I’m still not sure if this is necessary, new code below:

If using `useRefreshTokens={true}` you do not need to add the `offline_access` scope, the SDK adds this for you.

> [@jono.rogers](#):
>
> Luckily I have some state from my API library that I can use to fire this effect once after a successful API response; but I don’t see why I would have to - what’s the difference?
> 
> I arrived at this fix because I thought I would try and put the `getAccessTokenSilently` call into a `useEffect` on page load, and it immediately threw errors related to refresh tokens (which led me to fixes 1 & 2), but the call in the event handler doesn’t do that at all. Am I missing something about javascript/react, or is this a bug in the Auth0 SDK?

So are you using/setting `updateSuccessful` in your `onSave` function now for `useEffect` to listen to? While not a React expert, I believe `useEffect` better aligns with React’s state and lifecycle management.

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 16, 2024, 12:11am UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/7 "2024-05-16T00:11:44Z")

</div>

> [@ty.frith](#):
>
> So are you using/setting `updateSuccessful` in your `onSave` function now for `useEffect` to listen to?

I’m not doing it myself - it’s a peice of data from RTK Query, which I’m using; it gets set after a successful API call (in this case, updating the user):

```auto
const [
	updateUser,
	{ isLoading: isUpdating, isSuccess: updateSuccessful },
] = useUpdateUserMutation();

```

> [@ty.frith](#):
>
> While not a React expert, I believe `useEffect` better aligns with React’s state and lifecycle management.

I’m not really sure what you mean by that… In my code, I have an event handler which runs when the user presses a button (`onSave`, from my previous post). That event handler is responsible for sending an API call to my backend to update; and handling any side-effects (like resetting the form). In this case, that involves somehow??? telling the Auth0 SDK to refresh the user information.

That **should** cause the `useAuth0` hook to trigger a re-render with updated state - that’s how React is supposed to work.

In my case, I’m having to add a separate `useEffect` call, which should not be necessary, to update the Auth0 SDK - and this is the part that is weird. Why doesn’t the call to `getAccessTokenSilently` work in the event handler, the same way it does in the `useEffect` call? Through my testing, the two approaches are working completely differently..

I’ll try and see if I can illustrate the difference using the starter template..

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 16, 2024, 1:16am UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/8 "2024-05-16T01:16:28Z")

</div>

Hi Ty,

I’ve forked the starter template you linked, and I’m looking to update the username like you said you did - but from what I can see, that would mean me adding the management API SDK to some sort of backend - how did you do that step? Did you use the node.js library on the api-server, or something different?

Or did you just update the name property on the user object returned from useAuth0?

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [May 16, 2024, 7:03pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/9 "2024-05-16T19:03:11Z")

</div>

Thanks for the further information 🙂

> [@jono.rogers](#):
>
> I’ve forked the starter template you linked, and I’m looking to update the username like you said you did - but from what I can see, that would mean me adding the management API SDK to some sort of backend - how did you do that step? Did you use the node.js library on the api-server, or something different?

I just updated the user’s name in the dashboard - Alternatively (and more realistically) yes this would be handled by a backend proxy of sorts. Here’s a simple example of that:

> <https://github.com/tyfrth/auth0-react-samples-proxy/blob/master/Sample-01/api-server.js>

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 16, 2024, 11:52pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/10 "2024-05-16T23:52:27Z")

</div>

> [@ty.frith](#):
>
> I just updated the user’s name in the dashboard - Alternatively (and more realistically) yes this would be handled by a backend proxy of sorts. Here’s a simple example of that:

Right, that makes sense.

Ok; testing in the sample app, I cannot recreate what happens on my web app - but I have found some interesting things.

This is my event handler which is causing issues, for reference:

```auto
const onSave = async (updatedProfile: ProfileFormData) => {
    // Do some processing of my form, then send network call
	await updateUser(request).unwrap();
    // Now update the user
    await getAccessTokenSilently({ cacheMode: 'off' });
};

```

This doesn’t work; however this does:

```auto
const refreshToken = async () => {
	await getAccessTokenSilently({ cacheMode: "off" });
};

const onSave = async (updatedProfile: ProfileFormData) => {
    // Do some processing of my form, then send network call
	await updateUser(request).unwrap();
    // Now update the user
	setTimeout(refreshToken, 0);
};

```

So moving the call from the job queue (running after awaiting a promise) to the event queue (like how setTimeout is implemented) fixes the issue.

This also works (confirmed by changing the username on the dashboard before trying, just swapping the order of the calls:

```auto
const onSave = async (updatedProfile: ProfileFormData) => {
    // Now update the user
    await getAccessTokenSilently({ cacheMode: 'off' });
    // Do some processing of my form, then send network call
	await updateUser(request).unwrap();
};

```

I tried to replicate this issue in the sample app, but I was unsuccessful; the below code works fine (which I think, should have the same issue?):

```auto
const handleRefresh = async () => {
	const fact = await fetch("https://catfact.ninja/fact");
	console.log(fact);
	await getAccessTokenSilently({ cacheMode: "off" });
};

```

So I don’t know - maybe the RTK query mutation promise that I’m awaiting is doing something differently under the hood which affects things? I’m not enough of an expert in JS internals to know.

Anyway, for now I’m running with the setTimeout workaround; it seems the less hacky approach

---

<div class="post-metadata">

**Author:** ![ty.frith](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/ty.frith/32/58484_2.png) [@ty.frith](https://community.auth0.com/u/ty.frith)\
**Post date:** [May 20, 2024, 7:38pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/11 "2024-05-20T19:38:21Z")

</div>

Hey @jono.rogers thanks for following up!

> [@jono.rogers](#):
>
> So I don’t know - maybe the RTK query mutation promise that I’m awaiting is doing something differently under the hood which affects things? I’m not enough of an expert in JS internals to know.

Hmm, that could be possible - I haven’t been able to reproduce what you’re seeing either so perhaps it does have something to do with it. I am unfortunately in the same boat in not being an expert in JS internals - You could always open up an [issue](https://github.com/auth0/auth0-react/issues) against the SDK itself. The maintainers of the SDK may be able to shed some more light on it.

---

<div class="post-metadata">

**Author:** ![jono.rogers](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@jono.rogers](https://community.auth0.com/u/jono.rogers)\
**Post date:** [May 20, 2024, 11:02pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/12 "2024-05-20T23:02:22Z")

</div>

Thanks for all your help @ty.frith

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [June 3, 2024, 11:03pm UTC](https://community.auth0.com/t/react-spa-cannot-refresh-user-data-after-update/134084/13 "2024-06-03T23:03:07Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.