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, 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 docid\ ugetlx9c83jct0lm9q yc 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 google calendar as 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 setup in bubble 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 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 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) workflow setup 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 docid\ m9rdua27hrjyn13eary9m having trouble? reach out to us at support\@pathfix com and we would be happy to help you