Failing to redirect to route after logging in

[sharjeel-jan]

Issue and Steps to Reproduce

Failing to redirect to specified page after being logged in, the page gets stuck with the callback url being filled -

I've tried to add the customCallback but that doesnt seem to resolve the issue, heres my current code -

App.js -

const CallbackSuccessComponent = () => {
  const navigate = useNavigate();
  const { idToken } = useOidcIdToken();

  useEffect(() => {
    console.log(idToken);
    if (idToken) {
      navigate("/automagiqapps/ui/dashboard", { replace: true });
      window.location.reload();
    }
  }, [idToken]);

  return <div>CallbackSuccessComponent</div>;
};

function App() {
  const configuration = {
    client_id: "<CLIENT_ID>",
    redirect_uri: "${window.location.origin}/automagiqapps/ui/#callback",
    scope: "openid profile",
    authority:
      "<AZURE_AUTH_URL>",
    // service_worker_relative_url: "./OidcServiceWorker.js",
    // service_worker_only: true,
  };

  return (
    <OidcProvider
      configuration={configuration}
      callbackSuccessComponent={CallbackSuccessComponent}
    >
      <Router>
        <SnackbarProvider
          maxSnack={2}
          autoHideDuration={2000}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "center",
          }}
        >
          <Routes>{routes}</Routes>
        </SnackbarProvider>
      </Router>
    </OidcProvider>
  );
}

Login logic, pretty much copied from examples -

{!isAuthenticated && (
  <ListItemButton
    sx={{ px: 3, pt: 2.5, pb: 2.5 }}
    onClick={() => login("/automagiqapps/ui/dashboard")}
  >
    <ListItemIcon>
      <LoginIcon />
    </ListItemIcon>
    <ListItemText
      primary="Login"
      primaryTypographyProps={{
        fontSize: 15,
        fontWeight: "medium",
        variant: "body2",
      }}
    />
  </ListItemButton>
)}

Versions

"@axa-fr/react-oidc": "^6.10.13"

Screenshots

Expected

Redirected to specified route

Actual

Stuck on callback URL after pressing login and being authenticated

Additional Details

• Installed packages:

[guillaume-chervet]

hi @sharjeel-jan ,

Thank you very much for your issue.

Do you have an error in the console? or something that may help :)

Do you see in the requests debug tab an uri with "#callback" in the url?

[sharjeel-jan]

Hi @guillaume-chervet

Thanks for getting back to me so quick, I see no error in the console and I dont believe I see an #callback in any of the URLS

I've attached a screenshot below of the network tab

[guillaume-chervet]

Thank you @sharjeel-jan , that strange.

I may need more information to help you.

Did you tried your configuration on the code of that repository? (after clone and replace configuration value by yours)

[sharjeel-jan]

I havent yet tried my configuration with the example code, I'll try that and get back to you, thanks

[sharjeel-jan]

Hi @guillaume-chervet

Running with the example code I get the following after pressing Login

[guillaume-chervet]

Do you know if you oidc provider support hash redirect? It seem to redirect on the path without the hash.

[guillaume-chervet]

I am not sure but what happen if you replace ${window.location.origin}/automagiqapps/ui/#callback By ${window.location.origin}/automagiqapps/ui#callback

[solrankos]

Any update on this @sharjeel-jan? i seem to have a simular issue

[guillaume-chervet]

hi @sharjeel-jan, did you solve your problem?

[hodorsoft]

It seems that @sharjeel-jan is using Azure AD or similar as an IDP. You might wanna ensure that the redirect uris configured for your frontends client id have been configured as a "spa" instead of "web" app.

https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2338#issuecomment-698515769