Conditional guard redirect issue with race condition.

Hello guys, just like in your Twitter demo, I have a Conditional Guard set up in my page layout with the condition currentUser.isLoggedIn and in the interactions, I have it redirect the user to the login page when this condition is false.

It’s important to add that I have headless auth using Supabase. The issue is that after sign-in, when I get redirected to path /, it takes a fraction of a second for Plasmic to change the value of currentUser.isLoggedIn to true. So no matter what I do, I keep getting redirected.

Problem sequence:

  1. User signs in successfully
  2. Redirects to home page (/)
  3. Page loads and checks Conditional Guard (currentUser.isLoggedIn)
  4. Auth state hasn’t loaded yet, so condition is false
  5. This triggers my interactions that redirect back to login
  6. Auth state finally loads (too late - already redirecting)

I’ve tried delaying the interaction in dozens of ways:

Approach 1:

  • Interaction 1: Run code that delays evaluation
function delayedCheck() {
  return new Promise(resolve => {
    setTimeout(() => {
      const currentStatus = !(currentUser.isLoggedIn);
      console.log("Checking after delay:", currentStatus);
      resolve(currentStatus)
    }, 3000)
  })
}
delayedCheck()
  • Interaction 2: Redirect to login with condition when $steps.runCode is true

When signed in, after the delay, $steps.runCode equals false, so the second interaction should not go through - but it still does!

Approach 2:

  • Interaction 1: Simple delay
const timer = new Promise(r => setTimeout(r, 5000))
  • Interaction 2: Redirect with condition when !currentUser.isLoggedIn

Even though !currentUser.isLoggedIn is false after the user is logged in (and after the 5 second delay), it still redirects!

It seems all the set of interactions run with the same values regardless if they changed between one to another, so I don’t know what to do anymore. You guys don’t have any delays in the Twitter examples, and if I try to add the delay into the Conditional Guard value it loops forever, so I really don’t know how to solve this.

Relevant links:

Thanks for the help.

Hi, can you provide the code that you are using to render your page? If you are providing the user object through the server instead of fetching on the client it shouldn’t be an issue, but if you are fetching on the client, it would require you to invert the sequence of:

  • Page loads and checks Conditional Guard (currentUser.isLoggedIn)
  • Auth state hasn’t loaded yet, so condition is false

To only load the page once you have fetched the auth state.

Hey, thanks for the recommendation, it was really challenging but i finally managed to fix it. even running on the server side for some reason plasmic needed the token while loading the content to populate the plasmic user after the supabase user. had to create a completely new component that would sign in into both platforms before proceeding.

cheers!

1 Like