---
title: End-user authorization
slug: end-user-authorization
docTags: 
createdAt: 2020-04-06T10:46:21.000Z
---

This documentation will walk you through how you can setup the Connect button (authorization) for your users to click-to-connect their accounts.



### Video Walkthrough

The following video gives you a quick walkthrough on how you can add oauth integrations. 

If you are looking for step by step text guide, please continue reading this documentation.



::embed[]{url="https://youtu.be/8uDKkSKTXi8"}



### Pre-Requisites:

To get started, you need to register your app with the service provider. Each provider will have a dedicated developer space that will allow you to do this.

We have created the setup documentation for a few providers. This can be found here: [Integration Setup Guides](docId:29LgyVEgl5fCP4bAjQuJv)

If you need help identifying where to register your app with a particular provider, reach out to us and we will get back with the steps for it.

When asked for a Redirect URI, enter the following **Pathfix URI**: `https://labs.pathfix.com/integrate/command`

Once you have registered, save the *client ID *and *client secret* for use with Pathfix.

### 
Configure Provider Integration:

- Add your application by clicking **Add Application** (or select an application from the list)
  - *(Optional Security step, *[see more here](https://docs.pathfix.com/domain-security)*) *Click on **Edit **under your Application, add your app domain and hit Save 
- Select the Application and pick a provider from the list (depending on the auth method offered by the provider, you can choose from OAuth, Identity, Client Key based or API Key based integration)
- Add the *client\_ID *and *client\_secret *received from the provider
- Add/Edit the scopes you want to access and hit save



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/7UXZrTfR_UTtYfbUzPFv9_image.png" size="74" width="1169" height="983" caption="Image: Setup" position="center" showCaption="true"}



### Test Connection

Before proceeding, you will need to test the connection to make sure your setup, keys and scopes are correct. Here is how you can run a complete test before proceeding to add the Connect button to your app: 

- Once you have added the provider configuration, click on `Test Connection`



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/sAjQrLG5vvg-g01ilrtgP_image.png" size="84" width="1803" height="291" caption="Image: Test Connection" position="center" showCaption="true"}



- You will be on the **API Playground** where you can click and connect your account
- Connect your account to proceed



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/4bjMYcctcRHYMxcPSrw94_image.png" size="78" width="2077" height="1238" caption="Image: API Playground" position="center" showCaption="true"}



- If your provider developer account has been setup correctly, you will be connected successfully
- Once connected, you should see a few **Sample methods** for the provider
- Select any of the sample methods, click on **Send** and run an API call 
- The **Response** section will show the response received from the provider 



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/RDlDVae0NpEZfgTYx3U2Y_image.png" size="90" width="2073" height="1234" caption="Image: Sample API call" position="center" showCaption="true"}



Your test is now complete and you are ready to add the Connect button to your app for your users to click to connect their accounts. 



### Add OAuth Connect Button

Add the Connect button to your page to allow your users to connect and authorize your app (e.g. Add to Slack, Connect to Google etc.)

- Click on Setup and select `OAuth Connect Buttons` to get your code



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/f8qXOsg2JJaZuU9hIiLYp_image.png" size="88" width="1781" height="1323" caption="Image: Connect button" position="center" showCaption="true"}



You will need to add 2 pieces of script to your page to enable the connection.

- Add the following script to the `<head>` section of your App:



```javascript
<script src="https://labs.pathfix.com/helper.js" 
id="pinc.helper" 
modules="popups,modals,oauth" 
data-public-key="5EE0DC9A-FAE0-4WCE-BE6B-4DA236A6E4F39"  
data-user-id="[MarketSaaS_end_user_id]">
</script>
```

:::hint{type="success"}
**Replacements**

Change (**MarketSaaS\_end\_user\_id**) with the user ID associated with your app. This is generally the email address or unique username or any unique ID associated with your user in your app database.
:::



- Add the following script to the Button (Body) on your app to add the functionality

```javascript
<button data-oauth-command="slack.call" >Integrate with Slack</button>
```

:::hint{type="success"}
**Replacements**

You can change the display text as per your requirements.
:::





Your authorization connection to the service provider is now active.

This will add the functionality that will allow the users to click-to-connect to their account for the service provider.

Pathfix will handle the connection, manage the Access and Refresh Tokens for each user against each provider integration.

Next step is to send API requests (payload) between your app and the service provider, read our documentation on how you can [Enable pass-through API](docId\:JiDAxEPNR2Owz8w4_JpBK).





Need help? Reach out to us at support\@pathfix.com and we would be happy to assist!