Skip to content

Auth0 Configuration

Jump to bottom
Knut Ole Sjøli edited this page Oct 24, 2018 · 6 revisions

Passwordless Login

In order to configure passwordless login (sms, email link), you need to configure Auth0 Connections, and add custom HTML to the Login Page:

Connections

  1. Go to manage.auth0.com -> Connections -> Passwordless,
  2. and enable Email.

Login Page

You need to use Auth0LockPasswordless login flow for email magic link logins.

  1. Browse to Auth0 Dashboard -> Hosted Pages -> Login tab,
  2. click the Customize Login Page button,
  3. and add this HTML:
<!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.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.3/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;
    
    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    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 configuration needed for custom domains
      /* 
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: 'auth.cloud.ngi.no'
      }, 
      
      */ 
      assetsUrl:  config.assetsUrl,
      //allowedConnections: connection ? [connection] : null,
      allowedConnections: ['email'],
      passwordlessMethod: 'link',
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        logo: 'https://i.imgur.com/0gXMoc9.png',
        //primaryColor:    'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      defaultADUsernameFromEmailPrefix: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.show();
    console.log('test');
  </script>
</body>
</html>

Multifactor Auth

Adding multifactor is easy when you already have a working email login flow working.

Enabling Multifactor guardian

  1. Browse to manage.auth0.com -> Multifactor Auth,
  2. and enable SMS (Twilio account is needed, see below)
  3. Then add your application clientID to the script below and paste it into the box on the Multifactor Auth page.
function (user, context, callback) {

  var CLIENTS_WITH_MFA = ['YOU_APPLICATION_CLIENT_ID'];
  // run only for the specified clients
  // if (CLIENTS_WITH_MFA.indexOf(context.clientID) !== -1) {
    // uncomment the following if clause in case you want to request a second factor only from user's that have user_metadata.use_mfa === true
    // if (user.user_metadata && user.user_metadata.use_mfa){
      context.multifactor = {
        // required
        provider: 'guardian', 

        // optional, defaults to true. Set to false to force Guardian authentication every time. 
        // See https://auth0.com/docs/multifactor-authentication/custom#change-the-frequency-of-authentication-requests for details
        allowRememberBrowser: false
      };
    // }
  //}

  callback(null, user, context);
}

Twilio account

  1. You need a Twilio account to mess with SMS.
  2. You also need an OUTGOING number ($12) from Twilio in order to send SMS.
  3. When you got your account and outgoing number,
  4. click the SMS box in the Mulitfactor Auth page, and
  5. add your Twilio SID and AuthToken to the respective fields.
  6. Also add the outgoing SMS number you bought in the From field.
  7. You also need to ensure the number you bought is allowed to send SMS to the country of your choice. Go to https://www.twilio.com/console/sms/settings/geo-permissions to set this.
  8. Test your connection.
Clone this wiki locally