Setting Universal Login page mode in wordpress

Help
1

Hi,

We are using the universal login page with the auth0 wp plugin. We just cannot figure out how to pass the mode or initialScreen to auth0 using the plugin. Seems like anything we try get’s ignored because the /authorise endpoint does not accept it.

We’d like to point the user at the right page based on what they are trying to do (Sign up or Login). I know that the page should be either u/Login or u/Signup but that is all handled on the Auth0 side and I don’t know how to hook in. Do you guys have any idea how we might do this?

Thanks,
Sara

2

We figured out how to do it :slight_smile:

We had to appended mode=signUp to the authorise url using the “auth0_authorize_url” hook:

add_filter("auth0_authorize_url", "alter_url_params_again", 20, 2);
    
function alter_url_params_again($auth_url="", $params=[])
        {
            if (isset($_GET["action"]) === true) {
                if ($_GET["action"] == "register") {
                    $auth_url .= "&mode=signUp";
                }
            };
            return $auth_url;
        }

Made sure we were using the lock template in the Universal Login settings and added the following:

initialScreen:config.extraParams.mode

See in situ here:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      initialScreen:config.extraParams.mode,
      /* additional configuration needed for custom domains
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'YOUR_CUSTOM_DOMAIN'
      }, */
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        primaryColor:    colors.primary ? colors.primary : 'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

With this we are able to push the user to the signup page and login pages accordingly.

Let me know if there is a better way to do this!

3 Likes
3

Thanks a lot for sharing that knowledge with the rest of community!

4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.