0

In an Angular project, I'm using the canActivate method in the routing to restrict access to a page. I'm using the popUp function from the @azure/msal-browser library to verify the user. When entering the page, the browser blocks the pop-up by default. Is there a way to get around this? I can not use redirects since the path is unique.

I have tried redirects, by saving the path in a localstorage, but when I enter the restricted page after signing in, it starts an infinite loop.

Here is the can activate method:

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isReturningFromLogout) {
      this.authService.isReturningFromLogout = false;
      return false;
    }
    return from(this.authService.init$).pipe(
      switchMap(() => this.authService.user$),
      map(user => {
        const isLoggedIn = !!user;

        if (isLoggedIn) {
          return true;
        } else {
          // Redirect to login page
          this.authService.setRedirectUrl(state.url);
          this.authService.login();
          return false;
        }
      })
    );
Jenath
  • 3
  • 3
  • what do you mean by "the browser blocks the pop-up by default" ? – Random Jun 23 '23 at 13:14
  • If a pop up is initiated without a user input, i.e. clicking a login button, the popup is blocked by the browser. In chrome the user must allow pop ups from the given domain, for it to appear. – Jenath Jun 24 '23 at 14:05
  • The browser can only complain against "alert", and links openned in a new tab/window. Why is your app doing this ? You may open a popin, or open the login page in the current page, using a redirectUrl callback. Browser can't block these. – Random Jun 25 '23 at 15:17

1 Answers1

0

I solved this by creating an alert stating that the user has to press the log in button. This way the user initiates the process and the pop-up can happen.

Jenath
  • 3
  • 3