How to change language in login for Next.js app? (nextjs-auth0)

[jbryn]

Hello, I am using the nextjs-auth0 SDK in my application and I’m struggling to change language in which my Login/Signup page is rendered. According to docs, in order to achieve this I need to change default language in Tenant Settings (I already did that) and set the value of ui_locales parameter sent to the Authorization Request endpoint, but I can’t find any information how to do that using nextjs-auth0 SDK.

[stephanie.chamblee]

Hi @jbryn,

Welcome to the Community!

You can customize the language of the Universal Login page a couple of different ways depending on whether you are using the Classic or New Experience.

You can select Classic or New in your Auth0 dashboard in Branding > Universal Login:

Looking at your tenant in our internal tools, it looks like you have the Classic Universal Login at the moment. If you change this setting to the New Experience, you should see the language that is passed in the ui_locales/your tenant settings.

If you’d prefer to stick with the Classic Experience, here is how to customize the language:

1. Go to Branding > Universal Login in your Auth0 dashboard and got to the Login tab.
2. Enable Customize Login Page and select Lock.js from the DEFAULT TEMPLATES dropdown
3. Pass the language property in the lock configurations:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      language: "es" // <-- Add the language code here

docs: Lock Internationalization

[jbryn]

Thanks a lot! At first I was a bit confused but your comprehensive response cleared things up for me.