Add support for locale_behavior: "respect_accept_language"

[fenech]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Currently, it seems like this mode is not supported, since there are no references to the "accept-language" header in the library.

In fact, it is not the key: project.default_locale which is used (as the name would perhaps suggest), but the intl.locale config key

elements/packages/elements-react/src/context/provider.tsx

Line 83 in 795b1bd

locale={config.intl?.locale ?? "en"}

.

Describe your ideal solution

I would expect the behaviour of the default OryProvider to interpret the "accept-language" header in "respect_accept_language" mode, and use that as the default application language, unless otherwise overridden in the config object.

I imagine that this would entail adding another function to "utils" which parses the header and possibly cross-references it with the project.enabled_locales array from config. Once this approach is approved, I'd be happy to open a PR.

Workarounds or alternatives

I was looking at using window.navigator.language as an alternative but this would mean that the config object would need to be rendered client-side.

Version

main 795b1bd

Additional Context

No response

[jonas-jonas]

Hi, this setting is not used by elements-react at the moment. We expect the client to implement its own handling of localisation, because it depends on the client's requirements. E.g., extracting the locale from headers, cookies, paths, etc.

You can implement this fairly easily by passing the correct two-letter language code via the configuration. https://www.ory.com/docs/elements/guides/internationalization#detecting-a-users-locale

[fenech]

Hey, thanks for your response. Right, yeah I can see where it would need to be passed, but I had to do a bit of digging to get there, and was led astray by this "locale_behaviour" config flag existing, as well as this other part of the documentation https://www.ory.com/docs/elements/guides/configuration#locale-i18n.

I understand that the requirements may vary depending on the rest of the app but I would imagine that in those cases, "force_default" was used (in combination with a dynamic value passed to project.default_locale), whereas "respect_accept_language" sounds like it should be handled within the library.

Just to make sure I'm understanding what you're saying though: is the important point that it's not used by elements-react but it is used elsewhere, or that it is not yet used by this library?

[jonas-jonas]

Just to make sure I'm understanding what you're saying though: is the important point that it's not used by elements-react but it is used elsewhere, or that it is not yet used by this library?

Respect accept language is only used by the Account Experience to inject the correct translations. So it's not used by the library, and will not be.

[fenech]

In case it's useful to anyone else, I got this working using the following function:

import Negotiator from "negotiator";
import { headers } from "next/headers";

import { match } from "@formatjs/intl-localematcher";
import { OryClientConfiguration } from "@ory/elements-react";

export async function withLocale(
  config: OryClientConfiguration,
): Promise<OryClientConfiguration> {
  const h = await headers();

  let languages = new Negotiator({
    headers: { "accept-language": h.get("accept-language") ?? undefined },
  }).languages();

  const locale = match(
    languages,
    config.project.enabled_locales,
    config.project.default_locale,
  );

  return { ...config, intl: { ...config.intl, locale } };
}

Then in my pages I use const cfg = await withLocale(config); and pass cfg to the flow components (<Login> etc.)