Issues using Azure Active Directory (ADAL) with Aurelia - azure-active-directory

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.

Answer 2

I don't have much experience with Aurelia, but here are the steps I took to make it work at least partially.
Hopefully you can get it working fully :)
First, I enabled verbose logging for ADAL.JS in sessionState.ts:
constructor(aureliaConfiguration, sessionState) {
this.aureliaConfiguration = aureliaConfiguration;
if (!this.authContext) {
this.authContext = new AuthenticationContext(
{
cacheLocation: "localStorage",
clientId: this.aureliaConfiguration.get('azureADApplicationId'),
tenant: this.aureliaConfiguration.get('azureADTenant'),
postLogoutRedirectUri: window.location.origin
}
);
Logging = {
level: 3,
log: (msg) => console.log(msg)
}
}
this.appName = this.aureliaConfiguration.get('name');
this.appApiKey = this.aureliaConfiguration.get('api.key');
}
Then I found ADAL giving an error about invalid state.
I noticed the URL was not really what it should be.
Usually the Id token is in a fragment, e.g. #id_token=asdasdasdas....
Of course this is just the framework's feature of showing pretty client-side routes.
Turns out there is a way to tell Aurelia not to modify URLs with hashes, while still using the normal routing links:
configureRouter(config: RouterConfiguration, router: Router): void {
this.sessionState.router = router;
config.title = 'Aurelia';
config.options.root = '/';
config.options.pushState = true;
config.options.hashChange = false;
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'resources/views/home/home', nav: true, title: "Home" },
{ route: ['reports'], name: 'reports', moduleId: 'resources/views/reports/reports', nav: true, title: "Reports", settings: { auth: true } }
]);
config.addAuthorizeStep(AuthorizeStep);
}
I added one line there: config.options.hashChange = false;.
After doing that, ADAL logged a successful authentication.
But I did say the solution was partial.
The login button still says "Log in".
After a page refresh it does change to "Log out", but that is one thing that needs to be fixed.
Also, clicking on "reports" does cause a redirect to AAD, but it specifies the redirect URL as http://localhost:9000/reports.
The problem is that we would need to configure every single client-side route as a reply URL for this to work.
So instead of using the full URL, you will need to use just the domain in authorizeStep.ts:
if (!user) {
this.sessionState.authContext.config.redirectUri = window.location.origin;
this.sessionState.authContext.login();
}