You can add your own custom buttons in your Bubble.io app and add the OAuth functionality to it.
There are times you may choose to add a custom button instead of the Pathfix rendered 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
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:
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:
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 and Private Key for use in the plugin
Go to the Design page of Bubble and look for Pathfix Custom under Visual Element
Start by adding 2 buttons on your Bubble Design (we will use Twitch as an example here):
Disable "Element is visible on page load" on both the buttons so that it shows the relevant option based on the connected status.
Lets go ahead and add the functionality to the buttons:
Next, we setup the workflow to check consented state of the user.
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).
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 Connectivity
Having trouble? Reach out to us at firstname.lastname@example.org and we would be happy to help you.