> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

> How to get user information with one-click social authentication on Unbounce landing pages.

# Get User Information on Unbounce Landing Pages

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        let processedChildren = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          processedChildren = processedChildren.replace(new RegExp(key, "g"), value);
        }
        setProcessedChildren(processedChildren);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
      {processedChildren}
    </CodeBlock>;
};

## Auth0 Configuration

1. Create an Auth0 account and navigate to the [dashboard](https://manage.auth0.com/#).
2. Go to [Dashboard > Applications](https://manage.auth0.com/#/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](https://manage.auth0.com/#/connections/social) and enable the social providers you want to support.

## Unbounce Configuration

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.

export const codeExample = `<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>`;

<AuthCodeBlock children={codeExample} language="html" />

You should use the <Tooltip tip="Client ID: Identification value given to your registered resource from Auth0." cta="View Glossary" href="/docs/glossary?term=Client+ID">Client ID</Tooltip> 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](/docs/authenticate/identity-providers/locate-the-connection-id). 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`).

```js lines theme={null}
$('#{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 <Tooltip tip="Identity Provider (IdP): Service that stores and manages digital identities." cta="View Glossary" href="/docs/glossary?term=IdP">IdP</Tooltip> in the `Leads` section of your Unbounce Admin Panel, after the user submits the form.