Azure B2C login: how to get access token in React SPA and without using the Azure login pop or login page?

I have a React SPA and I have a custom login page. Currently we are on a AWS and we use AWS Cognito to get access token.

Basically when the user first visit the website and when the front end code is loaded in his browser, it quickly judges that there is no access token. Therefore only the custom login page is rendered.

Then the user inputs his password and username, and then an access token and an ID token are returned from AWS Cognito. Here is the code:

import { Auth } from 'aws-amplify';

...

// login 
const user = await Auth.signIn(formData.username, formData.password);

Now since the tokens are present in the browser, the frontend code will render the user dashboard.

We are now trying to migrate to Azure. In the Azure B2C MSAL documentation, it introduces ways to login with the JavaScript SDK:

Sign-in
MSAL.js exposes 3 login APIs: loginPopup(), loginRedirect() and ssoSilent()

However, they have Azure-written pop-up window or redirect webpage. I do not want to use the Azure-written front end code, nor do I want to custom these given login pages.

I want to keep using my original custom written login page, and I just need an Azure API where I can provide the username and password and get the access and ID token, like in the use of AWS Cognito / AWS-Amplify.

How can I do that?

> You can make use of ROPC flow to sign in users just by entering username and password without involving any user interaction.
>
I registered one Azure AD B2C application and enabled "Allow public-client flows" like this:

Now, modify Application's Manifest by setting oauth2AllowImplicitFlow attribute to true like below:

I created one ROPC user flow in my B2C tenant like below:

I got the access token successfully via Postman using ROPC flow with below parameters:

POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token
username: admin@srimtb2c.onmicrosoft.com
password:xxxxxxx
grant_type:password
scope:openid e386646b-a4f8-42fb-aa0a-0xxxxxxxx offline_access
client_id:e386646b-a4f8-42fb-aa0a-0xxxxxxxxxxx

Response:

You can use above refresh token to renew tokens like below:

POST https://<b2ctenant_name>.b2clogin.com/b2ctenant.onmicrosoft.com/B2C_1_ROPC_Auth/oauth2/v2.0/token

grant_type:refresh_token
client_id:e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
resource:e386646b-a4f8-42fb-aa0a-0xxxxxxxxx
refresh_token: <refresh_token_from_above_step>

Response:

When I decoded above ID token in jwt.ms, I got below claims:

Note that, you can use ROPC flow only with local accounts. This won't work if you are authenticating with external identity providers. As this flow involves disclosing user's password, it is not secure to implement it in production.

Reference:

Set up a resource owner password credentials flow - Azure AD B2C | Microsoft