The Auth0 team is making changes around custom login pages used in Classic Universal Login (UL) and deprecating certain fields in custom login page templates. The following fields will be deprecated:

• @@auth0Domain@@
• @@assetsUrl@@
• @@clientID@@
• @@cdn@@
• @@callbackURL@@
• @@dict@@
• @@callbackOnLocationHash@@
• @@widgetUrl@@
• @@internalOptions@@
• @@connection@@
• @@prompt@@
• All additional parameters in addition to the above which similarly rely on direct replacement, e.g. @@custom_field@@

• Custom Auth0 Action: Custom login pages in Classic UL

Auth0 requires using the pre-base64-encoded @@config@@ object instead of the fields above, which are being deprecated. To resolve Auth0 custom login pages parameters, please follow these steps:

1. Go to your custom login page configured in the Auth0 Manage Dashboard: Navigate to: Branding > Universal Login -> Advanced options -> Login tab

2. Update the Javascript code on the custom login page to use the following implementation instead of accessing any of the `@@` properties above directly:

   1. Decode the @@config@@ from its base64 encoding

   2. All 11 supported parameter values are set on this object and all additional parameters are set on its `extraParams` property. Below is an example with a subset of these parameters:

      var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
      var params =  {
          overrides: {
              __tenant: config.auth0Tenant,
              __token_issuer: config.authorizationServer.issuer
          },
          domain: config.auth0Domain,
          clientID: config.clientID,
          redirectUri: config.callbackURL,
          scope: config.internalOptions.scope,
          _csrf: config.internalOptions._csrf,
          state: config.internalOptions.state,
          _intstate: config.internalOptions._intstate
      };
      config.extraParams = config.extraParams || {};
            var connection = config.connection;
            var prompt = config.prompt;
            var loginHint = config.extraParams.login_hint;
            var customField = config.extraParams.custom_field;
            var languageDictionary;
            var language;
      
      if (config.dict && config.dict.signin && config.dict.signin.title) {
          languageDictionary = { title: config.dict.signin.title };
      } else if (typeof config.dict === 'string') {
          language = config.dict;
      }

3. Test your custom login page to ensure it’s working correctly post-changes.

Related References

• Customize Classic Login Pages