Auth0 - error feacft (Failed Exhange) keeps redirecting me to the login page

Help
,
1

Hey,

I am new to Auth0 and am simply just at the setup part. I have been looking at the documentation and quick start guide which I have followed. Yet it seems weird that I get redirected to the login page each time my user logs in. I make use of a HOC to protect my dashboard route which has children routes (players, teams, subscriptions etc…) I wrapped my dashboard component with an custom AuthComponent:

const AuthComponent: React.FC<AuthComponentProps> = ({ component }) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <div>Redirecting you to the login page...</div>,
  });
  return <Component />;
};

It seems like my user can’t login and thus when after logging it it tries to hit my callback url which is just simply http://localhost:5173 (same path for my dashboard) and thus redirects me back. I have done nothing in the management dashboard besides copying the clientId and domain key. No changes made in settings, everything is set to default.

Could someone help me out with this problem?

Here is my router code:

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<AuthComponent component={Dashboard} />}>
        <Route path="teams" element={<Teams />} />
        <Route path="spelers" element={<Players />} />
        <Route path="abbonement" element={<Subscription />} />
        <Route path="instellingen" element={<Settings />} />
      </Route>
    </Routes>
  );
};

and my Auth0ProviderWithNavigate:

export const Auth0ProviderWithNavigate = ({
  children,
  ...props
}: Auth0ProviderWithNavigateProps) => {
  const navigate = useNavigate();

  const domain = import.meta.env.VITE_AUTH0_DOMAIN;
  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onRedirectCallback = (appState: any) => {
    navigate((appState && appState.returnTo) || window.location.pathname);
  };

  if (!(domain && clientId)) {
    return null;
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      onRedirectCallback={onRedirectCallback}
      {...props}
    >
      {children}
    </Auth0Provider>
  );
};

I hope someone knows the answer as this is taking me to long…