How to embed login control in custom page when using Azure B2C login

Question

I am working with Azure AD B2C sample and for testing purpose I am using a slightly modified Single page app sample. I also have an Azure B2C & a Test api (as an Azure Function) created. Test API & Single Page app are registered as proper application in the Azure B2C & the setup is working properly.

The scenario is user login in the Azure B2C, gets the token & the use the token to call Azure function. The problem is the login page opens in a separate window with the B2C Url in the address bar. What I want is to have the login control embedded in the Single Page App.

I went through the documentation and found one can customize the login page (in User Flow Policies/Page Layout), but it seems it will still be a separate page, which I don't want. Another idea is to have the Single Page App send the login request to my own server as AJAX request and then that server performs the login on behalf of that user and then relay back the token to the Single Page App. But it seems a lot of hassle and an unnecessary indirection, which I want to avoid as much as possible.

Following is an screenshot of the scenario:

Answer 1

Currently, a single-page application can't embed the login experience because Azure AD B2C doesn't allow CORS or iframing, which means you are left with the following options:

1. A browser redirection
2. A browser popup
3. Posting the login credential through your own server to a resource owner password credentials (ROPC) policy

Differences between browser popup and redirection are described in https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token?tabs=javascript#choose-between-a-pop-up-or-redirect-experience