Passwordless and Universal Login at the same time

Help
, ,
2

Hi @mpojeda84,

Welcome to the Community!

You can customize the code in the hosted login page to initiate passwordless or email/password based on which client the request is being made for. Simply add a conditional based on config.clientID.

I basically combined the two defaults, with a an if/else.

I tested this out briefly and everything seems to be working correctly. Replace {CLIENT_ID_GOES_HERE} with the client ID of the app you want to be passwordless. Also, be sure to set up which connections are enabled for your application in application settings.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>
<body>

  <!--[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/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/11.24/lock.min.js"></script>
  <script>
  
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    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;
    }
    var loginHint = config.extraParams.login_hint;
    
	//Initiate passwordless for a specific app (insert your client ID here).
    if(config.clientID === "{CLIENT_ID_GOES_HERE}") {
      var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
        auth: {
          redirectUrl: config.callbackURL,
          responseType: (config.internalOptions || {}).response_type ||
            (config.callbackOnLocationHash ? 'token' : 'code'),
          params: config.internalOptions
        },
        /* additional config needed to use custom domains
        configurationBaseUrl: config.clientConfigurationBaseUrl,
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: config.auth0Domain
        }, */
        assetsUrl:  config.assetsUrl,
        allowedConnections: connection ? [connection] : null,
        rememberLastLogin: !prompt,
        language: language,
        languageDictionary: languageDictionary,
        theme: {
          //logo:            'YOUR LOGO HERE',
          //primaryColor:    'green'
        },
        closable: false
      });

      lock.show();
    }
	
	//This line controls lock for all other apps (non-passwordless)
	else {
      var colors = config.colors || {};

      // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
      var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
        auth: {
          redirectUrl: config.callbackURL,
          responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
          params: config.internalOptions
        },
        /* 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
      });

      if(colors.page_background) {
        var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
            colors.page_background +
            ' }';
        var style = document.createElement('style');

        style.appendChild(document.createTextNode(css));

        document.body.appendChild(style);
      }

      lock.show();
    };
  </script>
</body>
</html
2 Likes