Custom OAuth Button
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:
- 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
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
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:
- OAuth Setup
- Workflow 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:
-
- 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.
- 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
Start by adding 2 buttons on your Bubble Design (we will use Twitch as an example here):
- Connect to Twitch
- 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.
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
- 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
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
- Add another workflow
- Trigger - Do when true
- Authorized Response(Authorized) is "yes"
- Authorized Response(Provider) equals provider
- Action - Show Disconnect button
- 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
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 [email protected] and we would be happy to help you.
