Problem when trying to read Office365 calendar

Question

I am developing a web application that reads the Microsoft calendar of the user who has logged in, my problem is that with the @hotmail or @outlook accounts it reads them without problem but when using an @onmicrosoft account it appears that the account does not exist , when can I log in directly to the office365 website.

within the azure portal I have enabled being able to log in with: "Accounts in any organizational directory (any Microsoft ID tenant Sign in - multi-tenant) and personal Microsoft accounts (e.g. Skype, Xbox) The app or API can be used by anyone with a work or school account, or a personal Microsoft account. Office 365 subscribers are also included." as shown in the picture below.

and when trying to log in this appears:

translation: This Microsoft account does not exist. Please indicate another account or get a new one.

Entering the part of the code, this is the part that contains the permissions, authorizes the user and proceeds to read their calendar

my API delegated permissions are

User.Read - Login and read user profile

Calendars.Read - Read user calendars

Calendars.Read.Shared - Read shared and user calendars

This is my code:

1. Part that handles user login and validation:

    document.addEventListener('DOMContentLoaded', async function() {
        const msalConfig = {
            auth: {
                clientId: '...', 
                authority: 'https://login.microsoftonline.com/consumers', 
                redirectUri: 'http://localhost/calendario2/outlook.html' 
            }
        };
    
        const msalInstance = new msal.PublicClientApplication(msalConfig);
            
        const loginRequest = {
            scopes: ["User.Read", "Calendars.Read", "Calendars.Read.Shared"]
        };
    
        try {
            await msalInstance.loginRedirect(loginRequest);
        } catch (error) {
            console.error('Error during authentication:', error);
        }
    
        msalInstance.handleRedirectPromise().then(async function(response) {
            if (response !== null && response.account !== null) {
                // Get calendar events
                const events = await getCalendarEvents(response.accessToken);
                // Render the calendar with the events obtained
                renderCalendar(events);
            } else {
                console.error('No user account provided.');
            }
        });
    });

and in case someone needs it

2. Part that is responsible for reading the calendar:

async function getCalendarEvents(accessToken) {
    const response = await fetch('https://graph.microsoft.com/v1.0/me/events', {
        headers: {
            'Authorization': `Bearer ${accessToken}`
        }
    });

    if (!response.ok) {
        throw new Error('Error getting calendar events');
    }

    const data = await response.json();
    return data.value.map(event => ({
        title: event.subject,
        start: event.start.dateTime,
        end: event.end.dateTime,
        allDay: event.isAllDay
    }));
}

function renderCalendar(events) {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        // Calendar settings
    });
    calendar.render();
}

I don't know if the error could be because to use Office365 accounts you would need another type of authorization or delegated/Application permissions

Thanks a lot!

Answer 1

The error occurred as you are using /consumers as authority that only allows Microsoft accounts (@hotmail or @outlook) to sign in.

I registered one multi-tenant application by choosing "Supported account type" as below:

Now, I added API permissions of Delegated type and granted consent to them:

When you run the code with authority as /consumers and try to login with local accounts having suffix as onmicrosoft.com, it gives error like this:

Change your authority to https://login.microsoftonline.com/common/ that allows users to sign in with both personal accounts and local accounts having suffix as onmicrosoft.com.

To resolve the error, modify this part of code by changing authority parameter value in msalConfig:

 document.addEventListener('DOMContentLoaded', async function() {
        const msalConfig = {
            auth: {
                clientId: 'appId', 
                authority: 'https://login.microsoftonline.com/common', //Make sure to use "common"
                redirectUri: 'http://localhost/calendario2/outlook.html' 
            }
        };
    
        const msalInstance = new msal.PublicClientApplication(msalConfig);
            
        const loginRequest = {
            scopes: ["User.Read", "Calendars.Read", "Calendars.Read.Shared"]
        };   

Reference: Client application configuration (MSAL) - Microsoft identity platform