Custom OAuth Button

You can add your own custom buttons in your Bubble.io app and add the OAuth functionality to it.

Usecases

There are times you may choose to add a custom button instead of the Pathfix rendered UI:

• Add multiple functionality to a single OAuth button (e.g. login + data oauth)
• Design button to match your UI

For such use-cases, you can add and design your own OAuth button in Bubble and add the oauth functionality to it. Once this has been done, you can then call any of the provider APIs using the Bubble API Connector.

Tfollowing documentation will guide you on how you can add a custom OAuth Button.



Note: We recommend using the Pathfix rendered oauth connect buttons. Follow this documentation if you wish to do that instead Bubble User Authorization



Setup in Pathfix

Before you proceed, make sure you have configured your app with the provider and get your ClientID and ClientSecret. This documentation uses the example of Twitch.

Copy your ClientID and ClientSecret and head over to your Pathfix account:

• Login to your Pathfix account and click on Add Application
• Add the name of your SaaS and hit Save
• Select Twitch from the list of providers. You can change the Display Name and Description.
• Enter the Client ID and Client Secret generated from Twitch and add additional scopes you want to access



Image: Twitch setup





Setup in Bubble

In Bubble, you can have Pathfix render the OAuth connect button or you can design your own button and call any API.

This part of the setup will run through how you can add your own design of buttons and call any API.

There are 2 steps to get this Bubble setup done:

1. OAuth Setup
2. Workflow Setup



OAuth Setup

Pathfix has a plugin that connects with your account and renders the oauth state for your configured providers.

Install the Pathfix OAuth Connector plugin from the Bubble Plugin store. To active the plugin:

• Copy your Pathfix Public Key for use in the plugin
• In Public Key - Add your Pathfix Public Key
• Note: If you do not have a Pathfix account, you will need to add the Pathfix Connector element to your Design page and go to Preview mode to generate an x-partner-key that will need to be used on the plugin.

Image: Plugin Keys





• Go to the Design page of Bubble and look for Pathfix Custom under Visual Element
• Drag and drop the element to any section of the page of your choice
• This element has NO display, so you can place it anywhere on the page



Image: Pathfix Custom







Workflow Setup

Start by adding 2 buttons on your Bubble Design (we will use Twitch as an example here):

1. Connect to Twitch
2. Disconnect from Twitch

Disable "Element is visible on page load" on both the buttons so that it shows the relevant option based on the connected status.



Image: Buttons with page load disabled





Lets go ahead and add the functionality to the buttons:

• For Connect to Twitch button, add the following workflow:
  • Trigger - On Click of Connect Button
  • Action - OAuth Connect. Add the Provider name as per the provider reference (enter value in lowercase) and User Id as Current User's unique id

Image: Connect button click





• For Disconnect from Twitch button, add the following workflow:
  • Trigger - On Click of Button
  • Action - OAuth Disconnect. Add the provider as twitch (lowercase) and User Id as Current User's unique id

Image: Disconnect button click





Next, we setup the workflow to check consented state of the user.

• Trigger - On Page Load
• Action - OAuth Authorized. Add the provider as twitch (lowercase) and User Id as Current User's unique id

Image: OAuth Authorized





• Add another workflow
• Trigger - Do when true
  • Authorized Response(Authorized) is "yes"
  • Authorized Response(Provider) equals provider
• Action - Show Disconnect button

Image: When authorized





• Add another workflow (or copy the previous workflow and change "yes" to "no")
• Trigger - Do when true
  • Authorized Response(Authorized) is "no"
  • Authorized Response(Provider) equals provider
• Action - Show Connect button

Image: When not authorized





We now need to check the user consented status and show the button elements based on the state (connected or disconnected to a provider) when they connect/disconnect (first time connections).

• Add another workflow
• Trigger - Elements - Pathfix Custom User Consented
• Action -
  • Step 1: Show Disconnect button
  • Step 2: Hide Connect button







• Add another workflow
• Trigger - Elements - Pathfix Custom Disconnected
• Action -
  • Step 1: Show Connect button
  • Step 2: Hide Disconnect button









Once this has been setup, you can call any API for the provider using the Bubble API Connector. The documentation for this is available here API Connector





Having trouble? Reach out to us at support@pathfix.com and we would be happy to help you.