Cannot get access token in React app accessing protected .NET Core API with Azure B2C

Question

I'm having issues getting an access token from my React app, trying to access my own .NET Core 3.1 web API. I'm able to login fine and can access the user data, but when I try to get an access token, I get the below error continuously. Would appreciate any help or push in the right direction. Thank you!

Uncaught (in promise) BrowserAuthError: silent_sso_error: Silent SSO could not be completed - insufficient information was provided. Please provide either a loginHint or sid.

Here's what I have:

Set up React app registration (SPA w/ redirect to localhost:3000 using auth code flow)
Set up .NET Core web api app registration (Web w/ redirect to localhost:44347)
Created two scopes for the web api (read and write)
Gave api permission to the spa to the web api scopes

.NET Core 3.1 Web API setup (ref: https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-app-configuration):

Startup ConfigureServices

services.AddMicrosoftIdentityWebApiAuthentication(Configuration, "AzureAdB2C");

appsettings.json

    "AzureAdB2C": {
       "Instance": "https://{example}.b2clogin.com",
       "ClientId": "{web api Client ID}",
       "TenantId": "xxxxxxxxxxxx",
       "Audience": "https://{example}.onmicrosoft.com/api"
    }

React set up using "@azure/msal-browser": "^2.7.0" and "@azure/msal-react": "^1.0.0-alpha.0" (ref: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react):

index.tsx

const configuration: Configuration = {
  auth: {
      clientId: '{SPA Client ID}',
      authority: 'https://{example}.b2clogin.com/{example}.onmicrosoft.com/B2C_1_SignUpIn',
      knownAuthorities: ['{example}.b2clogin.com'],
  },
  cache: {
      cacheLocation: 'localStorage', // This configures where your cache will be stored
      storeAuthStateInCookie: false // Set this to "true" to save cache in cookies
  }
};

const pca = new PublicClientApplication(configuration);

<MsalProvider instance={pca}>
   <App />
</MsalProvider>

App.tsx

  useEffect(() => {
    if (error) {
        login(InteractionType.Popup);
    }
  }, [error, login]);

Accessing the token code

const { instance, accounts, inProgress } = useMsal();

useEffect(() => {
        if (inProgress === 'none' && accounts.length > 0) {
            const request = {
                account: accounts[0],
                scopes: ["https://{example}.onmicrosoft.com/api/scope.read"]
            };
            // Retrieve an access token
            instance.acquireTokenSilent(request)
                .then(response => {
                    console.log('response', response);
                    if (response.accessToken) {
                        console.log('accessToken', response.accessToken);
                        return response.accessToken;
                    }
                    return null;
                })
                .catch(error => console.log('token error', error));
        }
    }, [inProgress, accounts, instance]);

Andrew.Stack.Overflow Andrew.Stack.Overflow · Accepted Answer · 2020-12-08T13:40:36

For anyone who is having a similar issue, the work around is to pass in the login request with scopes in the initial login. In my case, I'm using useMsalAuthentication() hook to log in. You can follow the thread here, https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2702.

export const loginRequest = {
    scopes: [ "openid", "https://{example}.onmicrosoft.com/api/scope.read" ]
}

const {login, error} = useMsalAuthentication(InteractionType.Redirect, loginRequest);

Cannot get access token in React app accessing protected .NET Core API with Azure B2C

2 Answers