BUBBLE SETUP DOCS
Pathfix and Bubble Setup

Bubble User Authorization

8min

Authorizing your Bubble app users to any provider is now extremely easy with the Pathfix plugin.

Pathfix offers a plugin for the auth process that renders the Connect buttons, handles the Method calls, Refresh tokens and stamping API calls from the point your users click the Connect button on your app.



Video Walkthrough





Setup in Pathfix

Once you have registered your application with the provider you wish to integrate with:

  • Login to your Pathfix account and click on Add Application
  • Add the name of your web app and hit Save
  • Select the provider you want to offer the integration from the list of providers. You can change the Display Name and Description in the General tab.
  • Copy the Pathfix Redirect URI https://labs.pathfix.com/integrate/command and paste it in the Redirect URI section of the provider's developer console
  • Enter the Client ID and Client Secret received from provider and hit Save
  • Click on Test Connection and Connect your account to check if the setup is correct



Setup in Bubble

Pathfix OAuth Connector

In the Bubble plugin store, search for Pathfix OAuth Connector and install it.

To activate the plugin:

  • Copy your Pathfix Public Key for use in the plugin
  • Navigate to the plugin page and add your Pathfix Public key



Document image




  • Once installed, go to the Design section of Bubble and look for Pathfix Connector under Visual Element
  • Drag and drop the element to any page/section where you want the Connect buttons to appear
  • In the properties section, select "All Providers configured in my Pathfix Account". This will add the Connect button for all your Pathfix configured providers.
  • If you want to show a specific provider configured in your Pathfix Application and not all of them, add the name under List of providers as per the internal Provider reference name



Document image


In Preview mode, you should now see the Connect button automatically rendered for all your configured providers.



Multiple Pathfix Apps

You can also add multiple apps in Pathfix and have different Public keys associated with the Pathfix Connector in a specific Bubble page.



Image: Multiple keys
Image: Multiple keys




List of Providers

You can also choose a set of specific providers by selecting "List of Providers" and entering the provider names as comma separated values. Here is the list of provider names Provider reference



Image: List of Providers
Image: List of Providers




You should see the Connect button appear in your app. Your authorization connection to the provider is now active. Click on Connect and complete the authorization.

This will add the functionality that will allow the users to click-to-connect their accounts to the provider.

Pathfix will handle the connection, manage the Access and Refresh Tokens for each user.  

IMPORTANT: Click on "Connect" and complete the authorization before you proceed to the next step.

Next step is to make the API call between your app and the provider, see how you can add API Connector in Bubble using the API Connector.





Need help? Reach out to us at [email protected] and we would be happy to assist!