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
![Image: Twitch setup Image: Twitch setup](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/tXBUAjWGtFpyNKN_sMqjA_image.png)
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.
![Image: Plugin Keys Image: Plugin Keys](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/yB63CM4zaZXwxc4vL9BSf_image.png)
- 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 Image: Pathfix Custom](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/Ic358J1GRsEPw5X2y0AGE_image.png)
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.
![Image: Buttons with page load disabled Image: Buttons with page load disabled](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/znYeDqGMHL6b7rMbNrZPk_image.png)
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 Image: Connect button click](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/jqe8pJQFsh3VOIcegfWWJ_image.png)
- 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 Image: Disconnect button click](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/Cqsye_lIvEdKv3Jz21k-R_image.png)
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 Image: OAuth Authorized](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/cJvh6wK-pwYic_JVuqS6v_image.png)
- Add another workflow
- Trigger - Do when true
- Authorized Response(Authorized) is "yes"
- Authorized Response(Provider) equals provider
- Action - Show Disconnect button
![Image: When authorized Image: When authorized](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/6lhGq2tbIYpulatTJrH5Q_image.png)
- 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 Image: When not authorized](https://archbee-doc-uploads.s3.amazonaws.com/E6H_--BmYJWG_yGaOUOxt/DGIJEYLcXQ_OArww6K2LP_image.png)
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
![Document image Document image](https://images.archbee.com/E6H_--BmYJWG_yGaOUOxt/rYvTKuMHmjegrUPoaeGss_image.png?format=webp)
- Add another workflow
- Trigger - Elements - Pathfix Custom Disconnected
- Action -
- Step 1: Show Connect button
- Step 2: Hide Disconnect button
![Document image Document image](https://images.archbee.com/E6H_--BmYJWG_yGaOUOxt/kv_JgMpUNO4811rc4yScG_image.png?format=webp)
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.
![Doc contributor](https://s3.amazonaws.com/archbee-animals/cat.png)