Netlify Identity appears to be interacting with my Gatsby site in puzzling ways. Setup: the site is comprised of many React components that show different content based on whether the user is logged in.
The issue: several React components that depend on user data are being rendered with crazy and unexplained layouts, with borked CSS and HTML.
This only happens in the following conditions:
- Only affects components that return different content based on
- Only while logged in, i.e. logged out states are rendered correctly
- Only happens on production (ugh…)
- Only happens on initial page load: if the user navigates to a new page and come back to the original page, all components are rendered correctly
This is 100% replicable under the conditions above. Here’s what I believe is happening:
- page loads with
netlifyIdentity.currentUser() == null, React components are rendered in logged out state
- Netlify Identity takes a few seconds to authenticate the user in the background
netlifyIdentity.currentUser()now has a value, React components aren’t rerendered and left in an in-between state
I’m honestly not sure what’s happening. Is there a way to trigger a component rerender when Netlify Identity has updated the value of