I am working on a react app to integrate auth0 via OpenID Connect. I am facing "nonce mismatch, expected undefined, got: XXX" error

Help
,
1

Ready to post? :mag: First, try searching for your answer.
I am working on a react app to integrate auth0 via OpenID Connect. I am facing “nonce mismatch, expected undefined, got: XXX” error. My Auth0Provider looks something like this:

    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: redirectUri + '/afterlogin',
        audience,
        channelConfig,
      }}
      useRefreshTokens
      onRedirectCallback={onRedirectCallback}
      useRefreshTokensFallback
      cacheLocation="localstorage"
    >
      {children}
    </Auth0Provider>

Not sure what or where it is wrong. Because every other time of integration is working fine (SAML, username+password, etc.,).

The error appears post login is as below:

Error: nonce mismatch, expected undefined, got: **A_VERY_LONG_CRYPTED_UUID**
    at te.handleRedirectCallback (@auth0_auth0-react.js?v=ff131330:1041:13)
    at @auth0_auth0-react.js?v=ff131330:1302:33
    at step (@auth0_auth0-react.js?v=ff131330:144:19)
    at Object.next (@auth0_auth0-react.js?v=ff131330:91:14)
    at @auth0_auth0-react.js?v=ff131330:77:67
    at new Promise (<anonymous>)
    at __awaiter (@auth0_auth0-react.js?v=ff131330:59:10)
    at @auth0_auth0-react.js?v=ff131330:1293:14
    at @auth0_auth0-react.js?v=ff131330:1333:7
    at commitHookEffectListMount (chunk-7J24JQ3Y.js?v=ff131330:16904:34)

If I refresh the page, the user object is now available, and the page continues to work as logged in. It only fails on the afterlogin page immediately after login. Not sure how nonce has anything to do here since auth0-sdk takes care of it internally.