Currently, I have an Angular web application that utilizes the @microsoft/microsoft-graph-client to fetch the logged-in user's details. The user is signed in using @azure/msal-angular. In order to log the user in, I have an authentication service that includes the following code:
async signIn(): Promise<void> {
const result = await this.msalService.loginPopup(OAuthSettings.consentScopes)
.catch((reason) => {
this.alertsService.add('Login failed', JSON.stringify(reason, null, 2));
});
if (result) {
this.authenticated = true;
await this.getUser();
}
}
private async getClient(): Promise<Client> {
const graphClient = Client.init({
// Initialize the Graph client with an auth
// provider that requests the token from the
// auth service
authProvider: async (done) => {
const token = await this.getAccessToken()
.catch((reason) => {
done(reason, null);
});
if (token) {
done(null, token);
} else {
done('Could not get an access token', null);
}
}
});
return graphClient;
}
private async getUser() {
if (!this.authenticated) {
return null;
}
const graphClient = await this.getClient();
// Get the user from Graph (GET /me)
const graphUser = await graphClient.api('/me').get();
console.log('USERNAME: ', graphUser.displayName);
sessionStorage.setItem('d365dataportal.user', graphUser);
if (graphUser.mail != null) {
sessionStorage.setItem('d365dataportal.user.email', graphUser.mail);
} else {
sessionStorage.setItem('d365dataportal.user.email', graphUser.userPrincipalName);
}
sessionStorage.setItem('d365dataportal.user.avatar', graphUser.avatar);
sessionStorage.setItem('d365dataportal.user.name', graphUser.displayName);
}
This is how my OAuthSettings are defined:
export const OAuthSettings = {
appId: 'App GUID from Azure Here',
redirectUri: 'http://localhost:4200',
consentScopes: ['user.read',
'Directory.Read.All',
'Directory.ReadWrite.All',
'Directory.AccessAsUser.All']
};
The issue I am encountering is related to the application hanging when this.msalService.loginPopup() is triggered. The popup window remains open indefinitely and fails to authenticate or redirect back to my page. I am uncertain as to why this is transpiring. Any assistance in pinpointing any potential errors would be greatly appreciated.
UPDATE
The previous details were retained as my original inquiry. Upon further investigation, I have determined that the problem is unrelated to the initial query. Therefore, I have updated the title of my question.