Issues using Azure Active Directory (ADAL) with Aurelia

Question

I've added Azure Active Directory Library (ADAL) to an Aurelia CLI 0.31.3 project and I appear to be out of my element.

Here is my repository.

The issues that I'm running into are:

• Accessing the "Reports" page for the first time allows you to log in. When it returns from the Azure AD sign-in, the Aurelia app reloads twice.
• Clicking "Log In" when on the "Home" page allows you to log in. When it returns from the Azure AD sign-in, the URL contains "/token_id=XXXX" and the Aurelia router errors stating "Route not found".

Some notes on the project:

• There are only two views. "Home" does not require authentication. "Reports" does.
• ./src/app.ts , ./src/authorizeStep.ts , and ./src/sessionState.ts , should be the only places any authentication code exists.

Any insight as to how to resolve these would be greatly appreciated!

Answer 1

@juunas probably has a working solution, but my take on this would have been slightly different.

The error pretty much says it: "Route not found". Aurelia is trying to match "token_id" to a route while that value should probably be ignored after your AuthorizeStep used it.

It may suffice to simply add it to your home routes like so:

{ route: ['', 'home', 'token_id'], name: 'home',  moduleId: 'resources/views/home/home', nav: true, title: "Home" },

If it still doesn't match, you could add a wildcard as well: token_id*

That will solve the router error. You haven't mentioned whether the authentication itself works or not - if the router error was the only problem, this should do the trick.

EDIT

To follow up on my comment, as an alternative to using a separate view/viewmodel as a route you can also do this:

config.map({
  name: 'logInRedirectCallback',
  navigationStrategy: (instruction: NavigationInstruction) => {
    const token = instruction.getWildcardPath();
    // [...] do magic / pass the token to wherever it's needed

    instruction.router.navigateToRoute(""); // or any page that makes sense after logging in
  },
  route: 'token_id=*',
});

I have not tested this so you may need to tweak the exact place of that wildcard. This works under the assumption that token_id is matched as part of the path, not part of the query. But the general idea is to just intercept that token, process it however you need to and then go to some existing page.