Azure B2C - Adding a Language Selector to Html Template - How to pass chosen language to application

Question

We are using Azure B2C custom policies. We implemented a language selector on the sign in screen by adding it to the our custom html template. This works fine in B2C but once the user is logged in, we want the selected language to be passed to our application.

We tried appending the language (i.e. ui_locales=ja) to the redirect_uri but B2C throws an error. We also tried using the state parameter but no luck.

Below is our javascript in the Html Template:

            function redirectWithLanguage(language){
                const url = new URL(window.location);
                let state = url.searchParams.get("state");
                state = encodeURIComponent('&ui_locales=' + language);

                url.searchParams.set("state", state);
                url.searchParams.set("ui_locales", language);

                window.location = url;
            }

Answer 1

As alternative way, you can define the language as an output claim in your custom policy, after which it will be encoded in a JWT token. Then your application will be able get the language value from the JWT token returned by Azure B2C.

Answer 2

I found a workaround. Instead of adding the ui_locales and redirecting to the current sign in page (window.location), I redirect to the referer (document.referer)

Answer 3

You can achieve this in a custom policy via localization: Localization in Azure B2C

Do this for all flows in your B2C implementation. No JS is necessary.