Creating Custom OAuth Button

6min

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
Include the helper tag by injecting the script element
Add the html connect block with necessary attributes
Show state of html block as connected or not 
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

<script src="https://labs.pathfix.com/helper.js" 
    id="pinc.helper" 
    modules="pinc.oauth.min" 
    data-user-id="[END USER ID]" 
    data-public-key="[PATHFIX PUBLIC KEY]" ></script>

<script src="https://labs.pathfix.com/helper.js" 
    id="pinc.helper" 
    modules="pinc.oauth.min" 
    data-user-id="[END USER ID]" 
    data-public-key="[PATHFIX PUBLIC KEY]" ></script>
﻿
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

<button 
    data-oauth-command="[PROVIDER NAME].call" 
    data-client-id="[PATHFIX PUBLIC KEY]" 
    data-oauth-user-id="[END USER ID]" 
    data-oauth-consent-mode="popup" >Connect</button>

<button 
    data-oauth-command="[PROVIDER NAME].call" 
    data-client-id="[PATHFIX PUBLIC KEY]" 
    data-oauth-user-id="[END USER ID]" 
    data-oauth-consent-mode="popup" >Connect</button>
﻿
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. 
(Recommended) Make an API Call (Proxied by your server) to the provider and check the response for errors
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. 
﻿

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)

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

Updated 03 Mar 2023

Did this page help you?

Implement Single Sign On

General