jo-arroyo
commented
3 years ago @LexLuengas Are you able to provide the code you are using in your app.component.ts? Also, are you using the MsalRedirectComponent?
Closed LexLuengas closed 3 years ago
jo-arroyo
commented
3 years ago @LexLuengas Are you able to provide the code you are using in your app.component.ts? Also, are you using the MsalRedirectComponent?
LexLuengas
commented
3 years ago @jo-arroyo I am not using the MsalRedirectComponent.
app.component.ts
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
import { MsalBroadcastService, MsalGuardConfiguration, MsalService } from '@azure/msal-angular';
import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
import { EventMessage, EventType } from '@azure/msal-browser';
import { Subject } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
appIsReady = false;
isIframe = false;
loggedIn = false;
private readonly isDestroyed$ = new Subject<void>();
constructor(
private authService: MsalService,
private msalBroadcastService: MsalBroadcastService,
) { }
ngOnInit() {
this.isIframe = window !== window.parent && !window.opener;
this.appIsReady = true;
this.checkAccount();
this.authService.handleRedirectObservable().subscribe({
next: (result) => {
debugger;
},
error: (error) => {
debugger;
},
});
this.msalBroadcastService.msalSubject$
.pipe(
filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS || msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS || msg.eventType === EventType.SSO_SILENT_SUCCESS || msg.eventType === EventType.HANDLE_REDIRECT_END),
takeUntil(this.isDestroyed$),
)
.subscribe((result) => {
this.checkAccount();
});
}
checkAccount() {
this.loggedIn = this.authService.instance.getAllAccounts().length > 0;
}
ngOnDestroy(): void {
this.isDestroyed$.next(undefined);
this.isDestroyed$.complete();
}
}app.component.html
<div class="app">
<ng-container *ngIf="appIsReady && loggedIn; else loadingSpinner">
<div class="app__body">
<router-outlet *ngIf="!isIframe"></router-outlet>
</div>
</ng-container>
<router-outlet name="error-page" *ngIf="!isIframe"></router-outlet>
<!-- Page-covering loading spinner shown when app is initializing -->
<ng-template #loadingSpinner>
<loading-spinner
size="large"
text="Initializing application..."
></loading-spinner>
</ng-template>
</div>@LexLuengas We do not recommend calling handleRedirectObservable() in the app.component.ts, as this does seem to cause looping. Please see our redirect doc for our guidance for redirects, both with and without the MsalRedirectComponent.
LexLuengas
commented
3 years ago Thanks. In the meantime I have cleared my app‘s localStorage, so I cannot reproduce the issue anymore. I have preemptively switched to the MsalRedirectComponent pattern as you pointed out. I will report back or create a new issue if the redirection problem reappears.
tnorling
commented
3 years ago Closing as this appears to have been solved. Please open a new issue if you continue to experience issues, thanks!
Library
msal@1.x.xor@azure/msal@1.x.x@azure/msal-browser@2.x.x@azure/msal-node@1.x.x@azure/msal-react@1.x.x@azure/msal-angular@0.x.x@azure/msal-angular@1.x.x@azure/msal-angular@2.0.0-beta.0@azure/msal-angularjs@1.x.xFramework
Description
When a token request fails due to an "invalid_grant" error, the Angular app enters an infinite redirect loop and does not recover.
As a workaround, deleting the site's browser data allows for a successful token request, until the next "invalid_grant" error happens.
Error Message
After initialization, the app will try to make its first service call and request a token. This will fail and cause a redirect to "/", after which it will retry, failing again and entering a redirection loop. Below is the console log which includes MSAL logs. The part between "[Loop start]" and "[Loop end]" repeats indefinitely.
The token request gives this 400 response:
MSAL Configuration
Reproduction steps
Expected behavior
The MSAL interceptor will eventually acquire a valid token.
Identity Provider
Browsers/Environment
Regression
Security
Source