How to implement Azure B2C for an Angular Website hosted across multiple URIs

Question

We are trying to develop a new (Angular) website that uses Azure B2C for authentication. This website will connect to a .NET API.

The problem is that this website (single code base) will be hosted on more than 250 different URIs (each client has a unique URI). It is not feasible or possible to add all these different URIs as Redirect URIs on the Azure B2C app.

We have tried looking into things like implementing BFF (Backend for Front End Pattern), Server Side Rendering the website, and looked at the tonnes of Microsoft examples. However, we have no idea how to get around the need for Azure Redirect URIs, in a safe, secure way.

We toyed with the idea of creating a "proxy" layer (website?/api?) that would be the Azure Redirect URI for all websites, where it would then maybe pass the Access Token to the calling front end so it can add it to its HTTP header (bearer token) when calling the API. But there may be many issues with that idea, e.g. security, load balancing, 1 user belonging to multiple sites etc.

If there is anyone with any ideas to try or helpful links I should look up, that would be helpful.

Answer 1

• An angular website can surely be hosted across multiple URIs when you use ‘Webpack’ internally to construct the build that is surely customizable as it is possible to extend the webpack configuration with something called ‘Angular CLI builders’. Thus, considering that all the URIs on which you must host your website have different themes and a particular feature that is shared across all the sites. The minimum configuration for each site is considered as the requirement of a theme in particular, a domain/URI, list of all features and fetching some common domain-specific properties.

For the above purpose of fetching the required details from the API, the query should be as below: - ‘GET /configuration?domain=www.xyz.com’ and its response can be different based on the “domain” parameter you pass in the configuration as below: -

Response: -

 {
     "theme": "dark",
     "domain": {
     "uri": "www.xyz.com",
     "phone": 1234567890,
     "support": "[email protected]"
 },
     "features": [
     "dashboard",
     "profile",
     "subscription"
   ]
 }

• Thus, once retrieved, then store all the properties in an Angular state such that they are available across modules which can be achieved through ‘NGRX Entity’ which is a reactive state management tool for Angular. NGRX Entity is used to store a collection (mainly JavaScript objects) and is highly recommended when you want to share the data across modules / components. For more details regarding the configuration of themes from API configuration, kindly refer to the detailed multi-site setup as described in the below documentation link: -

https://medium.com/cactus-techblog/multi-site-architecture-in-angular-993a1984a539

Also, would suggest you to please try to build the website with reference to the other URIs as below: -

ng build --prod --base-href "/abc1/"

 ng build --prod --base-href "/abc2/" ‘

For more information, kindly refer to the below community forum link: -

How to run one angular app with two urls?