When enabling a custom social connection for an application, the login button fails to appear on the Auth0 login page. This occurs because a custom login page overrides the New Universal Login, which prevents Auth0 from automatically injecting the button. Resolving this requires adding custom HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) to the custom login page to render the button manually.

• Auth0
• Custom Social Connections
• Custom Login Page

When a custom login page overrides the New Universal Login, Auth0 reverts to the Classic login experience. In this scenario, Auth0 does not automatically inject a button for Custom Social Connections.

To resolve this, manually add the HTML, CSS, and JS to the Custom Login page to create and handle the button.

Navigate to the Auth0 Dashboard, access the Universal Login settings, and insert the custom code into the login page editor.

1. Navigate to the Auth0 Dashboard.
2. Select Branding, and then choose Universal Login.
3. Select Manage Classic Login.
4. Choose the Login tab.
5. Enable the Customize Login Page toggle (this could be toggled off in case the override is coming from another page).
6. Insert the custom HTML and JS code into the editor.
7. Select Save Changes.

To add the HTML and JS on the custom login page to render the button and initiate the authentication request, use this example.

NOTE: The following code is for example purposes only and should be thoroughly tested before running in a production environment.

<button id="custom-social-btn">Connect with <custom_connection_name></button>
<script>
  document.getElementById('custom-social-btn').addEventListener('click', function() {
    webAuth.authorize({
      connection: '<custom_connection_name>'
    });
  });
</script>