Skip the Universal Login Page and Redirect to the Upstream Identity Provider Immediately

Knowledge Solutions
, ,
1

Overview

This article explains how to skip showing the universal login page and redirect to the upstream identity provider for an application with only one enterprise or social connection enabled.

Applies To

  • Universal Login
  • Enterprise connection
  • Social connection

Solution

Solution 1

The connection parameter can help bypass the Auth0 login widget for an enterprise or social connection. E.g.,

  • /authorize?connection=Enterprise-connection-name&other…parameters.

The application should append this parameter when starting the universal login flow with the /authorize endpoint.

Solution 2

Some applications may not have the option to configure the authorize request to pass the connection parameter as it isn’t defined in OAuth protocol and is specific to Auth0.

In those use cases, it is possible to implement a Classic login page with a custom HTML code for this specific application. Upon the universal login page load, the page will immediately start a new authentication request with the configured connection in the HTML template. The experience will be similar to passing the connection parameter.

The sample code below is for Google social login, but it can be changed to any enterprise or social connection by updating the connection parameter in the webAuth.authorize call.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</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/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.26/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 = 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 =  {
        overrides: {
          __tenant: config.auth0Tenant,
          __token_issuer: config.authorizationServer.issuer
        },
        domain: config.auth0Domain,
        clientID: config.clientID,
        redirectUri: config.callbackURL,
        responseType: 'code',
        scope: config.internalOptions.scope,
        _csrf: config.internalOptions._csrf,
        state: config.internalOptions.state,
        _intstate: config.internalOptions._intstate
      };

      var triggerCaptcha = null;
      var webAuth = new auth0.WebAuth(params);

      webAuth.authorize({
          connection: 'google-oauth2'
        }, function(err) {
          if (err) displayError(err);
        });
    });
  </script>
</body>
</html>

Setting this HTML code from the Auth0 dashboard is not supported. However, it can be updated with the patch clients by ID management API while passing the template in the payload. This helps to overwrite the tenant-level configuration for the universal login page and forces the application to use a custom classic login page that skips the universal login page.

This endpoint accepts the following fields in the payload:

  • custom_login_page_on: boolean
    • true if the custom login page is to be used, false otherwise.
  • custom_login_page: string
    • The content (HTML, CSS, JS) of the custom login page

The HTML code needs to be passed with the custom_login_page parameter.

Related References