CODEWITHSUNDEEP
reactjsazure-active-directoryasp.net-core-webapiazure-ad-b2cazure-ad-msal
Andrew.Stack.Overflow
Andrew.Stack.Overflow

Reputation: 61

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

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:

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

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

  1. Startup ConfigureServices

services.AddMicrosoftIdentityWebApiAuthentication(Configuration, "AzureAdB2C");

  1. 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):

  1. 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>
  1. App.tsx
  useEffect(() => {
    if (error) {
        login(InteractionType.Popup);
    }
  }, [error, login]);
  1. 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]);

Upvotes: 4

Views: 6351

Answers (2)

Andrew.Stack.Overflow
Andrew.Stack.Overflow

Reputation: 61

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);

Upvotes: 2

unknown
unknown

Reputation: 7483

The documents that you referred are all about Azure AD, but not Azure AD B2C.

We use react-azure-adb2c library to use ReactJS with Azure AD B2C. You could follow this blog, and it shows you the steps and sample code.

Upvotes: 1

Related Questions