onRedirectCallback receives undefined in nexts production build static generation

Help
, ,
1

Hi,

I am using auth-react sdk for my Nextjs Static site. The scenarios is as follows. Once the user is logged in and shown a particular protected route page.

say something like https:/example.com/dashboard/users.

Since this is a protected route. I am using the withAuthentiationRequired (Higher order component). The code looks something like this

export default withAuthenticationRequired(
  UsersList,
 {
    onRedirecting: () => <AuthenticationLoading />,
    returnTo: authReturnToUrl,
    loginOptions: {
      portalType: ''Some portal name',
      appState: {
        foo: 'bar',
      },
    },
  }
)

Now this is what my AuthProvider looks like

 <Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
      clientId={process.env.NEXT_PUBLIC_CLIENT_ID}
      audience={process.env.NEXT_PUBLIC_AUTH0_AUDIENCE}
      redirectUri={typeof window !== 'undefined' && window.location.origin}
      onRedirectCallback={onRedirectCallback}
      useRefreshTokens={true}
    >

const onRedirectCallback = appState => {
  console.log('OnRedirectCallback()::: ', appState)
  Router.replace(appState?.returnTo || window.location.origin)
}

now in the development I see the following

nRedirectCallback()::: {foo: “bar”, returnTo: “/dashboard/users”}

But in production. Which is static build of next’s. I see the following:
onRedirectCallback()::: undefined

My idea is that when a user refreshes “/dashboard/users” page. Even though authentication happens, the value passed to onRedirectCallback is completed ignored.

Please help

2

Hi @aajmera - I can’t see anything wrong with your code.

I can only recommend that you try debugging your call to loginWithRedirect here auth0-react/auth0-provider.tsx at master · auth0/auth0-react · GitHub

And make sure it is sending your expected appState

1 Like
3

Thanks for helping on this one Adam!

4

I am still not getting it. This is not about calling loginWithRedirect. It is about calling withAuthenticationRequired (Higher Order Component).

If you allow me. I can send you a very simple app to demo this issue and the problem is. I am seeing this issue only in the production build.

While working in dev environment. the values are populated correctly.

Please note: When I say production build, I am referring to generating a static site build using the commands “next build” and “next export”.

5

If you allow me. I can send you a very simple app to demo this issue and the problem is.

Sure, please do - thanks @aajmera

1 Like
6

@adam.mcgrath Please suggest how do I send you the project. I cannot upload the zip file here

7

@aajmera - if it’s just a simple app to demo the issue, can you put it on GitHub?

1 Like
8

@adam.mcgrath
Sorry for the delay:

1 Like
9

Hi @aajmera - thanks for sharing that app

When I run it in development mode, visit http://localhost:3000 and am prompted to login - the appState passed to onRedirectCallback is undefined. The console logs:

OnRedirectCallback()::: undefined origin: http://localhost:3000

This is because you need to pass your appState in the appState property to loginWithRedirect here simple-auth0/UnAuthenticatedApp.js at master · ajmeraaxesh/simple-auth0 · GitHub

Change:

loginWithRedirect({
  portalType: 'Partner Portal',
})

To:

loginWithRedirect({
  appState: { portalType: 'Partner Portal' }
})

When I do this, I see the appState reflected in the console logs when I login

OnRedirectCallback():::  {portalType: "Partner Portal"}
1 Like
10

Thanks for following up on that Adam!

1 Like
11

@adam.mcgrath The issue is not about the options being passed to loginWIthRedirect.

Its about doing a hard refresh on "“http://localhost:3000/user” and making sure that we are redirected to the same page
simple-auth0/user.js at master · ajmeraaxesh/simple-auth0 · GitHub

https://auth0.github.io/auth0-react/modules/with_authentication_required.html

https://auth0.github.io/auth0-react/interfaces/with_authentication_required.withauthenticationrequiredoptions.html

If there is still an issue. I am happy to talk to you

12

Hi @aajmera - if I understand you correctly, the steps to reproduce your issue are:

  1. Run the application
  2. visit http://localhost:3000/user with no cookies
  3. Login and return to the application
  4. expect to be returned to /user - actually returned to /authenticated

If this is the case, then this is casued by simple-auth0/index.js at master · ajmeraaxesh/simple-auth0 · GitHub

When you return to the application after login, you are returned to the home page to process the state and redirect you to your state.returnTo (if specified). Since you have a router.push('/authenticated') in your home page’s render that happens after authentication - the user is redirected to /user as expected, then the code in the the homepage overrides this and redierects the user to authenticated.

I commented out the router.push('/authenticated') in simple-auth0/index.js at master · ajmeraaxesh/simple-auth0 · GitHub and the application retuned me to /user after login as expected

1 Like
13

Thanks once again for helping on this one Adam!