Deep linking to dynamic url

[ravibha]

Hi, I have setup authentication for my react app with react-adal. However, if a user directly goes to a page other than what's set in reply urls, I get the following message: AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application.

Is there a way to solve this issue using react-adal? Please note, I cannot add each url of the website to the reply url list, since these can be dynamic. Ex: https://localhost/orders/1, https://localhost/orders/2 etc.

Thanks -Ravi

[salvoravida]

how hve you configured reply url?

[ravibha]

The reply url is set in the Azure AD app that we use for authentication. I believe we cannot specify wildcards in the reply urls such as https://localhost/*. And I cannot have https://localhost/orders/1, https://localhost/orders/2 etc. there since these are dynamic.

[Abe-Froman]

We're having the same issue, let's call it on Application A, using 0.4.24. Another of our applications, Application B, is using 0.4.18 and does not have this issue. I haven't yet tried downgrading App A to 0.4.18 nor have I tried the latest 0.5.0 release. As far as I can tell, App A & B are configured the same in AAD though A is hosted in AKS and B is hosted in an App Service.

I'll try both 0.4.18 and 0.5.0 in App A to see if either resolves the issue but if there is a known issue with 0.4.24 it would be great to get confirmation.

[Abe-Froman]

Neither downgrading to 0.4.18 nor upgrading to 0.5.0 resolved this issue for me. =(

[Abe-Froman]

I've solved it for our case. The solution was to provide a redirectUri value in adalConfig which points to the root of our application. For example:

export const adalConfig: AdalConfig = {
  tenant: <tenant_id>,
  clientId: <client_id>,
  endpoints: {
    api: <client_id>
  },
  cacheLocation: 'localStorage',
  redirectUri: https://<my_app_root> // <-- added this
}

[mazer-rakham]

Just a little FYI if you used create-react-app you can write your code as follows

import { AuthenticationContext, adalFetch, withAdalLogin } from "react-adal";

let redirecttionURI;
process.env.NODE_ENV === "production"
  ? (redirecttionURI = "https://your-production-site-here/")
  : process.env.NODE_ENV === "test"
  ? (redirecttionURI = "https://your-staging-site-here/")
  : redirecttionURI = "http://localhost:xxxx/";

export const adalConfig = {
  tenant: "xxxxxxxxxxxxxxxxxxxxxxx",
  clientId: "xxxxxxxxxxxxxxxxxxxx",
  endpoints: {
    api: "https://graph.microsoft.com"
  },
  cacheLocation: "localStorage",
  redirectUri: redirecttionURI
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(
  authContext,
  adalConfig.endpoints.api
);