Handling many Azure B2C configuration runtime with MSAL.js

Question

Hello,

I'm developing a React application that will run inside a Docker container and I'll deploy this application with many customers, each of them with a different Azure B2C tenant.

This implies that I should write the needed configuration (such as client_id, tenant_id, redirect_id) differently from each deployment. Is there a way to handle this at runtime, without the need of building again and again the application?

Thanks in advice

Answer

Hi @Alessandro Bacci ,

Thanks for reaching out.

Yes, you can handle this at runtime by using environment variables. You can define environment variables for each customer's configuration and then read them in your React application.

To set environment variables in a Docker container, you can use the -e flag when running the docker run command.

docker run -e client_id=xxxx -e tenant_id=yyy my-react-app

In your React application, you can read environment variables using the process.env object**.**

const config = {
  client_id: process.env.client_id ||xxxx,
  tenant_id: process.env.tenant_id ||yyy,
  redirect_uri: process.env.redirect_uri,
};

By providing different environment variables for each deployment, you can customize the Azure B2C configuration without rebuilding the application.

Reference: https://video2.skills-academy.com/en-us/azure/container-instances/container-instances-environment-variables

Hope this will help.

Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.

Share via

Handling many Azure B2C configuration runtime with MSAL.js

1 answer