Angular-auth-oidc-client: Support browser refresh for multiple tab

[eastjie]

I have tried some code in this example with PCKE, https://github.com/damienbod/AzureAD-Auth-MyUI-with-MyAPI.
My example commit code

1. Add a new component;
2. Add a AuthLoginGuard to the protected component.

Although it is SPA but it is the requirement in practise, if client open the app in another tab, oder even Shift-Click in the new browser instance, the app should work without re-login.

If I use code, it works.

openProtectTab(){
    const url = this.router.serializeUrl(
      this.router.createUrlTree(['/protected'])
    );

    window.open(url, '_blank');
  }

but if I copied url in the second tab,

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.oidcSecurityService.isAuthenticated$.pipe(
      map((isAuthorized: boolean) => {

        if (isAuthorized) {
          return true;
        }
        this.oidcSecurityService.authorize();
        return false;
      })
    );
  }

It returns false, and this.oidcSecurityService.authorize(); should be called to authenticate again.
After "authorize()" is "nonces" changed. I have searched some issue, https://github.com/damienbod/angular-auth-oidc-client/pull/305. It seems to be similar problem but created 2 years ago.
We haven't use AutoLoginGuard, because some other code is required in "canActivate" and can't be added in AutoLoginGuard.

Thanks very much.

[eastjie]

I think I have found my problem. In "customParams" promt, when nothing is set and url is opened in second tab by copy/paste. The callback url with "?code=...." will be consumed automatically and redirected to protected url. The code and token is newly, but it is "silent". It doesn't use same credential toke between tabs but looks like Single SignOn in same browser :) I have tested in chrome. It works well, whether I open it in second tab or second Chrome instance.

https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow

export function configureAuth(oidcConfigService: OidcConfigService) {
  return () =>
  oidcConfigService.withConfig({
    ...
   logLevel: LogLevel.None
  // customParams: {
    //   prompt: 'select_account', // login, consent
    // },
    });
}

Thanks all the same.

Best regards
Jie