React Gatsby and Netlify Identity Conditional Styling Not Updating

Question

I'm using Netlify Auth on my Gatsby site and I have a section that displays conditionally based on the state of the auth. However, the conditional styles never change when the auth status changes in my context.

...
const context = useContext(AppContext)
...
<div style={{ display: context.user ? 'block' : 'none' }}>
 I should display if the user is authenticated.
</div>

So it goes like this:

1. Build occurs, state has no user so sets the style to "none".
2. User visits site, state has no user so sets the style to "none".
3. User logs in successfully, state now has user object however style is not updated to show styles as "block".

This is only an issue when the first page loads, after navigating in the app, the view renders correctly based on the auth state (shows "block").

This works locally but not after a production build. Other conditional display methods work but I can't use those because the content I'm hiding/showing contains a Netlify Form which has to be present in the source code during build time.

question from:https://stackoverflow.com/questions/65948167/react-gatsby-and-netlify-identity-conditional-styling-not-updating

Answer 1

Waitting for answers