Refreshing page cause "loading..." stuck forever

[AntonioM]

Hello, I am building a React app based on React quickstart found here on Auth0 docs .

Login/Logout and token generation/retrieval from backend API works well with google, twitter and email+pwd.

However, when I refresh the page on browser on an already logged user I get a forever “loading…” situation resulting from this line of code (coming from the Auth0 react template)

const { loading} = useAuth0();
  // LOADING IS FOREVER TRUE WHEN REFRESHING PAGE ON AUTHENTICATED USER 
  if (loading) {  
    return <div>
      Loading...
    </div>;
  }

digging a bit into Auth0 code it seems the problem is caused by retrieving user info from Auth0 servers providing some info retrieved from an Auth0 cookie. Indeed, if I delete the Auth0 cookie from browser the app works again as unauthenticated user, I can then login/logout with no problems, but if I refresh the page it gets stuck on loading again.

Looking at errors in the Chrome console (Firefox gives no error) I found these messages (personal info replaced with placeholders):

A cookie associated with a cross-site resource at https://MY_DOMAIN.auth0.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at Chrome Platform Status and Chrome Platform Status.

but, most important, a clear failure retrieving user data from Auth0 here:

Failed to load resource: the server responded with a status of 400 ()

https://MY_DOMAIN.auth0.com/authorize?client_id=MY_CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=MY_STATE&nonce=MY_NONCE&code_challenge=MY_CODE&code_challenge_method=S256&prompt=none&auth0Client=MY_AUTH0_CLIENT

this could explain the forever loading status, as Auth0 utilities are unable to retrieve user info starting from the cookie. I have checked the params in my control (client_id, my_domain, redirect_url) and they seem ok. The problem seems to be with the cookie.

Anyone can help me discover what’s wrong with the cookie?

Probably I’m missing something trivial but at the moment I can’t solve it on my own, I’d really appreciate any help to speed up my app development.

Thanks

[AntonioM]

update:

Waiting 3 minutes the Loading succeed

If I look the console it seems the authorize call

https://MY_DOMAIN.auth0.com/authorize?client_id=MY_CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=MY_STATE&nonce=MY_NONCE&code_challenge=MY_CODE&code_challenge_method=S256&prompt=none&auth0Client=MY_AUTH0_CLIENT

makes a 2nd attempt and after 1 minute it gets the user info with success so my app proceed normally

But if I refresh the browser page I have to wait another 3 minutes to get again user info.

My internet connection is a bit slow during this pandemic days but not at that point

another thing I tried is to open the authorize request into another browser tab and I get something like this (click the picture to see it all)

note the registered origin error. But I’m using the react components in the quickstart sample, I’m not in control of this low level javascript functions, it’s handled by the React component. anyway after 3 minutes it fixes itself so the params I pass must be good.

Any tip to avoid this 3 minutes hiccup?

Thanks

[mathiasconradt]

Regarding this error message, see:

Silent Authentication: 'does not have a registered origin'

The checkSession method superseded the renewAuth one as it provides the same functionality with less overhead to the client application. However, the checkSession method does require that you explicitly set the Allowed Web Origins client settings property with the origins that will be performing the requests. In this particular case, if your client application is deployed in domain test.xxxx.no and as such is using a redirect URL of https://test.xxxx.no/xxxxx/ then you need to add https://test.…

Add http://localhost:3000 to the Allowed Web Origins in the Application settings in the Dashboard.

[AntonioM]

Damn I was sure I set the web origin… I did it for the app in the old tenant, but when I quickly recreated the same app in a new tenant (with a nicer name) I missed that field

Fixed and it works. Now 3 seconds loading instead of 3 minutes

Thanks for the Nth time!

[mathiasconradt]

No problem, glad it’s working.