Select image in MFA Page (Universal Login - New) based on Application/ClientId

Get Help
, ,
3

Hi Emiel,

I have also searched for this for a long time, recently I have figured out how to do this.

Personally I think this is a great solution because you will continue to use the Auth0MFAWidget

  (function() {
  
  const parseJwt = (token) => {
  	try {
    	return JSON.parse(atob(token.split('.')[1]));
    } catch (e) {
    	return null;
    }
  };
  
  const decodedToken = parseJwt("{{ requestToken }}");

  const isYourClient = decodedToken && decodedToken.clientId === 'YOUR_CLIENT_ID';
 
  const theme = isYourClient
	? {
  	  icon: 'url-to-your-custom-logo',
      primaryColor: '#255a57'
    }
	: {
      icon: "{{ iconUrl | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png' }}",
      primaryColor: "{{ primaryColor | default: '#ea5323' }}"
    };

  const tenantFriendlyName = isYourClient 
  	? 'Your Client Name'
  	: "{{ userData.tenantFriendlyName }}";

  var css = '.auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-success,.auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-error{ background: #255a57 !important; }';
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
		
  if(isYourClient ){
    head.appendChild(style);
    style.type = 'text/css';
    
    if (style.styleSheet){
      // This is required for IE8 and below.
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }
  
  return new Auth0MFAWidget({
    container: "container",
    theme,
    requesterErrors: [
      {% for error in errors %}
        { message: "{{ error.message }}", errorCode: "{{ error.code }}" }
      {% endfor %}
    ],

    mfaServerUrl: "{{ mfaServerUrl }}",
    {% if ticket %}
    ticket: "{{ ticket }}",
    {% else %}
    requestToken: "{{ requestToken }}",
    {% endif %}
    postActionURL: "{{ postActionURL }}",

    userData: {
      userId: "{{ userData.userId }}",
      email: "{{ userData.email }}",
      friendlyUserId: "{{ userData.friendlyUserId }}",
      tenant: "{{ userData.tenant }}",
      {% if userData.tenantFriendlyName %}
      tenantFriendlyName
      {% endif %}
    },
    globalTrackingId: "{{ globalTrackingId }}",
    {% if allowRememberBrowser %}allowRememberBrowser: {{ allowRememberBrowser }}, {% endif %}
    {% if stateCheckingMechanism %}stateCheckingMechanism: "{{ stateCheckingMechanism }}", {% endif %}
  });
})();

I hope it is of some use for you!

1 Like