Create a localized 2FA message

By making a few API calls you can create a localized version of your Hosted Login screens. For example, here's a version where all the screens are displayed in French:

If you’ve localized your Hosted Login screens it makes sense to localize your two-factor authentication (2FA) messages as well. That might sound daunting but, as it turns out, it’s no harder to create a French version of your 2FA messages than it is to update the English version of one of those messages.

As we’re about to see.

To illustrate how easy it is to localize your 2FA messages, let’s first use the /config/{appId}/flows/{flow}/2faMessages/{message} operation to return the text of the secondFactor message. The JSON response we get back looks like this:

{
    "sms": "{{site_name}}: Your secure access code is {{code}}.",
    "email": {
        "subject": "{{site_name}} One Time Code!",
        "textBody": "{{site_name}}: Your secure access code is {{code}}.",
        "htmlBody": "<p>{{site_name}}: Your secure access code is {{code}}.</p>"
    }
}

📘

To make this illustration easier to follow, we’ve condensed the default text a bit.

In the preceding example, don’t localize any of the property names (like sms or textBody) and don’t localize the JTL tags {{site_name}} or {{code}}. Suffice to say you’ll be disappointed in the results. assuming that your API call even completes.

With the English version of the secondFactor messages in hand, the next step is to translate the English text into French. With some help from Google Translate, we came up with the following:

{
    "sms": "{{site_name}}: Votre code d'accès sécurisé est {{code}}.",
    "email": {
        "subject": "{{site_name}} Code temporel",
        "textBody": "{{site_name}}: Votre code d'accès sécurisé est {{code}}.",
        "htmlBody": "<p>{{site_name}}: Votre code d'accès sécurisé est {{code}}.</p>"
    }
}

From here we then use the following PUT call to create a French version of the secondFactor message:

curl -L -X PUT   'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/flows/moreJTL
/locales/fr-FR/2faMessages/secondFactor' \
  -H 'Authorization: Basic eTR4Zmc2ZjQ0bXNhYzN2ZXBqanZ4Z2d6dnQzZTNzazk6OTVjY3hrN2N6Y
nZ1eng2ZHB0ZTVrOXA2ZGo1Ynpla3U=' \
  -H 'Content-Type: application/json' \
  -d '{
    "sms": "{{site_name}}: Votre code d'accès sécurisé est {{code}}.",
    "email": {
        "subject": "{{site_name}} Code temporel",
        "textBody": "{{site_name}}: Votre code d'accès sécurisé est {{code}}.",
        "htmlBody": "<p>{{site_name}}: Votre code d'accès sécurisé est {{code}}.</p>"
    }
}
'

Two things to note here. First, we used our translated message text as the JSON-formatted body parameter for the API call. You probably already figured that out for yourself, but we thought we should point it out, just in case.

Second, note that we set the locale to French (fr-FR):

'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/flows/moreJTL/locales/fr-FR/2faMessages/secondFactor' \

Needless to say, this is extremely important. Hosted Login doesn’t speak French or Russian or any other languages: it simply does what you tell it to do. If you forget to change the locale from en-US to fr-FR Hosted Login will dutifully replace your English message text with your French translation. Why? You got it: because you told it to use the en-US locale. 

Just something to keep in mind.

And here’s a nifty little feature. You say that your flow doesn’t have a fr-FR locale? That’s fine: the API automatically creates one for you. There’s no need to create a locale and then add the French version of secondFactor. Instead, just add the French version. If your flow doesn’t have a fr-FR locale the API creates one. 

If you log on now by using the fr-FR locale (something you can do by including ui_locales=fr-FR in your authorization request), you should see a French sign-in screen and a French two-factor authentication screen. In addition, your 2FA message should also be in French: