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, e.g. Design button to match your app 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.
The following 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 Google Calendaras the provider.
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 the provider (n this e.g. Google Calendar) from the list of providers. You can change the Display Name and Description or edit the Scopes as per your needs
- Enter the Client ID and Client Secret generated from Google Console and add additional scopes you want to access
Please note: this documentation page is specific for custom oauth button setup, please check the Bubble User Authorization documentation if you wish to use the Pathfix auto rendered buttons instead.
This part of the setup will run through how you can add your own design of buttons
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.
- In Public Key - Add your Pathfix Public Key to link your Pathfix account
In Bubble Design page:
- You will see 2 Pathfix elements available for use. For the custom button approach, choose 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 (make sure the element is on the page where you want the authorization and connection checks to take place)
Start by adding 2 buttons on your Bubble Design (we will continue to use Google Calendar as an example provider):
- Connect to Google Calendar
- Disconnect from Google Calendar
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 Google 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 Google button, add the following workflow:
- Trigger - On Click of Button
- Action - OAuth Disconnect. Add the provider as googlecalendar (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 googlecalendar (lowercase) and User Id as Current User's unique id
Next we will add the workflows to check the authenticated status of the user
- Trigger - Do when true
- Authorized Response(Authorized) is "yes"
- Authorized Response(Provider) equals provider
- Action
- Step 1: 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 their accounts.
- 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 test the setup by clicking on Preview.
On Successful testing, 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.
