# onSessionRestore sends me back to the homepage of React App

**URL:** <https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348>\
**Category:** Build a Solid App\
**Created:** [May 30, 2021, 5:21pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348 "2021-05-30T17:21:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![julienmenten](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@julienmenten](https://forum.solidproject.org/u/julienmenten)\
**Post date:** [May 30, 2021, 5:21pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/1 "2021-05-30T17:21:28Z")

</div>

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/](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?

---

<div class="post-metadata">

**Author:** ![anon85132706](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anon85132706](https://forum.solidproject.org/u/anon85132706)\
**Post date:** [May 31, 2021, 4:53pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/2 "2021-05-31T16:53:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon85132706](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anon85132706](https://forum.solidproject.org/u/anon85132706)\
**Post date:** [May 31, 2021, 4:54pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/3 "2021-05-31T16:54:30Z")

</div>

> [@julienmenten](#):
>
> ```auto
> return (
> <>
> {children}
> </>
> ) 
> 
> ```

this could btw be simplified to be:  
`return children`  
😉

---

<div class="post-metadata">

**Author:** ![julienmenten](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@julienmenten](https://forum.solidproject.org/u/julienmenten)\
**Post date:** [May 31, 2021, 6:33pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/4 "2021-05-31T18:33:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@Vincent](https://forum.solidproject.org/u/Vincent)\
**Post date:** [May 31, 2021, 6:34pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/5 "2021-05-31T18:34:19Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![julienmenten](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@julienmenten](https://forum.solidproject.org/u/julienmenten)\
**Post date:** [May 31, 2021, 6:51pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/6 "2021-05-31T18:51:07Z")

</div>

`onSessionRestore` is indeed called from `@inrupt/solid-client-authn-browser`.  
`login`on 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](https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/restore-session-browser-refresh/) 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.

---

<div class="post-metadata">

**Author:** ![Vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@Vincent](https://forum.solidproject.org/u/Vincent)\
**Post date:** [May 31, 2021, 7:00pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/7 "2021-05-31T19:00:27Z")

</div>

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`?

---

<div class="post-metadata">

**Author:** ![julienmenten](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@julienmenten](https://forum.solidproject.org/u/julienmenten)\
**Post date:** [May 31, 2021, 7:11pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/8 "2021-05-31T19:11:44Z")

</div>

Ik, it seems that the “problem” comes from the `hist.push(url)`.  
The `useHistory`hook 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!

---

<div class="post-metadata">

**Author:** ![julienmenten](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@julienmenten](https://forum.solidproject.org/u/julienmenten)\
**Post date:** [May 31, 2021, 7:21pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/9 "2021-05-31T19:21:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon85132706](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anon85132706](https://forum.solidproject.org/u/anon85132706)\
**Post date:** [June 1, 2021, 11:05am UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/10 "2021-06-01T11:05:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Smag0](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/smag0/32/310_2.png) [@Smag0](https://forum.solidproject.org/u/Smag0)\
**Post date:** [August 29, 2021, 2:41am UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/11 "2021-08-29T02:41:24Z")

</div>

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

> <https://github.com/inrupt/solid-client-authn-js/issues/1473>
>
> \### Bug description
> handleIncomingRedirect with restorePreviousSession restore …all query parameters but i don't want 
> 
> I want the user is logged back when he visits the app and has already logged but not to restore all the query parameters that were in the url when he loggin.
> so, to restore his session, i use 
> \`
> import \* as sc from '@inrupt/solid-client-authn-browser'
> ...
> sc.handleIncomingRedirect({restorePreviousSession : true})
> \`
> 
> code here https://github.com/scenaristeur/booklice/blob/9f15b5c81878fc1551b4513518b64b107e4f6276/src/plugins/vue-solid.js#L63
> 
> But the query parameters are lost when using "restorePreviousSession"
> 
> if the url is \` http://127.0.0.1:8080/?url=https://the.url.com&title=bookmark&text=blabla\` when the user login, 
> the next time he visits the app with some other query parameters, like\` http://127.0.0.1:8080/?url=https://another\_url.com&title=something\_else&text=tiptop\` but the new query parameters are replaced with the one that were registered when he logged in.
> 
> \### To Reproduce
> 1. open https://scenaristeur.github.io/booklice/?url=the.url.com&title=bookmark&text=blabla
> 2. Login
> 3. open https://scenaristeur.github.io/booklice/?url=https://another\_url.com&title=something\_else&text=tiptop
> 4. the query parameters in the url are replaced with the one that was registered when login
> 5. if the user log out he can now access https://scenaristeur.github.io/booklice/?url=https://another\_url.com&title=something\_else&text=tiptop
> 
> \### Expected result
> the redirect should be with ?url=https://another\_url.com&title=something\_else&text=tiptop
> 
> \### Actual result
> the redirect is always with ?url=the.url.com&title=bookmark&text=blabla
> 
> \### Environment
> \`\`\` npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers
> npx : 1 installé(s) en 1.295s
> 
> System:
> OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
> CPU: (4) x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
> Memory: 221.99 MB / 7.60 GB
> Container: Yes
> Shell: 5.0.17 - /bin/bash
> Binaries:
> Node: 14.17.1 - /usr/bin/node
> npm: 6.14.13 - /usr/bin/npm
> Browsers:
> Chromium: 91.0.4472.114
> Firefox: 89.0.2
> npmPackages:
> @inrupt/solid-client: ^1.9.0 =\> 1.9.0 
> @inrupt/solid-client-authn-browser: ^1.9.1 =\> 1.9.1 
> @inrupt/vocab-common-rdf: ^0.7.4 =\> 0.7.4 
> @inrupt/vocab-inrupt-common: ^0.7.4 =\> 0.7.4 
> @inrupt/vocab-solid-common: ^0.7.4 =\> 0.7.4 
> @vue/cli-plugin-babel: ~4.5.0 =\> 4.5.13 
> @vue/cli-plugin-eslint: ~4.5.0 =\> 4.5.13 
> @vue/cli-plugin-pwa: ~4.5.0 =\> 4.5.13 
> @vue/cli-plugin-router: ~4.5.0 =\> 4.5.13 
> @vue/cli-plugin-vuex: ~4.5.0 =\> 4.5.13 
> @vue/cli-service: ~4.5.0 =\> 4.5.13 
> babel-eslint: ^10.1.0 =\> 10.1.0 
> bootstrap: ^5.0.2 =\> 5.0.2 
> bootstrap-vue: ^2.21.2 =\> 2.21.2 
> core-js: ^3.6.5 =\> 3.15.1 
> eslint: ^6.7.2 =\> 6.8.0 
> eslint-plugin-vue: ^6.2.2 =\> 6.2.2 
> register-service-worker: ^1.7.1 =\> 1.7.2 
> vue: ^2.6.11 =\> 2.6.14 
> vue-router: ^3.2.0 =\> 3.5.2 
> vue-template-compiler: ^2.6.11 =\> 2.6.14 
> vuex: ^3.4.0 =\> 3.6.2 
> npmGlobalPackages:
> @vue/cli: 4.5.13
> ember-cli: 3.26.1
> ember-rdfa-semapps: 0.0.0
> npm-check-updates: 11.6.0
> npm: 6.14.13
> 
> \`\`\`
> 
> \## Additional information
> Another redirection is used to allow hosting on github pages
> \- https://github.com/scenaristeur/booklice/blob/9f15b5c81878fc1551b4513518b64b107e4f6276/public/404.html#L9
> \- https://github.com/scenaristeur/booklice/blob/9f15b5c81878fc1551b4513518b64b107e4f6276/public/index.html#L15
> 
> but it has never been a problem, it was already used on poPock with solid-auth-client https://scenaristeur.github.io/solid-vue-panes/bookmarks?title=Popock&url=https%3A%2F%2Fscenaristeur.github.io%2Fsolid-vue-panes%2F&text=My%20favorite%20Pod%20Manager

---

<div class="post-metadata">

**Author:** ![zwifi](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/zwifi/32/1525_2.png) [@zwifi](https://forum.solidproject.org/u/zwifi)\
**Post date:** [September 1, 2021, 12:21pm UTC](https://forum.solidproject.org/t/onsessionrestore-sends-me-back-to-the-homepage-of-react-app/4348/12 "2021-09-01T12:21:44Z")

</div>

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