Localize email verification message

According to documentation it’s possible to localize email verification message sent to the newly registered users. Due to the bug reported here Access user language user_metadata.lang in email template the language value is empty.

Is there any progress on this? Is there any workaround?

Hi @tomrozb,

Welcome to the Community!

I’m not actually sure this is a bug, but rather a confusing doc. This is saying you could use a variable stored in user_metadata to configure language, not that there is one stored automatically. Here is the doc that states that you could store language preference in user_metadata.

This obviously isn’t clear and I will put a request in to update the doc.

As far as a solution goes, how do you want to determine language? From the Accept-Language header, or from user-selected input in your app or login page?

Hey Dan, thanks for looking into it.

The language code is passed as a ui_locales parameter to login page, so the login page is properly localized (the “new” one).

I assume there should be a way to get back this parameter in email templates, but I didn’t find a way to achieve this.

I was able to set up a rule that grabs the ui_locales and sets it as the user_metadat.lang, but at this point in the pipeline the email template has already used the older user_metadata object with no language, so it won’t affect any emails going out on the first login cycle.

Are you users database users? Or do you have social/enterprise users as well?

I am going to post the rule as it could help for other emails (like password reset).

function(user, context, callback){
  // set metadata object
  user.user_metadata = user.user_metadata || {};
  
  // if lang exists for the user, skip rule
  if(user.user_metadata.lang){
    callback(null, user, context);
  }

  // set language variable to ui_locales or default to 'en'
  let preferedLanguage = context.request.query.ui_locales || 'en';

  // update the user_metadata that will be part of the response
  user.user_metadata.lang = preferedLanguage;

  // persist the user_metadata update
  auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
    .then(function(){
      callback(null, user, context);
    })
    .catch(function(err){
      callback(err);
    });
}

This actually works indeed for the 2nd and subsequent mails sent, that’s a progress :slight_smile:

Is there some other way to localize the first verification email sent to users? Seems that’s the missing piece to implement full localization of emails.

Thank you Dan!

I can reach out to some folks to see if there is a workaround for this. I’ll report back here with my findings.

EDIT: before I do that, can you answer this question from my previous post:

Are you users database users? Or do you have social/enterprise users as well?

Users database + social (fb, apple, google). Does that change anything?

If you were only using DB users you could get away with doing this in a hook. Sounds like that isn’t the case, so you will need another solution. Let me look into it further and I will report back.

But as far as I understand the verification email is sent only to users who sign up with their email. There’s no verification email for apple/google/fb.

Could you please share the solution with a hook?

Sure, you will want to create a pre-registration hook like this:

/**
@param {object} user - The user being created
@param {string} user.tenant - Auth0 tenant name
@param {string} user.username - user name
@param {string} user.password - user's password
@param {string} user.email - email
@param {boolean} user.emailVerified - is e-mail verified?
@param {string} user.phoneNumber - phone number
@param {boolean} user.phoneNumberVerified - is phone number verified?
@param {object} context - Auth0 connection and other context info
@param {string} context.renderlanguage - language used by signup flow
@param {string} context.request.ip - ip address
@param {string} context.request.language - language of the client agent
@param {object} context.connection - information about the Auth0 connection
@param {object} context.connection.id - connection id
@param {object} context.connection.name - connection name
@param {object} context.connection.tenant - connection tenant
@param {object} context.webtask - webtask context
@param {function} cb - function (error, response)
*/
module.exports = function (user, context, cb) {
  var response = {};
  response.user = user;
  response.user.user_metadata = { lang: context.renderLanguage };
  cb(null, response);
};

The ui_locales param isn’t available directly in the hook. Instead, we use the renderLanguage of the login page. Whatever language the Universal Login page is rendered in will be set as user_metadata.lang.

1 Like

That’s perfect!

BTW is there a way to localize the webpage displayed after the e-mail address is confirmed? I mean the “Your email address was successfully verified” message? I’ve not found settings for this in web console.

I can’t find a way to do it. Let me reach out to the team.

Actually, before I do that. How are you creating users? I am redirected directly to my app, I don’t see the verification page.

The webpage is displayed once the email confirmation link is clicked on a computer (not in a mobile browser)

1 Like

Okay great. I reached out to the team on it.

Okay, we figured it out. You need to append a ui_locales param to the verification URL you set in the email template.

The email verification URL you have access to in the template has a fragment (#) at the end so you have to do some string manipulation to remove it.

Here is how I did it.

{% assign splitURL = url | split: '#' %}
{% assign languageURL = splitURL[0] | append: '&ui_locales=' | append: user.user_metadata.lang %}
<p><a href="{{ languageURL }}">Confirm my account</a></p>

The URL should look something like this:
https://example.auth0.com/u/email-verification?ticket=123456786897qwerwuiyoiu&ui_locales=es

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.