Auth0 redirect not working in chrome while using nodejs as backend and react js on front-end

nishit · March 13, 2023, 2:17pm

We have been facing the above mentioned issue from the starting but now it has become our only reason not to use auth0 for authorization. We need the solution for the problem ASAP as we need to roll out our product which is development ready and up for testing .

The issue :-
When the user logs in using email and password in the chrome browser, the access token present in the redirect URL is not being resolved . The reason is unknown and we are not getting any errors in the console also . We had done our research in the respective field and found that it might happen due to some adblocker but we removed all the extensions present in the chrome browser . This not only happens on chrome but also on safari so please can anyone help us out .

Thank you

dylan.sebastianmte · March 15, 2023, 1:48am

Lo solucioné pasando las credenciales en index.js con Auth0Provider de la siguiente forma:

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<React.StrictMode>

</React.StrictMode>
);

En mi caso el problema era que habia escrito redirectUrl en lugar de redirectUri

konrad.sopala · March 15, 2023, 1:10pm

Thanks for sharing that with the rest of community!

dan.woda · March 16, 2023, 5:30pm

Hi @nishit,

Can you provide some additional info about the following statement?

the access token present in the redirect URL is not being resolved

What do you mean by “Not being resolved”?

Can you also give an example of the response you are seeing?

nishit · March 16, 2023, 5:54pm

Ideally whenever the user logs in using his email-id and password they get redirected to the redirect-uri along with the code which then further authenticate user with access token. But in chrome specifically the user is getting stuck at the redirect-uri (the one with the code) but the work flow works just fine in other browsers and also the social login works great with all the browsers.
P.S:We are using Auth0-provider react sdk.

dan.woda · March 16, 2023, 6:38pm

Could you please provide a HAR file of the behavior and send it to me in a DM?

dan.woda · March 22, 2023, 9:31pm

Thanks for sending that over.

I had a chance to look at the file, and I see some odd behavior. Could you please share the details of your implementation? A code snippet is a good place to start. Particulary in how you are handling the auth code.

nishit · March 24, 2023, 9:21am

Hey Dan,
So glad to hear back from you , so here is how we handle the auth code that is redirected to us by auth0 we call getAccessTokenSilently() function of “@auth0/auth0-react” react library below is the code snippet provided . The function return us the access token and id token . Below is the representation of request and response:-

REQUEST:-

{
"client_id":`${clientID}`,
"code_verifier":`${code_verfier}`,
"code":`${code}`,
"redirect_uri":`${redirect_uri}`
}

NOTE :- the actual values are replaced with the variables (for privacy reasons).

RESPONSE:-

{
"access_token":`${access_token}`,
"id_token":`${id_token}`,
"scope":`openid profile email offline_access`,
"expires_in":86400,
"token_type":"Bearer"
}

Code snippet used in the frontend

Below code describes how we initialize the Auth0Provider:-

<React.StrictMode>
  <Auth0Provider
    domain=`${domain}`
    clientId=`${clientID}`
    redirectUri=`${redirect_uri}`
    audience=`${audience}`
    scope="openid profile email offline_access"
    cacheLocation="localstorage"
  >
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Auth0Provider>
</React.StrictMode>

2.This is how we handle the code with getAccessTokenSilently() function.

const { isAuthenticated, logout, loginWithRedirect, getAccessTokenSilently } =
      useAuth0();

  const fetchAccessTokenAuth0 = async () => {
    const GATS = await getAccessTokenSilently();
    return GATS;
  };

  useEffect(() => {
    if (isAuthenticated) {
      async function asyncTokenFetch() {
        const fat0 = await fetchAccessTokenAuth0();
        await globalInfo.setAccessTokenAuth0(fat0);
        localStorage.setItem("accessTokenSaasDen", fat0);
      }

      asyncTokenFetch();
    }
  }, [isAuthenticated]);

and an additional query is it secured to store the access token in local storage?

let us know if you need anything else from us to solve the issue .

Thanks again

dan.woda · March 24, 2023, 1:50pm

FYI, the SDK has token caching built in to getAccessTokenSilently. When it fetches a token, it sets it in the specified cacheLocation and only retrieve a new one when the existing token is no longer valid. No need to handle that manually.

I’m seeing requests to a /loading-tokens endpoint. Is that something you’ve done in your app?

nishit · March 24, 2023, 4:34pm

Yeah the /loading-tokens endpoint is a route made on frontend which has the 2nd code snippet from the previous reply.

The main problem arises when the user tries to login in chrome the function getAccessTokenSilently() is not called probably.

dan.woda · March 24, 2023, 4:38pm

In the HAR you sent, it looks like the request gets hung up on that endpoint.

Did you follow one of our quickstarts when setting up the app? You shouldn’t need to handle the code and verifier at all, the SDK does all of that for you.

nishit · March 24, 2023, 5:01pm

We followed the quickstarts but we needed to store the access token explicitly to send it to the backend api calls, this method work great for other browsers but for chrome it doesn’t.

dan.woda · March 24, 2023, 5:03pm

The SDK is doing this exactly. Can you show the code that is hitting that endpoint?

nishit · March 24, 2023, 5:13pm

This method is working fine with other browsers but only have the problem in chrome can you specify why is that.

The request is stuck on this url

and here is the network tab

nishit · March 24, 2023, 5:15pm

Here is the image of the network tab in firefox where it works correctly

dan.woda · March 24, 2023, 6:38pm

Yes, I’ve looked at the HAR. It appears something in your code prevents the rest of the flow from completing, and considering it is ending on the non-auth0 endpoint /loading-tokens, I would start there.

Can you share what is happening in your code at that endpoint?

Also, a HAR from another browser, with it working, could be useful.

I would also suggest removing the redundant behavior in your app (i.e. fetchAccessTokenAuth0, GATS, etc.)

dan.woda · March 27, 2023, 2:00pm

Hi @nishit,

Thanks for sending that over.

I noticed a few potential issues while looking at those captures:

Your app is incorrectly registered as a Regular Web App. If you are running a SPA (React), it should be registered as such.
You are missing the Allowed Web Origins in your application settings. Without this, you will not be able to refresh silently.
You are requesting refresh tokens, but not receiving them. If you look at the request, you aren’t returned a refresh token at any point.
You are storing access tokens in localstorage. This is generally considered a bad practice.

The problems logging in may be a result of the Allowed Web Origins settings, but it could be unrelated.

I would highly recommend following our React Quickstart for setting up your app, as it appears you are missing several pieces of the boilerplate setup, and are including some anti-patterns that should be avoided.

nishit · April 7, 2023, 8:39am

Hey Dan, I implemented the first and second points and configured my app as per the React Quickstart as well. Can you explain how I can implement the rest (bypass the local storage and still get access tokens at any point)?

Given below is the new code for the Provider:

import React from "react";
import * as ReactDOMClient from 'react-dom/client';
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
import { clientID, domain } from "../src/API";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOMClient.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={clientID}
      audience="https://www.saasden.club"
      authorizationParams={{
        redirect_uri: "https://saasden.club/loading-tokens",
      }}
    >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Auth0Provider>
  </React.StrictMode>
);

dan.woda · April 7, 2023, 2:42pm

Great!

For the access token, please see the Get an access token section of the quickstart. It demonstrates how to retrieve the token.

nishit · April 8, 2023, 8:17pm

This is the error I encountered after completing all the steps.

I looked for a similar issue on the internet but couldn’t find a reliable answer. What exactly is this error, and how can it be avoided? What else needs to be changed?