CODEWITHSUNDEEP
angularazureazure-active-directory
Mohit Dhingra
Mohit Dhingra

Reputation: 11

Redirect/reply URLs with hash, Azure Active Directory

I want the navigate back to an Angular application after logging in through Azure AD.

The reply URL I want is: http://localhost:4200/#/authcallback

Is there a way to make Azure AD redirect URL with a hash?

Upvotes: 0

Views: 1729

Answers (2)

burgi
burgi

Reputation: 285

Since this issue was closed by Azure without resolution, I will write how I solved it.

We have a React application with RouterProvider, which means that in order to show specific component after the consent, a hash sign must be a part of the redirect URL.

But Azure doesn't support hash sign, so the only URL without '#' is the root URL of the application.

Solution: In my Home.tsx file, I changed the default redirection, so the user will be redirected to the relevant component if the request comes from Azure, based on the request params:

const Home = () => {
  const queryParams = new URLSearchParams(window.location.search);
  if (queryParams.get("admin_consent")) {
      return <Navigate to={AFTER_CONSENT_PATH} />;
  }
  return <Navigate to={DEFAULT_COMPONENT_PATH} />;
};

Upvotes: 0

unknown
unknown

Reputation: 7483

It is a known bug: https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/100

Even though you set the redirect URL with http://localhost:4200/#/authcallback, it will return https://localhost:4200/#access_token=xxxx.

You could upvote the feature request here, and there is a workaround in the comment.

Workaround - an endpoint that remembers the correct application link including the hash tag, redirecting itself to that correct link.

Upvotes: 1

Related Questions