Get User Information on Unbounce Landing Pages

Auth0 Configuration

  1. Create an Auth0 account and navigate to the dashboard.
  2. Go to Clients and click + Create Client. Pick the Single Page Application option and go to Settings. Note the Client ID and Domain. Also, add the callback URL in both Allowed Callback URLs and Allowed Origins (CORS) (it should be your Unbounce page URL. For example:http://unbouncepages.com/changeit).
  3. Go to Connections > Social and enable the social providers you want to support.

Social Connections

Unbounce Configuration

  • Add a button (or whatever UI element you consider) that will trigger the login with the provider. Take note of the button ID under Properties > Element Metadata.
  • 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/8.12.0/auth0.min.js"></script>
<script type="application/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       'YOUR_AUTH0_DOMAIN',
    clientID:     'YOUR_CLIENT_ID',
    audience: 'https://YOUR_CLIENT_ID/userinfo'
    redirectUri:  'REPLACE_WITH_YOUR_UNBOUNCE_PAGE_URL', // e.g http://unbouncepages.com/changeit
    scope: 'openid profile email',
    responseType: 'token id_token',
  });
</script>

You should use the clientID and Domain of the client you just configured.

  • You need a way to pass the information coming from the social providers to Unbounce. The way you do that is by creating a Form and adding Hidden fields for each field. In the following example we are using the fields name and email.
  • Finally, go back to the JavaScript editor at Unbounce and add a click handler for each button to trigger the social authentication. Here, you must replace the button ID you took note of previously and the connection name, which can be seen in the dashboard under under Connections > Social and expanding the provider. For example, for Google you would use google-oauth2 and for LinkedIn, linkedin. Also, make sure that you replace the IDs properly, so 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).
$('#REPLACE_WITH_BUTTON_ID').bind('click', function() { 
  webAuth.authorize({
    connection: 'YOUR CONNECTION NAME'
  });
});

// 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.