Conditional styles don't update when user authenticates via Netlify Identity [Gatsby]

Support
,
1

I’m using Netlify Identity (Auth) on my Gatsby site and I have a section that displays conditionally based on the state of the auth (managed with useContext). 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 React 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.

2

Hey @bzmillerboy :wave:t2:

And welcome to The Community :netliheart:

Apologies for nobody getting back to you within a week. Hopefully I can still offer some help if you’re still stuck on the issue. For starters, which client library are you using to integrate Netlify Identity into Gatsby?

–
Jon

3

Thanks @jonsully . I am still facing this issue.

I’m using netlify-identity-widget library to handle the auth. I don’t think it’s an inherit issue with Netlify Identity however. I sense it’s more related to my implementation of auth in React Context using Gatsby. Since many others here use Netlify Identity and Gatsby together, I figured this community might be best to resolve it (and for it to be a resource for those in the future).

So at this point, I’m guessing there is a rehydration issue that’s not allowing styles to update. This article has been helpful: The Perils of Rehydration: Understanding how Gatsby/Next manage server-side rendering and rehydration

4

Nice! :slight_smile: Well if you’re up for sharing some code here or if the repository is public, I can try to help you through it. Contexts can be tricky, but using contexts to wrap non-React code can be even trickier :stuck_out_tongue: the rehydration stuff can also play a role depending on how the markup is written for sure.

As a total other alternative, I actually wrote a pure-React interface for Netlify Identity. It has a Gatsby port that wires up all the contexts for you, but it doesn’t come with a UI out of the box. Plugin here, demo site here, demo site code (if needed) here. This article explains why I created it and etc: “Announcing React Netlify Identity GoTrue”.

–
Jon

5

Thanks Jon. Those resources look promising. I’ll take a look and report back if I’m able to resolve it.

The repo is private but I’ve added you as a collaborator if you want to take a look. My current implementation is using a hasMounted useEffect to mitigate the problem.