---
title: "Integration Authorization"
url: "https://docs.unified.to/concepts/embedded-components"
description: "Authorization is the process of asking customers to authorize access to their third-party accounts."
generated_at: "2026-06-30T19:50:30.742Z"
---
# Authorization

Authorization is the process of asking customers to authorize access to their third-party accounts.

Unified provides several options to accomplish this, from easy 1-line embedded components to a full-featured API, and even CNAMEd domains.

## [Embedded Authorization Component](#embedded-authorization-component)

Unified.to provides a suite of pre-built front-end authorization components that support React, Angular, Vue, and Svelte (and plain JavaScript) for you to use in your app.

These authorization components display a list of your activated integrations, returned directly from our API. Once the end-user clicks on an integration, they will be redirected to the authorization page for that integration, regardless if it is OAuth2, API Token and any other type of authorization. in their File Storage connection.

### [Instructions](#instructions)

To use any one of these components in your app:

* Make sure you've activated some integrations first. You can do so at [app.unified.to/integrations](https://app.unified.to/integrations).
* On app.unified.to, click on **Embedded components** and select which of the widgets you want to use from the tab.
* Configure how you want the component to behave under the **Configuration** tab.
* View and copy the code to add to your app under the **Embedded Code** tab.
* Important: Under the **Options** tab, be sure to select the correct permissions scopes that the integrations you activated are expecting to receive. By leaving these options blank, Unified.to will request access to all possible scopes. To learn more about scopes, see: [Understanding scopes](/concepts/scopes).

### [Front-end Frameworks](#front-end-frameworks)

|             |                                                                                                                |
| ----------- | -------------------------------------------------------------------------------------------------------------- |
| **React**   | [npmjs.com/package/@unified-api/react-directory](https://www.npmjs.com/package/@unified-api/react-directory)   |
| **Angular** | [npmjs.com/package/@unified-api/angular-directory](https://npmjs.com/package/@unified-api/angular-directory)   |
| **VueJS**   | [npmjs.com/package/@unified-api/vuejs-directory](https://npmjs.com/package/@unified-api/vuejs-directory)       |
| **Svelte**  | [npmjs.com/package/@unified-api/svelte-directory](https://www.npmjs.com/package/@unified-api/svelte-directory) |

## [Manually Authorizing Connections](#manually-authorizing-connections)

If you do not want to use our pre-built authorization components, nor want to copy our component source code and make changes, then you can use our [API](https://docs.unified.to/unified/integration/Authorize%5Fnew%5Fconnection)

This is the flow to follow in your application with your end-user:

1. You redirect your user to our authorization URL. Make sure to include a `success_redirect`, `failure_redirect`, and `permissions`. Also include either `state` or `external_xref`.
2. Your end-user will authorize the connection
3. If they cancel, then we return them to the `failure_redirect`
4. If they authorize the connection, we then test their API credentials to see if it has the valid permissions
5. If that fails, then we redirect them back to the `failure_redirect` and also include an `error` message with a string denoting the error
6. If it succeeds, then we redirect them to the `success_redirect` and add additional parameters to the URL

## [Successful authorization](#successful-authorization)

If the authorization is successful (either via our authorization components or via the API), we redirect the user to the specified `success_redirect` URL and add the following URL parameters:

* `id`: the newly created connection ID
* `state`: the state value you provided
* `nonce`: a random nonce value
* `type`: the integration type of connection
* `sig`: a security signature to ensure that this information has not been tampered with;

### [Signature calculation](#signature-calculation)

The signature is calculated as follows:

```
sig = HmacSha256(workspace.secret).update(connection.id).update(nonce).update(state).digest('hex');

```

## [Other Embedded Components](#other-embedded-components)

Unified also has non-authorization components that you can embed into your app. These components are:

* **Sign-in**: Authenticate users so they can sign into your app; [info](https://app.unified.to/embed?tab=Sign-in)
* **Public Directory**: Display a list of your integration so your users can learn about your third-party API offerings; [info](https://app.unified.to/embed?tab=Directory)
* **FileManager**: Display a list of files in a directory so your users can pick a file; [info](https://app.unified.to/embed?tab=FileManager)
* **CalendarScheduler**: Display a calendar so your users can schedule events in their Calendar connection; [info](https://app.unified.to/embed?tab=CalendarScheduler)
* **MessagingManager**: Display a list of channels/folders and messages; [info](https://app.unified.to/embed?tab=Messaging)