Get User Information on Unbounce Landing Pages

1. Create an Auth0 account and navigate to the dashboard.

2. Go to Dashboard > Applications and click + Create Application. Pick the Single-Page Application option and go to Settings. Note the Client ID and Domain.

3. Add the callback URL in both Allowed Callback URLs and Allowed Origins (CORS). Make it your Unbounce page URL. For example: http://unbouncepages.com/changeit.

4. Go to Dashboard > Authentication > Social and enable the social providers you want to support.

1. Create a new UI element, like a button, that will trigger the login with the provider. Note the UI element's ID under Properties > Element Metadata.

2. Add a new JavaScript to your Unbounce landing page, select Before Body End Tag under Placement and add this code. Also make sure to check jQuery as a dependency.

<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
<script type="application/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       '{yourDomain}',
    clientID:     '{yourClientId}',
    audience: 'https://{yourClientId}/userinfo'
    redirectUri:  '{yourUnbouncePageUrl}', // e.g http://unbouncepages.com/changeit
    scope: 'openid profile email',
    responseType: 'token id_token',
  });
</script>

You should use the Client ID and Domain of the application you just configured.

Next, you need a way to pass the information coming from the social providers to Unbounce:

1. Creating a Form and add Hidden fields for each field. For example: the name and email fields.

2. Return to the JavaScript editor at Unbounce.

3. Add a click handler for each button to trigger the social authentication.

   1. Replace the button ID you took note of previously and the connection name. For example, for Google you would use google-oauth2 and for LinkedIn, linkedin.

   2. Make sure that you replace the IDs properly. Instead of #name and #email you should put the ID of the form fields in question (you can see them while editing the form, under Field Name and ID).

$('#{buttonId}').bind('click', function() { 
  webAuth.authorize({
    connection: '{yourConnectionName}'
  });
});

// After authentication occurs, the parseHash method parses a URL hash fragment to extract the result of an Auth0 authentication response.

webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) { 
  if (err) { 
    return console.log(err); 
  }

  if (authResult != null && authResult.accessToken != null) {
    webAuth.client.userInfo(authResult.accessToken, function(err, user) {
      $('#name').val(user.name); 
      $('#email').val(user.email); 
    }); 
  } 

});

Now you will be able to see the information provided by the IdP in the Leads section of your Unbounce Admin Panel, after the user submits the form.