Hey guys,
I struggled for a long time to get the OAuth2 working right. Eventhough I felt like I was making progress every day, different errors kept showing up every time, which drove me crazy (and that obviously didn’t help either 
)
Thankfully I found a lot of help on this forum, especially @lottemint.md who very kindly offered his help and walked me through all the steps. I would probably never have succeeded without him! Big up to him and @NigelG for their understanding. I’m incredibly grateful for Bubble and the knowledge/help from its community, it shows once more that both together really make a huge difference!
Now that it’s working for me I want to give back to the community and help rookies like me understand how it should be done (I don’t have a huge tech background - I’m more that business kind of guy).
Below is a step-by-step guide - I’m taking the Hubspot example here but I guess it would work for other integrations that cannot be done with the User-Agent flow :
1. Create a Developer Account app on your integration
1.1 Build an app there:
1.2 Setup this app:
2. Setup your API calls using API Connector
2.1 Add an API with authentication ‘None or self-handled’
2.2 Setup the POST ‘Get Token’ call
- You should be able to find the correct POST URL & Content-Type in the API documentation
- Take the client_id, client_secret and redirect_uri from Step 1.2
- Leave the ‘code’ parameter value blank for now
2.3 Setup the POST ‘Refresh Token’ call
- You should be able to find the correct POST URL & Content-Type in the API documentation
- Same client_id, client_secret and redirect_uri than above
- Leave the ‘refresh_token’ parameter value blank for now
2.4 Setup the GET ‘Me’ call
- You should be able to find the correct GET URL in the API documentation
- Leave the ‘token’ parameter value blank for now
3. Build the first workflows
3.1 Create an ‘Auth’ page (one per integration)
That’s just a blank page with a centered simple loader (to insert a loader, I suggest using this plugin )
3.2 Go to the page from where the action begins (in my case, a clickable button called ‘Hubspot’ - let’s call it ‘Action Button’)
Create a Navigation workflow:
- Simply make the button redirect to your new ‘Auth’ page
- Don’t forget to send the parameter ‘state’ = This URL
3.3 Go back to the ‘Auth’ page
Create an ‘Open an external website’ workflow (when Page URL doesn’t contain ‘code’)
- This is the OAuth URL from Step 1.2
- Don’t forget to add the parameter ‘state’=Get state from page URL
3.4 Go back to the Action Button page and run it in preview mode
Click on the Action Button. At this point, the flow is Action Button (Bubble) → Auth Page (Bubble) → Login/Grant Access (Hubspot) → Back to Auth Page (Bubble)
Copy the code from the URL when you get to the last step. It should look something like that:
4. Initialize the calls
4.1 Initialize the POST ‘Get Token’ call
Paste the ‘code’ value from step 3.4 in the ‘code’ parameter value, and click on ‘Initialize’
You should get the returned values for access_token, refresh_token and expires_in.
- Copy the ‘refresh_token’ value
- Don’t forget to click ‘Save’
4.2 Initialize the POST ‘Refresh Token’ call
In the same way, paste the ‘refresh_token’ value from step 4.1 in the ‘refresh_token’ parameter value, and click on ‘Initialize’
You should once more get returned values as above.
- Copy the ‘token’ value
- Don’t forget to click ‘Save’
4.3. Initialize the ‘Me’ call
In the same way, paste the ‘token’ value from step 4.2 in the ‘token’ parameter value, and click on ‘Initialize’
- Click ‘Save’
5. Build the next worklows
5.1 Create new fields in Data Type User
Create ‘hubspot_token’, ‘hubspot_refresh’ and ‘hubspot_refresh_scheduled’ as Text fields
5.2 Go back to the ‘Auth’ page
When calls are properly initialized, and we get that code in the ‘Auth’ page URL, we can automate the whole flow. Create a workflow when ‘code’ is not empty:
You’ll find initialized calls in the Add Action → Plugins dropdown:
You do not need to setup an endpoint for the following call:
5.3 Go to ‘Backend Workflows’
Create a new endpoint (in my case, I called it ‘hubspot_refresh’):
5.4 Go back to the ‘Auth’ page
Add new actions to the workflow from step 5.2:
6. Set privacy rules
The ‘token’, ‘refresh_token’ and ‘hubspot_refresh_scheduled’ should be kept private from other users.
Go to Data → Privacy and make sure you have these settings:
7. Done!
Run it with a Test User and make sure fields are properly populated for this user in Data → App Data.
I hope this will be useful to current users and future ones (let’s face it, Bubble is amazing and attracts more and more users by the day) and please do let me know if I can help further or if you think something is wrong or missing.
All the best to all in all your projects! 
