[FIXED] How do you add linkedin to auth0 custom login box?

Issue

So i started using Auth0 a week ago and everything seemed to be nice and quick until it was time to add social networks as authorization options on my login page, i started modifiying the template code that was provided with universal login on the web editor and when i finished the markup i noticed there weren't any functions for signing in with linkedin, facebook or github.

window.addEventListener('load', function () {
  var config = JSON.parse(
    decodeURIComponent(escape(window.atob('@@config@@')))
  );
  var leeway = config.internalOptions.leeway;
  if (leeway) {
    var convertedLeeway = parseInt(leeway);
    if (!isNaN(convertedLeeway)) {
      config.internalOptions.leeway = convertedLeeway;
    }
  }
  var params = Object.assign({
    overrides: {
      __tenant: config.auth0Tenant,
      __token_issuer: config.authorizationServer.issuer
    },
    domain: config.auth0Domain,
    clientID: config.clientID,
    redirectUri: config.callbackURL,
    responseType: 'code'
  }, config.internalOptions);
  var webAuth = new auth0.WebAuth(params);
  var databaseConnection = 'Username-Password-Authentication';
  var captcha = webAuth.renderCaptcha(
    document.querySelector('.captcha-container')
  );

  function login(e) {
    e.preventDefault();
    var button = this;
    var username = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    button.disabled = true;
    webAuth.login({
      realm: databaseConnection,
      username: username,
      password: password,
      captcha: captcha.getValue()
    }, function (err) {
      if (err) displayError(err);
      button.disabled = false;
    });
  }

  function signup() {
    var button = this;
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    button.disabled = true;
    webAuth.redirect.signupAndLogin({
      connection: databaseConnection,
      email: email,
      password: password,
      captcha: captcha.getValue()
    }, function (err) {
      if (err) displayError(err);
      button.disabled = false;
    });
  }

  function loginWithGoogle() {
    webAuth.authorize({
      connection: 'google-oauth2'
    }, function (err) {
      if (err) displayError(err);
    });
  }

  function displayError(err) {
    captcha.reload();
    var errorMessage = document.getElementById('error-message');
    errorMessage.innerHTML = err.policy || err.description;
    errorMessage.style.display = 'block';
  }


        let btnLogin = document.getElementById('btn-login')
  let btnGoogle = document.getElementById('btn-google')
  let btnSignup = document.getElementById('btn-signup')
  
  
  btnLogin.addEventListener('click', login);
  btnGoogle.addEventListener('click', loginWithGoogle);
  btnSignup.addEventListener('click', signup);

});

even tho i added Github and Facebook on the "Social Connections" are in the website there hasn't been any change to this code, nor i have been given snippets for working with them on my custom login box.

Solution

Yeah, I too wanted the same features. So got a solution which worked for me.

By just changing the method and connection name.

Html :

<button type="button" id="btn-google" class="btn btn-default btn-danger btn-block">
                Log In with Github
</button>
<button type="button" id="btn-linkedin" class="btn btn-default btn-danger btn-block">
            Log In with LinkedIn
</button>

js-script :

function loginWithGithub() {
        webAuth.authorize({
          connection: 'github'
        }, function(err) {
          if (err) displayError(err);
        });
      }

function loginWithLinkedin() {
    webAuth.authorize({
      connection: 'linkedin'
    }, function(err) {
      if (err) displayError(err);
    });
  }


document.getElementById('btn-google').addEventListener('click', loginWithGithub);
document.getElementById('btn-linkedin').addEventListener('click', loginWithLinkedin);

Hope this helps you.

Answered By - Clayton D'souza

Answer Checked By - Katrina (PHPFixing Volunteer)