After successful login token is not return and user is not logged in

Help
1

auth0-react: 1.4.0

<Link to="/" onClick={() => loginWithRedirect()}>

                    Sign in

                </Link>

Above code send login request and prompts user credential. Upon successful login, it returns to homepage, currently is set to localhost:3000.

However, when it successfully logs in the user it doesn’t return the user token, instead the page url becomes localhost:3000/?code=whatever-the-code-is.

I have to click on sign in button again then, it logs in the user.

**edit: so it works on Google chrome, but it doesn’t work on Brave browser, seems like it has something to do with Intelligent Tracking Prevention( ITP). I do have set useRefreshToken to true.

Is there any work around for this issue?

3

Hi @beana77,

Since it’s working in Chrome, but not Brave, I think you are correct about ITP. Blocked third-party cookies become an issue when silent authentication takes place across different domains. Using rotating refresh tokens will prevent the need for silent authentication in some cases, but silent auth will still be used as a fallback when the tokens are not found in memory (for example, after a page refresh) or if a new scope or audience is specified in a getTokenSilently request.

To prevent failed silent auth when third-party cookies are blocked, you can either 1) set up your Auth0 tenant to use a custom domain, or 2) you can alter your code so that silent auth is not required.

  1. Here is information about setting up a custom domain: Custom Domains. This option is available for any paid subscription.

  2. To prevent silent auth requests, you can cache tokens in local storage. There are security considerations which you can read about here: Token Storage. You will also need to make sure that the Auth0Provider component is initialized with the same audience and scope as any getTokenSilently calls:

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    scope={config.scope}
    redirectUri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
    useRefreshTokens={true}
    cacheLocation="localstorage"
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);
4

Hi @stephanie.chamblee ,

Yeah I do have useRefreshToken enabled in my provider,

<Auth0Provider
    domain={config.domain}
    clientId={config.client}
    redirectUri={window.location.origin}
    audience={config.audience}
    scope="read:current_user"
    useRefreshTokens={true}
    cacheLocation="localstorage"
  >

I do save the cache tokens in local storage, and I’m not calling getTokenSilently anywhere, or, does this function gets called under the hood?

5

Your settings look good and seem to work properly when I try it out using the quickstart app with my tenant in Safari. I’m using the Management API as the audience in my test application. Would you mind creating a HAR file and sending it to me in a private message so that I can continue troubleshooting this issue? The HAR file should include the network requests that occur during the login flow. You can capture these by selecting preserve log in the network tab of dev tools in most browsers:

To send a private message, you can select my avatar and click the blue Message button. Thank you!

7

Hi @beana77,

Looking at your HAR file, the requests all look correct for the login, but I’m not seeing the failed silent auth or the /token request. When you take a look at the network tab after authentication, do you see a failed /authorize request with the message login_required or a request to /token?

Also, have you tried extending the leeway config in the Auth0Provider to see if there might be a race condition somewhere?

https://auth0.github.io/auth0-react/interfaces/auth0_provider.auth0provideroptions.html#leeway