How to pass language to Auth0 popup?

[roland]

I’m using Auth0.JS in an Angular app, and use popups to log people in. Planning to customize the hosted pages, so far all good.
I need to localize the popup. The default code of the popup checks for a parameter dict and passes that as language parameter to the Lock widget that’s show in the popup.
How do I pass that dict or language parameter from my Angular code? Can’t seem to find any parameter that I can set; refer to the source code from line 144: JSDoc: Source: web-auth/popup.js

[roland]

The only option I see is to hijack popup.preload (line 49) and pass a custom parameter there?

[kimcodes]

@roland I’m not sure if I understood correctly, but are you currently using Hosted Login with popup? If so, Lock has a configuration option for language, and/or can alter text through the languageDictionary. so if you are using Hosted Pages, you can configure this from your dashboard, or pass the option when you instantiate your Lock. Please let me know if this is what you are trying to do!

[roland]

hi @kimcodes thank you for your reply! We’re using Hosted Pages and the Auth0.JS SDK.

Pass the option when you instantiate your lock

I’m not using Lock; only the Auth0.JS SDK, and can’t find a way to pass the parameter during instantiation or when opening popup?

[kimcodes]

I was able to specify my language as french for example:

webAuth.popup.authorize({
    ...
    ui_locales: 'fr' 
},

and then in your hosted pages

= new Auth0Lock(config.clientID, config.auth0Domain, {
    ...,
    language: config.extraParams.ui_locales,
    ...
}

We change change the language by using the language configuration option, where we pull the corresponding language file from the i18n directory. Also, here is a whitelist of the OAuth2 parameters we can pass in the authentication request.

Would this achieve what you are looking to do?

[sahil.malik]

@kimcodes 's answer above is correct. But here are angular specific instructions if you need them,

1. Create a SPA in your tenancy
2. Download the quickstart for Angular2+
3. Add http://localhost:3000/callback as a callback URL.
4. npm install && npm start - verify that the plain vanilla application works.

It works? Good! Lets proceed!

What I wish to do is, add a dropdown like this, next to my login button, and I want the Auth0 login page to “accept” whatever locale I have specified here and change it’s UX accordingly.

Here is how,

In your app.component.html make add a dropdown as shown below,

<select (change)="localeChange($event.target.value)">
    <option *ngFor="let locale of locales" value={{locale}}>
      {{locale}}
    </option>
  </select>

Also, in app.component.html, modify the login button to point to a custom function, like this,

<button id="qsLoginBtn"
          class="btn btn-primary my-2 my-sm-0"
          *ngIf="!auth.isAuthenticated()"
          (click)="performLogin()" type="button">
            Log In
        </button>

Finally, modify your app.component.ts to ‘understand’ the login locale selected and pass it to the auth service, like this,

import { Component } from '@angular/core';
import { AuthService } from './auth/auth.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public locales = ['en', 'fr', 'de'];
  public selectedLocale = 'en';
 
  constructor(public auth: AuthService) {
    auth.handleAuthentication();
  }
 
  localeChange(newLocale: string) {
    this.selectedLocale = newLocale;
  }
 
  performLogin() {
    this.auth.login(this.selectedLocale);
  }
 
}

And finally, make the following change in auth.service.ts

public login(ui_locales = 'en'): void {
  this.auth0.authorize({
    ui_locales: ui_locales
  });
}

One last change! In your manage.auth0.com, visit the “hosted pages” area, and choose to customize the login page, and specify the language in lock as line number 11 below,

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
    redirectUrl: config.callbackURL,
    responseType: (config.internalOptions || {}).response_type ||
      (config.callbackOnLocationHash ? 'token' : 'code'),
    params: config.internalOptions
  },
  assetsUrl:  config.assetsUrl,
  allowedConnections: connection ? [connection] : null,
  rememberLastLogin: !prompt,
  language: config.extraParams.ui_locales,
  languageDictionary: languageDictionary,
  theme: {
    //logo:            'YOUR LOGO HERE',
    //primaryColor:    'green'
  },
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
  closable: false,
  defaultADUsernameFromEmailPrefix: false,
  // uncomment if you want small buttons for social providers
  // socialButtonStyle: 'small'
});

Great! Run the app, make sure you select ‘fr’ as the locale,

click login → Bam! we are in french!
Now try ‘de’, Ja! Ich spreche deutsch!

[jussi]

In a nutshell without Angular angle, you need to include ui_locales in webAuth.authorize

this.webAuth.authorize({ ui_locales: 'fr' });

and modify the hosted login page by replacing language with config.extraParams.ui_locales

//language: language,
 language: config.extraParams.ui_locales,