Redirect after login page

[vladymyrivanchenko3]

Hello!

I have a NextJS app (shoes store) with many pages and my problem with redirect after login.
User can click login button at any page (home, some category, product etc., more then 100 pages) and I can’t add all of those pages to the allowed callback URI’s.

How I can implement loginWithRedirect function to redirect user back to any page after login with auth0 without adding all pages to the allowed callback URIs?

loginWithRedirect({ redirectUri: window.location.href })

Probably I can create some rule for allowed callback URIs with * ? www.myweb.com/* doesn’t work for me…

Settings:
auth0-react v1.3.0
next 9.0.2
react v17.0.1
Node 10.14.0

[stephanie.chamblee]

Hi @vladymyrivanchenko3,

To set up the redirect URL in a dynamic way, you can use appState along with an onRedirectCallback in the Auth0Provider component:

const onRedirectCallback = (appState) => {
  history.replace(
    appState && appState.returnTo
      ? appState.returnTo
      : window.location.href
  );
};

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    redirectUri={window.location.origin}
    audience={config.audience}
    scope="read:current_user update:current_user_metadata"
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

On the login button, you could store the current location path in appState:

                <NavItem>
                  <Button
                    id="qsLoginBtn"
                    color="primary"
                    className="btn-margin"
                    onClick={() => loginWithRedirect({
                      appState: {
                        returnTo: window.location.pathname
                      }
                    })}
                  >
                    Log In
                  </Button>
                </NavItem>

[vladymyrivanchenko3]

Thanks @stephanie.chamblee!
But looks like my onRedirectCallback method doesn’t invoke after login at all.
Should I add it to the allowedCallback URIs or do something else ?
I wrapped my _app.js file with Auth0Provider, it works fine for login from home page without onRedirectCallback func, but probably for NextJs I should wrapped _document.js file to invoke onRedirectCalback func successfuly ?

[vladymyrivanchenko3]

Solved!
I’ve added a redirectUri param to the loginWithRedirect function with home page and it helped.

loginWithRedirect({ redirectUri: ${window.location.origin}/home, appState: {returnTo: href } });

Have a good day!