# How to maintain app page/location on browser refresh?

**URL:** <https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273>\
**Category:** Get Help\
**Tags:** auth0-react\
**Created:** [February 15, 2022, 1:06am UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273 "2022-02-15T01:06:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael4](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/michael4/32/33224_2.png) [@michael4](https://community.auth0.com/u/michael4)\
**Post date:** [February 15, 2022, 1:06am UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/1 "2022-02-15T01:06:05Z")

</div>

- **Which SDK this is regarding:** @auth0/auth0-react
- **SDK Version:** 1.9.0

I feel like I’m missing something very obvious, but I’m creating this topic because I haven’t been able to find anything useful in the Auth0 documentation, and all the issues and SO questions I’ve been able to find are about persisting _login/authentication_ on browser refresh, rather than maintaining app _location_.

**Problem:** When the user is logged in and on a page with a dynamic url (eg `/products/:productId`), when the browser is refreshed, the url is changed to `/` and the user is back on the main menu.

**What I think is happening**  
Based on console logs, HAR analysis, and inspection of the SDK code, here’s my best guess of what’s currently happening.

1. User is on `/product/1234`. Auth0 client is setup with a `redirectUri` value of `window.location.origin`. The `auth0.{clientId}.is.authenticated=true` cookie is present.
2. Browser refreshes
3. A GET request is made to `/product/1234` and page resources are downloaded
4. Something in the Auth0 client triggers at GET request to `<domain>.auth0.com/authorize`.
5. Then there’s a 302 redirect from `<domain>.auth0.com/authorize`
6. Then there’s a GET to `/`. Presumably because `redirectUri={window.location.origin}`
7. Then `react-router` does its thing and takes the user to the protected `/menu` route.

**Other things to note**

- `skipRedirectCallback: true` didn’t make any difference
- Even if there was a way to dynamically update the `redirectUri`, “Allowed Callback URLs” only allows wildcards for subdomains.

**Questions**

- What is causing the auth request in step 4 above? (maybe the `useEffect` in `auth0-provider.tsx`?). Is there a way to pass `appstate.returnTo` into it? Or is there a way to set it to authenticate without redirecting at all?
- Is there an easy way to maintain the app location? This feels like something Auth0 would have had a simple solution for already. Am I missing something? Or perhaps I’ve accidentally set my app up in a way the prevents it just working ‘out of the box’?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [February 23, 2022, 7:39pm UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/3 "2022-02-23T19:39:50Z")

</div>

Hi @michael4,

Welcome to the Auth0 Community!

This has been implemented in our example app. Take a look:

> <https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/index.js>

---

<div class="post-metadata">

**Author:** ![michael4](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/michael4/32/33224_2.png) [@michael4](https://community.auth0.com/u/michael4)\
**Post date:** [February 26, 2022, 11:16pm UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/4 "2022-02-26T23:16:54Z")

</div>

Hi @dan.woda

Thanks for your welcome and for your help.

Yes, I had already spent some time trying to implement the ideas in that example app, but the problem I was having with that is that `appState` is always `undefined`, and `window.location.pathname` is `/`.

I’ll spend some time now trying to figure out how to make sure that `appState.returnTo` is set properly on browser refresh.

If I set `appState.returnTo` on the `loginWithRedirect()` function like this:

```auto
loginWithRedirect({
      appState: {
        returnTo: window.location.pathname,
      },
    });

```

that works fine when the user initially logs in. But I don’t know if that `appState` is maintained after the initial login, and even if it did, the `returnTo` value set on initial login is unlikely to be the same path the user is on when the browser refreshes.

So I guess my question above still stands: What is causing the auth request in step 4 above? (maybe the `useEffect` in `auth0-provider.tsx` ?). Is there a way to pass a `appstate.returnTo` value into it? Or is there a way to set it to authenticate without redirecting at all?

My code, as it currently stands:

```auto
export const AuthProvider: FC<PropsWithChildren<Props>> = ({ children }) => {
  const history = useHistory();

  const onRedirectCallback = (appState: AppState) => {
    history.push(
      appState && appState.returnTo
        ? appState.returnTo
        : window.location.pathname
    );
  };

  const auth0Options: Auth0ProviderOptions = {
    domain: process.env.REACT_APP_AUTH0_DOMAIN || '',
    clientId: process.env.REACT_APP_AUTH0_CLIENT_ID || '',
    redirectUri: window.location.origin,
    audience: process.env.REACT_APP_AUTH0_AUDIENCE || '',
    onRedirectCallback,
    cacheLocation: isCypress ? 'localstorage' : 'memory',
    useRefreshTokens: true,
  };

  return <Auth0Provider {...auth0Options}>{children}</Auth0Provider>;
};

```

```auto
const LoginPage = () => {
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();

  if (!isLoading && !isAuthenticated) {
    loginWithRedirect({
      appState: {
        returnTo: window.location.pathname,
      },
    });
  }

  return (
    <LandingPageLayout isLoading={isLoading}>
      <div />
    </LandingPageLayout>
  );
};

```

---

<div class="post-metadata">

**Author:** ![akhroot](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/akhroot/32/39077_2.png) [@akhroot](https://community.auth0.com/u/akhroot)\
**Post date:** [July 31, 2022, 6:14pm UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/5 "2022-07-31T18:14:49Z")

</div>

hey @michael4, have you been able to solve this? I have the same issue and I couldn’t figure out a way to make it work.

---

<div class="post-metadata">

**Author:** ![michael4](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/michael4/32/33224_2.png) [@michael4](https://community.auth0.com/u/michael4)\
**Post date:** [August 1, 2022, 1:17am UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/6 "2022-08-01T01:17:11Z")

</div>

Sorry @akhroot , I have not. I’ve been working on other projects.

There is one more thing I intend to try when I resume work on this project, but it’s a long shot.

EDIT: I just tried it. It didn’t help.

---

<div class="post-metadata">

**Author:** ![malhard](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/malhard/32/33197_2.png) [@malhard](https://community.auth0.com/u/malhard)\
**Post date:** [August 31, 2022, 3:57am UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/7 "2022-08-31T03:57:56Z")

</div>

Refer my post here: [https://stackoverflow.com/a/73550700/10483961](https://stackoverflow.com/a/73550700/10483961)

Your welcome 🙃

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [September 30, 2022, 11:00pm UTC](https://community.auth0.com/t/how-to-maintain-app-page-location-on-browser-refresh/78273/8 "2022-09-30T23:00:27Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.