Obtain autorization code from `loginPopup` instead of token(s)

Core Library

MSAL.js v2 (@azure/msal-browser)

Wrapper Library

MSAL React (@azure/msal-react)

Public or Confidential Client?

Public

Description

loginPopup sends a request to /oauth2/token to obtain access_token and id_token immediately after obtaining authorization_code in its implementation. But I want to obtain authorization_code directly from my public client and redeem it for accesss_token in our server.

Source

External (Customer)

[derisen]

@okapies the problem is that you are requesting below an access token for Microsoft Graph, NOT for your own web API.

const loginRequest: PopupRequest = { scopes: [‘User.Read’, ‘openid’, ‘profile’, ‘email’], prompt: ‘select_account’, };

const handleLogin = (instance: PublicClientApplication) => { instance.loginPopup(loginRequest).then((value: AuthenticationResult) => { fetch( ‘https://api.example.com/login/microsoft’, // our login API { method: ‘POST’, body: { access_token: value.accessToken }, }, ).then((data: any) => { … }); }); }

Instead, the scope should be your web API’s APP ID URI followed by the scope name you defined in your application.

const loginRequest: PopupRequest = { scopes: [‘api://my-web-api-client-id/my_scope’], prompt: ‘select_account’, };

If you look at the app registration steps in the sample I’ve shared, it instructs you to create a custom scope for your API, and then request permissions to it in your SPA.

So to summarize the misunderstanding here, every access token is meant for a certain resource/API and cannot be used for accessing other resources/APIs. You tell MSAL what resource/API you need an access token for via the scopes property in the request object that you pass to acquireToken* method.

[okapies]

@derisen Thanks for your kind advice. I’ll look into the on-behalf-of flow!