Netlify Identity - Refresh role on client side

[ghughes13]

Site:
happy-hugle-97373a
selftaught-dev.com
Repo: GitHub - ghughes13/SelfTaughtDev

I’m using Netlify identity to manage user signup/roles for gated content with swyx’s react-netlify-Identity-widget (GitHub - netlify-labs/react-netlify-identity-widget: a small (6kb) drop-in accessible authentication widget for your React apps. SEEKING MAINTAINERS). Users can signup, upgrade their plan through stripe, and the role will successfully update on Netlify (In the identity section I can see the users role update to ‘pro’).

But, I can’t for the life of me figure out how to get the client side role to update. If the user logs out and logs back in then they’ll get a new jwt and the client side role will be updated, but that’s not a great ux (having to log out and back in for your account to be updated). Could anyone point me in the right direction or give me any advice on this?

[snorkypie]

I think your best bet is to use react-netlify-identity-gotrue by our community hero @jonsully

More specifically identity.refreshUser()

He wrote about this exact thing in this post:

VueJS app out of sync after role updated externally via Netlify functions

Read through your library linked above. Very nice. Thank ya was a big, but good, project! Lol at my comment that was orphaned somewhere. Sitting between blank lines like a sad, sad little code block (the “NOTE: The one trick at play”). Am i correct that what you’re doing to refresh the user’s data for the app is: calling GoTrue’s user.update() without passing any attributes - an empty POST body Almost! The update method actually uses a PUT not a POST — in traditional …

[jonsully]

Hey thanks for the nod @snorkypie! Really appreciate it!

And greetings @ghughes13

Yes indeed, there are some quirks to swyx’s Netlify Identity stack. I believe I addressed most of them in my pure-React implementation. I’d recommend giving it a try! The repository exposes the API interface but you can read more about why it exists and the history behind the three stacks here:

Announcing React-Netlify-Identity-Gotrue!

Otherwise indeed, as @snorkypie mentions, there are a number of great (long) Netlify Identity threads throughout the forum that you can search for. Client-side-refreshing after external changes are a … particular feature

–
Jon

[ghughes13]

Awesome! Thanks guys!!