URI hash fragment doesn't seem to be redirecting

Describe the problem

When redirecting to my application, the url hash fragment doesn’t seem to be consumed by Auth0Provider.

What was the expected behavior?

I guess I’m not sure what I should be doing on my app when auth0 redirects back.

Reproduction

This is in the latest version of chrome. It’s probably important to note that I’m using preact, but I don’t think that’s the issue.

I’m logging in from localhost:8080, and redirecting to localhost:8081.

login url https://dev-id.us.auth0.com/authorize?response_type=token&client_id=dev-key&redirect_uri=http://localhost:8081

redirect

code index.js

import { Auth0Provider } from "@auth0/auth0-react";

...

const onRedirectCallback = (appState) => {
  history.push(
    appState && appState.returnTo ? appState.returnTo : window.location.pathname
  );
};

const providerConfig = {
  domain: import.meta.env.AUTH0_DOMAIN,
  clientId: import.meta.env.AUTH0_CLIENT_ID,
  redirectUri: window.location.origin,
  onRedirectCallback
}

const About = lazy(() => import('./pages/about/index.jsx'));

export const App = () => {
  return (
    <Auth0Provider {...providerConfig}>
      <LocationProvider>
        <div class="app">
          <Header />
          <ErrorBoundary>
            <Router>
              <Route path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route default component={NotFound} />
            </Router>
          </ErrorBoundary>
        </div>
      </LocationProvider>
    </Auth0Provider>
  );
}

code /home

import { useAuth0 } from "@auth0/auth0-react";

const Home = () => {
  const {
    isLoading,
    isAuthenticated,
    error,
    user,
    loginWithRedirect,
    logout,
  } = useAuth0();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Oops... {error.message}</div>;
  }

  if (isAuthenticated) {
    return (
      <div>
        Hello {user.name}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={loginWithRedirect}>Log in</button>;
  }
}

export default Home;

Clicking the loginWithRedirect button here works… it makes me re-authenticate, then redirects back to my app, and it works great. I noticed that the redirect that the js click returns to has the token within the query params, and not the hash fragment. That seems to be the issue.

In my case, I’m developing the “marketing pages” with the login button separately from the “app” that gets logged into - hence the different flows. Hopefully that makes sense.

Thanks for your help!

[dudo]

Sounds good. Thanks for the explanation!

[adamjmcgrath]

Forgive me if this is frustrating, for I am not an authentication expert. Thank you for bringing me up to speed!

It’s no problem

At the end of the day… both the href and the js are just calling a url with some instructions for the callback, no?

Unfortunately not, additional checks need to be stored on the client when making the authorization request and retrieved by the client to verify the authorization response.

In your case, this means that your marketing site must generate some values (including state and a cryptographically generated code challenge and verifier) to include in the authorize url and store on the browser. Then your app needs to access those values and use them to verify the authorization response on your redirect callback page.

These limitations are not unique to this SDK or Auth0, this is just how the protocol works.

What are the levers I need to pull to have parity in their behavior?

I can only recommend the suggestions I’ve already given you:

• use the SDK to initiate the login from your marketing site (assuming your marketing site and app are on the same domain in your other environments as well)
• link to the app, then immediately initiate the login from there