Solid React sdk, loginbutton redirecting before logged in

Build a Solid App Solid App Development FAQs
1

I am using the Solid React SDK.
I have a login button that looks like this:

 <LoginButton
          oidcIssuer="https://inrupt.net"
          redirectUrl="http://localhost:8100/my/home"
          onError={handleError}
 > 
     <IonButton className={styles.solid}>Log In using solid</IonButton>
</LoginButton>

The first thing that happens on the /my/home route is checking if the user is logged in.

    if(!session.info.isLoggedIn) {
      return <Redirect to="/login"/>;
  }

This always redirects to /login.

If i just log session.info, it is logged twice, once with loggedIn set to false and moments later with loggedIn set to true.

I could add a timeout but i feel like thats a quick and dirty solution, i only want to redirect after i have been succesfully logged in.

Anyone knows how to handle this?

2

I don’t have experience with Inrupt’s React SDK, but my first intuition would be to check where session is coming from - is that from useSession?

If so, you might also want to check sessionRequestInProgress, and only redirect if that is false and session.info.isLoggedIn is false.

2 Likes
3

Yes, its from useSession, ill try it later this evening, thanks for replying!

Edit: worked, thank you!

1 Like
4

This is a known issue in the React SDK, essentially the SessionProvider renders its children before its state is known, i.e., sessionRequestInProgress, and this causes the problem you experienced. Thanks @Vincent for the workaround.

We took a different direction when we had this issue in Pod Browser, and our workaround was more comprehensive: pod-browser/AuthenticationProvider.jsx at main · inrupt/pod-browser · GitHub

We’re looking at improvements we can make it the React SDK.

2 Likes