Get logged user's language before loading home

help
1

I’m translating my page using TAPi18n library.

When the user is already logged in (ie: refreshes the browser), the app serves the page, and then it is auto-logged. Accounts.onLogin is then fired, and I can change the language.

Is there any way to log the user, and then serve the whole page? I would like to serve the static content, specially the pictures, based on that language.

Any help on this? Thanks in advance

2

The only way to detect the user’s language on the client is by detecting browser language and system’s language and user agent. It is not reliable, since users can manipulate these values but most of the users won’t.

If the user has once logged in you can use a field from the user’s colleciton

1 Like
3

On the client:

/**
 * Gets the browser languages.  navigator.languages or, if empty, [navigator.language]
 * @result {Array} array of strings with language codes, e.g. ["en", "de"], in precedence order.
 * @see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
 * @see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language
 */
export const getNavigatorLanguages = () => {
  if (Meteor.isServer) return;
  const navigatorLanguages = _.get(window, "navigator.languages");
  const languages = !_.isEmpty(navigatorLanguages) ? navigatorLanguages : [_.get(window, "navigator.language")];
  const result = languages.map(lang => lang.split('-')[0] );
  return _.uniq(result);
}

The array is sorted in order of relevance, with the first language code being the user’s “main” language, typically the browser’s installation language. You don’t need the user to be logged in for this, as this information is available to you immediately as the client starts. You can then invoke…

TAPi18n.setLanguage(language)

…with the most relevant language code, i.e. the one that

  • the user speaks, and
  • you have a translation for
  • …otherwise your default app language.

(edit: typo fixed)

1 Like