How to translate my universal login? Angular

[Totodile]

Hello everyone.

I’m trying to make a prelogin, in order to let users to insert their mail and their language. Then, I send this information with QueryParams in order to pre-fill their mail and to translate the login…
Actually, the mail is working and being prefilled, but the language is not working (is always showing the english language)… I’ve been reading and I set up the tenant config in order to accept four different languages but none of them seems to be working…

Here is my code, where I’ve a pre-login view to insert mail and language, and send it:

login() {
    this.preLoginRq = {
      email: this.email,
      language: this.selectedLanguage
    };
    this.loginService.preLogin(this.preLoginRq).subscribe(
      (response: BoolRs) => {
        if (response.result) {
          this.router.navigate(['auth0'], {
            queryParams: {
              login_hint: this.email,
              language : this.selectedLanguage
            }
          })
        }
      }
    )
  }

And then , in the Auth0 component , I’m using this:

loginWithRedirect(): void{
    this.auth.loginWithRedirect({
      appState: {target: '/home'},
      login_hint: this.route.snapshot.queryParams['login_hint'],
      ui_locales: this.route.snapshot.queryParams['language']
    });
  }

As I mentioned, mail is working but not the translation… Can you help me? Am I missing something?
Thank you in advance.

[rueben.tiow]

Hi @Totodile,

Thanks for reaching out to the Auth0 Community!

I understand you would like to translate the language in the New Universal Login.

Firstly, did you get a chance to check out our Universal Login Internationalization documentation?

Essentially, you will need to pass the preferred language in the ui_locales query parameter in the /authorize request.

For example:

https://YOUR_DOMAIN/authorize?
    response_type=code&
    client_id=YOUR_CLIENT_ID&
    redirect_uri=https://YOUR_APP/callback&
    scope={scope}&
    state={state}&
    ui_locales=de

For this to work, you will also need to enable these languages in your Auth0 Dashboard > Settings and scroll down until you find Languages section and select all the languages that apply.

Once this is done, the New Universal Login Page will translate the languages.

Here is a related Community Post answering a similar question: Changing language in login for Next.js app is not work (nextjs-auth0/New Experience) - #3 by rueben.tiow

Please let me know if you have any further questions.

Thanks,
Rueben

[Totodile]

Hello Rueben and thanks for your answer.

I don’t really understand how to implement your proposed solution.

Isn’t the loginWithRedirect() method the same as you mentioned? I’m passing login_hint (and the email is being prefilled) and ui_locales as parameter(because it can change) for the login and everything is working fine, I can login into my tenant , etc. It’s just the translation. And, btw, I’ve enabled my languages too.

Thank you.

EDIT: Problem solved!

I was passing as a parameter ui_locales, but I went to check HTML universal login code and found that line
var language = config.extraParams.language;
so just changed the name of parameter and now it works.

Thank you!