How to set up the prompt = 'select_account'

[ismail1971]

Library

• msal@1.x.x or @azure/msal@1.x.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.x.x
• @azure/msal-angularjs@1.x.x

Description

Would you please let me know how to configure the prompt = 'select_account' in msal 2.0

Source

• Internal (Microsoft)
• Customer request

[tnorling]

@ismail1971 You can find our request/response docs here

When you call an API such as loginPopup you can provide prompt in the request object like so:

loginPopup({ 
    scopes: ["User.Read"],
    prompt: "select_account" 
});

[ismail1971]

I have the code like this and using :
login() {
if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
this.authService
.loginPopup({ ...this.msalGuardConfig.authRequest })
.subscribe(() => this.checkoutAccount());
} else {

  this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest });
}

}
How can I setup the prompt this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest });
this is in app module:

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return { interactionType: InteractionType.Redirect };
}

[tnorling]

@ismail1971

this.authService.loginRedirect({
     ...this.msalGuardConfig.authRequest,
     prompt: "select_account"
});

[ismail1971]

@tnorling Sorry, it's not prompting for login selection rather use the last logged-in user and signed it with it. I am using the code sample microsoft-authentication-library-for-js/samples/msal-angular-v2-samples/angular10-sample-app/

[ismail1971]

@tnorling
Here is the error I am getting with your suggestion:
ERROR Error: Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
at BrowserAuthError.AuthError [as constructor] (index.es.js:503)
at new BrowserAuthError (index.es.js:6627)
at Function.push.u8tD.BrowserAuthError.createInteractionInProgressError (index.es.js:6670)
at PublicClientApplication.push.u8tD.ClientApplication.preflightInteractiveRequest (index.es.js:9843)
at PublicClientApplication. (index.es.js:9286)
at step (index.es.js:74)
at Object.next (index.es.js:55)
at index.es.js:48
at new ZoneAwarePromise (zone-evergreen.js:960)
at __awaiter (index.es.js:44)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:705
at step (index.es.js:47)
at index.es.js:48
at new ZoneAwarePromise (zone-evergreen.js:960)
at __awaiter (index.es.js:44)
at PublicClientApplication.push.u8tD.PublicClientApplication.loginRedirect (index.es.js:10051)
at MsalService.loginRedirect (azure-msal-angular.js:50)
at AppComponent.login (app.component.ts:104)

[tnorling]

@ismail1971 Can you share the steps you took that resulted in receiving that error?

[ismail1971]

The prompt set works fine from the login function as you suggested, but if I have MsalGuard to a route,
it will not prompting for the account selection. The following route

{ path: 'profile',   component: ProfileComponent,   canActivate: [  MsalGuard ]}

will auto sign in without the prompt.

Is there a way to set the prompt at the time of configuring the MSALGuardConfigFactory() in app.module.ts:

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return { interactionType: InteractionType.Redirect };
}

@tnorling, I am investigating my code for the error. Maybe I have a bug.

[ismail1971]

@tnorling I also try to create a AuthGuard like this:

import { Component, OnInit, Inject, OnDestroy, Injectable } from '@angular/core';
import {  CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Route, UrlSegment} from '@angular/router';
import { Observable } from 'rxjs';

import { MsalService,  MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: MsalService,  
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
  ) {}

  canActivate(    next: ActivatedRouteSnapshot,    state: RouterStateSnapshot  ):    | Observable<boolean | UrlTree>    | Promise<boolean | UrlTree>    | boolean    | UrlTree {
    return this.checkLoggedIn();
  }
  canLoad(route: Route, segments: UrlSegment[]): boolean {
        return this.checkLoggedIn();
  }

  checkLoggedIn(): boolean {
    if (this.authService.instance.getAllAccounts().length > 0) {   return true; }  
   else{    this.authService.loginRedirect({...this.msalGuardConfig.authRequest,  prompt: "select_account"});   }
    return false;
  }
}

And the following routes will give the error I have mentioned earlier :

const routes: Routes = [
  {    path: 'profile', component: ProfileComponent, canActivate: [ AuthGuard ]  },
  {    path: 'code',  component: HomeComponent,   canActivate: [ AuthGuard  ] },
  {    path: '',    component: HomeComponent,    canActivate: [  AuthGuard  ]  }
];

Thanks for your help.

[tnorling]

@ismail1971 You can include a request object on the MsalGuardConfiguration like so:

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
    return { interactionType: InteractionType.Redirect,
             authRequest: {prompt: "select_account"} 
    };
}

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[ismail1971]

After adding the authRequest: {prompt: "select_account"} I am getting complie error.

Error: src/app/app.module.ts:64:12 - error TS2322: Type '{ prompt: string; }' is not assignable to type 'PopupRequest | Pick<RedirectRequest, "prompt" | "state" | "scopes" | "authority" | "correlationId" | "claims" | "resourceRequestMethod" | "resourceRequestUri" | ... 9 more ... | "onRedirectNavigate">'.
Property 'scopes' is missing in type '{ prompt: string; }' but required in type 'Pick<RedirectRequest, "prompt" | "state" | "scopes" | "authority" | "correlationId" | "claims" | "resourceRequestMethod" | "resourceRequestUri" | "authenticationScheme" | ... 8 more ... | "onRedirectNavigate">'.

64 authRequest: {prompt: "select_account"}
~~~~~~~~~~~

node_modules/@azure/msal-browser/dist/src/request/RedirectRequest.d.ts:27:5
27 scopes: Array;
~~~~~~
'scopes' is declared here.
node_modules/@azure/msal-angular/msal.guard.config.d.ts:4:5
4 authRequest?: PopupRequest | Omit<RedirectRequest, "redirectStartPage">;
~~~~~~~~~~~
The expected type comes from property 'authRequest' which is declared here on type 'MsalGuardConfiguration'

[tnorling]

@ismail1971 Can you include a scopes parameter on your request? Alternatively you can add // @ts-ignore the line above to ignore this error. We'll update msal-angular to not require scopes in the guard and interceptor.

[ismail1971]

@tnorling @jasonnutter Do you have a newer version of the msal-angular? I have "@azure/msal-angular": "^2.0.0-alpha.1". Thanks

[jasonnutter]

@ismail1971 Not yet, the change to not require scopes was just merged and has not been released.

[ismail1971]

@jasonnutter Thanks. // @ts-ignore works.

[github-actions]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.