Auth0 Home Blog Docs

How to Launch Universal Login in say Spanish?

Hi, I went to this article to be enlightened on universal login internationalization. In a nutshell, I just want to control the login page language. Unfortunately, this article

https://auth0.com/docs/universal-login/i18n

Just tells how to enable other languages. How in the world (no pun intended) does one now call login and specify for example ‘es’ for spanish ?

I took a stab like this (this is angular spa app)

    this.auth0Client$.subscribe((client: Auth0Client) => {

        client.loginWithRedirect({

            redirect_uri: `${window.location.origin}/callback`,
            appState: { target: redirectPath },
            rememberLastLogin: true,
            language: 'es',                 // lets give this a shot...nope, doesn't work :\
            options: { language: 'es' }
        });
    });

Hi @basil_brush,

Thanks for reaching out!

Can you please share if you are using Lock with Universal Login?

If so, you’ll need to detect the user language in your app. When you are calling the webauth.authorize() , pass the language to the hosted login page as an extra parameter.

const params = {
    language: "mylanguage"
};
this.auth0.authorize(params);

In the hosted login page, you can get the access to the language parameter like following:

config.extraParams.language

After that, you should be able to choose the appropriate language for Lock based on the configuration pass from your application.

Also, please keep in mind that Lock doesn’t pick the browser language itself. Universal Login itself uses Lock and by customizing it, you can use language-parameter to a certain extend.

You need to do it by initializing options variable where you’ll specify the language and then once instantiating Lock, you’ll pass it as a parameter.

Please let me know if this helps!

1 Like

Hi Lily,

Thanks for your response. I read through and so far, not sure how much this points me in the right direction. First, to answer your questions -

  1. Using Lock ? Yes and no. I’m using the universal login which I understand contains the lock widget.

*** pls note, the project I’m working from is the quickstart that appears for spa apps when creating a new application in the management console ? ***

  1. Yes we are managing the current language setting within the application

Therefore, the code sample you provided does not seem compatible with the starter project. Again, please refer to the code provided and also note, the ‘auth0Client$’ is constucted as follows -

public auth0Client$ = (from(                                            // Create an observable of Auth0 instance of client
    createAuth0Client({
        domain: environment.domain,
        client_id: environment.clientId,
        redirect_uri: `${window.location.origin}/callback`,
        rememberLastLogin: true
    })
) as Observable<Auth0Client>).pipe(
    shareReplay(1),                                                     // Every subscription receives the same shared value
    catchError(err => throwError(err))
);

In short, do I need to change techniques for launching the universal login so that I can take advantage of the code you posted or, is there a way to instruct ‘loginWithRedirect’ to accept a language parameter ?

Hello, I want to clarify something -

You guys have 2 angular libraries for authenticating using universal login.

  1. @auth0/auth0-spa-js
  2. auth0-js’

It seems the example you sited above uses #2 above - this one is used for implicit-flow which will try out shortly. However, would also like to know how this (displaying universal in other languages) is supposed to be performed using library #1 above

Looking forward to your response. Thanks

Hi, just as an update - no funciona ! No success so far. I’ve re-tooled our project to use implicit so that I could follow / leverage your code snippets. Universal is still showing in english. What am I missing here ? As I read over this thread again (and again), am I supposed to capture the language parameter value on the management console then do more tinkering to force the universal into spanish ?

This is seeming to be over-complicated. From the dev perspective I would expect / hope that I can pass a parameter (as shown) and then expect the universal to dress itself up with spanish replacement text :\

Hola @basil_brush,

I’m sorry to hear that you are still having this issue. Have you tried setting the supported and default languages in the Dashboard’s Tenant Settings section?

I’m still looking into this issue and will get back to you as soon as I find why is not working.

Please let me know if this helps!

Salut @lily.wisecarver ! it works now. Closer investigation revealed that we needed to go into the management console -> universal login -> customize login page, then, in the script pane


… (lock constructor) …
language: config.extraParams.language,

So, it works and looks great. will this work also with the pkce library ? Oh and thanks again !