Universal Login Page integration in wordpress

[vasims]

I have install a auth0 plugin all site have sperate wordpress installtion and use seprate application and share single database (connection). I would like to implement using Universal Login page in website. I have configure with embeded login using shortcode as per plugin description. I want to do login and register using Universal login.

What I have configure :

• Application configure and database setup

• Get the HTML from a Hosted pages menu (i.e. auth0 dashboard )and convert into a custom page template

• @@config@@ throw an error. I have pass static parameter.

  <?php /* Template Name: CustomPageT1 */ ?> Sign In with Auth0 body, html { height: 100%; background-color: #f9f9f9; }

    .login-container {
      position: relative;
      height: 100%;
    }
  
    .login-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 15px;
      background-color: #fff;
      box-shadow: 0px 5px 5px #ccc;
      border-radius: 5px;
      border-top: 1px solid #e9e9e9;
    }
  
    .login-header {
      text-align: center;
    }
  
    .login-header img {
      width: 75px;
    }
  
    #error-message {
      display: none;
    }
  </style>
  

  

  Welcome

  PLEASE LOG IN

  Email

  Password

  Log In Sign Up

  ---

  Log In with Google

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->
  
  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
  <![endif]-->
  
  <script src="https://cdn.auth0.com/js/auth0/9.2/auth0.min.js"></script>
  <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
  <script>
    window.addEventListener('load', function() {
      
      var config={};
  
      try{
      var config = JSON.parse(
        decodeURIComponent(escape(window.atob('@@config@@'))) 
      );
    }
    catch(e){
      // Minimum data to prevent errors
    config.auth0Domain = "example.eu.auth0.com";
    config.clientID = "MYclientID";
    config.internalOptions = {};
    config.extraParams = {};
    config.callbackURL ="http://example.com/index.php?auth0=1";
    http://myfamily.com
    }
  
      var params = Object.assign({
        /* additional configuration needed for use of custom domains
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: 'YOUR_CUSTOM_DOMAIN'
        }, */
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code'
      }, config.internalOptions);
  
      var webAuth = new auth0.WebAuth(params);
  
      var databaseConnection = 'Username-Password-Authentication';
  
      function login(e) {
        e.preventDefault();
        var username = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        webAuth.login({
          realm: databaseConnection,
          username: username,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }
  
      function signup() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
  
        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password
        }, function(err) {
          if (err) displayError(err);
        });
      }
  
      function loginWithGoogle() {
        webAuth.authorize({
          connection: 'google-oauth2'
        }, function(err) {
          if (err) displayError(err);
        });
      }
  
      function displayError(err) {
        var errorMessage = document.getElementById('error-message');
        errorMessage.innerHTML = err.description;
        errorMessage.style.display = 'block';
      }
  
      document.getElementById('btn-login').addEventListener('click', login);
      document.getElementById('btn-google').addEventListener('click', loginWithGoogle);
      document.getElementById('btn-signup').addEventListener('click', signup);
    });
  </script>
  

Issue : I can’t understand what I need to manage if use Universal login instead of plugin embed form (auth0 plugin)

[vasims]

@josh.cunningham @ricardo.batista

I have follow document Auth0 Universal Login still getting issue.

[josh.cunningham]

@vasims - To use Universal Login with the plugin, no extra code is needed. Just turn on “Universal Login Page” on the Features tab of the settings page. Once that’s saved, your wp-login.php page will automatically redirect. If you use shortcodes or widgets, you are using the embedded login form, not universal. If you want users to log in from another page, just use wp_login_url() in your template to link to that page.

Just to clarify … the universal login page is hosted at Auth0, not on your site. If you have an Auth0 login form showing on your site then you’re using embedded.

[vasims]

I just drop out idea of Universal login. I have configure social login G+ and facebook. G+ working good. When I try signup with facebook get following error :

Guide document : https://auth0.com/docs/connections/social/facebook

Error:
There was a problem with your log in: This account does not have an email associated, as required by your site administrator. [error code: unknown]

[josh.cunningham]

That means you have Require Verified Email turned on in the WP settings but you’re not getting the email from Facebook. Check your Facebook connection settings in Auth0 > Connections > Social > Facebook and make sure you’re asking for that info on login.

[vasims]

How to update password from theme profile page? actually In my theme there is password change section, how this section will manage?

[josh.cunningham]

The best I can do here is point to you to how our plugin handles that from the core profile screen:

https://github.com/auth0/wp-auth0/blob/master/lib/profile/WP_Auth0_Profile_Change_Password.php

If your theme uses the same process and hooks as the core process, then it should work fine. Otherwise, you’ll need to call the Management API directly.

[vasims]

I want to translate auth0 plugins

Translate email into German like verification,welcome,change password

Translate all label into German as well as change button label text

customize verification email sent page
I have change in render_die() function is there any other way to do this? How can I make this secure so plugin update can’t override my changes?

Need to translate Success and Authentication Error text as well

Please provide a solution.

[josh.cunningham]

@vasims - We do not currently have a German translation for the plugin so you’ll need to rely on the gettext filter for text in PHP:

gettext | Hook | WordPress Developer Resources

The login form, Lock, has a German translation or you can add your own text as you see fit. Information on that is here:

Lock Internationalization

The language and dictionary are managed on the Appearance tab of the plugin settings.

[vasims]

I want to redirect all die page to custom page. This will be display in theme UI instead of stand alone page. I just need same thing my wordpress press.

[josh.cunningham]

@vasims - You can use wp_redirect() followed by exit in a filter attached to this hook:

https://auth0.com/docs/cms/wordpress/extending#auth0_die_on_login_output

[vasims]

Will you please let me know. How customise messages and text using dictionary in WordPress plugin . @josh.cunningham You are really helpful.
I have same question like this :

Lock Language Dictionary in Wordpress plugin

Thanks! I’ve gotten it to not give me an error – but the code doesn’t change any of the output. This is what worked (as in not giving the json error): { "dict": { "signin": { "welcome": "Welcome HealthDoers!", "signupTitle": "First Time Log In", "signUpLabel": "First Time Log In", "signUpSubmitLabel": "First Time Log In", "title": "Log me in" } } } We’re in WP 4.7.4 and using Login by Auth0 plugin 3.2.19 (though, we tried this in 3.2.14, as well – same results). All with lock version 9.2.

[josh.cunningham]

Thank you for the kind words, I’m happy to help!

Translating text depends on the text you want to translate. The thread link you posted is how to change the text on the Auth0 login form that appears on wp-login.php (or in shortcodes/widgets). That’s related to the “Lock Internationalization” link I posted above. Changing the text anywhere else (error messages during login, settings page in the admin, etc) requires using the gettext function as we don’t have a German translation for the plugin text.

Hope that helps!