Creating a multitenant Azure app - MsalUiRequiredException

Question

A little background:

I have a React SPA connected to a C# Dotnet Server. I am using OAuth with AzureAD as an identity platform.

I am creating an application that can be logged in by anyone with either an Organisation, Microsoft or personal account.

There are no restrictions in the tenant. I have enabled access for all users.

Permissions wise I have made sure all permissions don't require admin consent to allow all users including personal user (e.g [email protected]) to sign in.

I have setup the react code to use MSAL to login & generate the token to be used in my API calls. Here is my authConfig.js file:

authConfig.js

NOTE: I am able to successfully login using the tenant admin account. This doesn't cause the error. However, using a newly created outlook account I will get a consent to accept and after that the error still occurs.

THE PROBLEM:

After signing in and fetching the token which are done successfully, when trying to use the token in the authorization header in my API calls it seems to 500 error. Looking at the server console it spits this error message out:

500 Error upon trying to use the generated MSAL token

Has anyone got a clue how to resolve this?