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

# Show the Authentication UI

Once you’ve got your API Client ID & Secret and you’ve successfully generated a token, it’s time to render Rollout Link in your application. Rollout Link is the authentication UI that enables your users to authenticate with their CRM/TMS of choice and creates a credential for each connected account. Configure the data types your app needs as part of this setup, then use the credential to make API requests.

## Choose what data your app needs

Rollout calls each type of data, such as people, notes, or tasks, an **entity**. People sync automatically for supported connectors. To use optional types such as notes and tasks, choose them in [dashboard Settings → Default Entities To Sync](/docs/advanced-guides/controlling-which-records-sync-with-rollout#set-defaults-in-dashboard-settings), or enable them in code:

```tsx theme={null}
<CredentialsManager entitiesToSync={{ notes: true, tasks: true }} />
```

This example enables notes and tasks for new connections. Choose the types your app uses; availability depends on the connector. To use your dashboard defaults, omit `entitiesToSync`. An explicit selection in code takes precedence over those defaults.

Already connected an account? [Update that connection's sync settings](/docs/advanced-guides/controlling-which-records-sync-with-rollout#update-an-existing-connection). Changing the component prop alone does not update existing credentials.

See [Choose what data to sync](/docs/advanced-guides/controlling-which-records-sync-with-rollout) for defaults and other data types, then use your framework guide below to embed the component.

## Guides

Choose the guide that matches your frontend framework:

<CardGroup cols={3}>
  <Card title="React 17 and newer" href="/docs/getting-started/show-the-authentication-ui/react-17-and-newer" icon="code" />

  <Card title="React 16 and older" href="/docs/getting-started/show-the-authentication-ui/react-16-and-older" icon="code" />

  <Card title="Vue.js" href="/docs/getting-started/show-the-authentication-ui/vue-js" icon="code" />

  <Card title="AngularJS" href="/docs/getting-started/show-the-authentication-ui/angularjs" icon="code" />

  <Card title="Ruby on Rails" href="/docs/getting-started/show-the-authentication-ui/ruby-on-rails" icon="code" />

  <Card title="Python (Django)" href="/docs/getting-started/show-the-authentication-ui/python-with-django" icon="code" />

  <Card title="PHP (Laravel)" href="/docs/getting-started/show-the-authentication-ui/php-with-laravel" icon="code" />

  <Card title="Java (Spring Boot)" href="/docs/getting-started/show-the-authentication-ui/java-with-spring-boot" icon="code" />
</CardGroup>

Don’t see a guide for your frontend framework here? Email [support@rollout.com](mailto:support@rollout.com) to request a new one.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.