onSessionRestore sends me back to the homepage of React App

Build a Solid App
1

Hi everyone,

I am making a React App combined with solid-ui-react and wanted to keep the session alive on page refresh. This works, however on refresh, my app sends me back to the homepage, which makes for an uncomfortable user experience. I was wondering if anyone would helpo me out with making the session stay alive on the same page I refreshed on.
I made a special component which wraps around my Router to help with the session-alive-keeping.

`export default function AuthWrapper ({
children,
ā€¦props
}) {

const loc = useLocation();
const hist = useHistory();


let returnTo = loc;

onSessionRestore((url) => {
    console.log(url, returnTo)
    hist.push(url)
})

useEffect(() => {
    handleIncomingRedirect({
        restorePreviousSession: true,
    }).then(((info) => {
        
    }))
}, [])


return (
    <>
        {children}
    </>
)

}`

It uses the solution comming from the Solid developers themselves, however they are using Next, while I am using CRA.
https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/restore-session-browser-refresh/

Can anyone point me out to my mistake or maybe the solution?

2

You can pass a url to handleIncomingRedirect which will be used to redirect a user after login/session restore.

But I would recommend you to redirect to always the same page and saving the inital route to localStorage before the app is refreshed/unmounted (for example by returning a function in useEffect of App.tsx) and then reading the route when being redirected from login to restore the path the user was on

1 Like
3

this could btw be simplified to be:
return children
:wink:

1 Like
4

Tried this and Iā€™m getting close, but still not working properly. It seems when I add the ā€˜urlā€™ property in the
handleIncomingRedirect, I get an error message saying:

Unhandled Rejection (Error): Field [sessionId] for user [7af08b5d16744211b9fbd7a011556b2a] is not stored

Because of this error I, canā€™t log in in any way possible, even when not logged in at the start.
This is in my App.js now:
useEffect(() => { return () => { localStorage.setItem('CURRENT_PAGE', window.location.href) }; },[])

And my AuthWrapper.js:
`export default function AuthWrapper ({
children,
currentPage,
ā€¦props
}) {

const hist = useHistory();
const [returnTo] = useState(localStorage.getItem('CURRENT_PAGE')) 

onSessionRestore((url) => {
    hist.push(url)
})

useEffect(() => {
    handleIncomingRedirect((returnTo), {
        restorePreviousSession: true,
        url: returnTo
    }).then(((info) => {
        // ... 
    }))
}, [])


return children;

}
`

I feel like I am close, but I canā€™t figure this new problem out, and documentation is scarce.

1 Like
5

Hmm, the code looks good to me. Just a few questions to verify:

  1. onSessionRestore is imported from @inrupt/solid-client-authn-browser? And login too, wherever you call it?
  2. Are you using React Router?
  3. Do you see the console.log in onSessionRestore being called? If so, does url look like what youā€™d expect?

Edit: ah, posted at the same time. Passing returnTo to handleIncomingRedirect is definitely incorrect - you need to pass the URL of the current page, including its query parameters (or nothing, in which case solid-client-authn-browser will figure that out itself).

6

onSessionRestore is indeed called from @inrupt/solid-client-authn-browser.
loginon the other hand is trickier, as I use the solid-ui-react which might be the origin of the issue?
I am using react router too, in the example they use the NextJS Router.
The console.log shows the link it should go to, but the hist.push(url) dos not seem to trigger.

7

OK, that login should be fine then too, as that is indeed also imported directly from solid-client-authn-browser.

If the console.log shows the correct URL, that implies that solid-client-authn-browser is working correctly, I think. That should work fine regardless of the router you use.

Can you use hist.push to navigate to another location elsewhere, i.e. outside of onSessionRestore? What do you see if you log hist from within onSessionRestore?

8

Ik, it seems that the ā€œproblemā€ comes from the hist.push(url).
The useHistoryhook does not accept a whole URL as a paramter, only the subdirectory/path.

I think I should be able to extract that path from the url that I provide in onSessionRestore.

Thanks for pointing me to the right direction!

1 Like
9

Managed to find the solution. It was the react router all this timeā€¦

I made a function that extracts the path from the URL:
`

function getPathFromURL(url) {
    let path;
    let tempURL = new URL(url)
    path = tempURL.pathname + tempURL.search
    return path;
}

This is then called in the hist.push(getPathFromURL(url)). Works like a charm!
There still is a few redirects while logging in, but at least the app goes back to the original page after it is done!

Thanks both of you!

edit: small typo

1 Like
10

Great that you found your solution :+1:
Maybe also think about using hist.replace instead of .push to not add redirects to the navigation history :slight_smile:

11

It seems to me that there is a deeper problem with session restore, that always send the user back to the page where he has logged in

12

@Smag0 do you think the solution mentioned by @julienmenten, based on client-side routing and onSessionRestore, could apply to the issue you are facing ?