website logo
⌘K
GETTING STARTED
Getting started with Pathfix
Introduction
OAuth Connect Page
Custom Redirect Domain
Monitoring Activity
Workspace
Extensions
Security
Notifications
Event Callback
Scopes
Provider reference
Access tokens
SDK's
BUBBLE.IO INTEGRATION
Bubble.io Documentation
ADALO INTEGRATION
Adalo Documentation
Adalo User Authorization
Adalo API Call
DEVELOPER CENTER
Developer center
Pathfix Consent Screen (preview)
Module dependencies
Step-by-Step
General
JavaScript
PROVIDER SETUP DOCS
Integration Setup Docs
Identity Auth
Integrating with Airtable
Integrating with Box
Integrating with Hubspot
Integrating with GitHub
Integrating with Google Tasks
Integrating with Instagram Graph API
Integrating with LinkedIn
Integrating with Pipedrive
Integrating with Quickbooks
Integrating with Stripe
Integrating with Stripe-Server
Integrating with Slack
Integrating with TikTok
Integrating with Typeform
Integrating with WooCommerce
Integrating with Xero
Integrating with Zoom
Docs powered by archbee 
8min

Creating Custom OAuth Button

Note: The following steps are for apps built on code-based platforms. If you are using no-code platform like Bubble, visit the documentation here instead.



Design your own HTML snippet

Steps breakdown

  1. Include the helper tag by injecting the script element
  2. Add the html connect block with necessary attributes
  3. Show state of html block as connected or not
  4. Show disconnect button

Step 1: Include helper script

The Script tag is the primary include that loads all the libraries based on what is needed. In this case you only need it to load the pinc.oauth.min library

HTML
|


Replacements

Replacement

Description

PATHFIX PUBLIC KEY

The Public key for your Pathfix Application. See Pathfix keys to learn more

END USER ID

The Identifier used by your app to identify the logged in user (a unique ID you associate your user with)







Step 2: Add HTML Connect block

Add the following HTML block to your page. You can customize the html in any manner you want. Just ensure that the attributes are included as specified.

HTML
|


Replacements

Replacement

Description

PATHFIX PUBLIC KEY

The Public key for you Pathfix Application. See Pathfix keys to learn more

END USER ID

The Identifier used by your app to identify the logged in user. (a unique ID you associate your user with)

PROVIDER NAME

The internal provider reference for your added integration. See Provider reference to learn more



Step 3: Change Connected State

There are two ways to do this.

  1. (Recommended) Make an API Call (Proxied by your server) to the provider and check the response for errors
  2. Make a call to the User Connection API(Proxied by your server) to check whether the User is Authorized.



Step 4: Offer Disconnect

Offer your users the ability to disconnect or revoke their authorization. Call the Revoke Connection API (Proxied by your server) available on the User Connection page under the Revoke User Connection section.

Proxy API's through your Server

All API calls either to the Provider or Pathfix API should be proxied by your server as they will include the Private Key.



Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
General
Docs powered by archbee 
TABLE OF CONTENTS
Step 1: Include helper script
Step 2: Add HTML Connect block
Step 3: Change Connected State
Step 4: Offer Disconnect