OAuth 2.0 User-agent issues: Quickbooks + Bubble App API Connector

Hi Bubble Community,

Has anyone successfully created a Quickbooks OAuth2 User-Agent flow to allow for a user to connect their app to Quickbooks via the API connector? Not looking for a plugin-based connection.

User flow:

  • Current user logs into my app
  • Goes to integrations page
  • Clicks on Quickbooks integration tile
  • Clicks “Connect to Quickbooks”
  • Triggers OAuth2.0 User-agent flow
  • Authenticates and redirects user back to my app
  • They can sync invoices and customer data directly into Quickbooks from there

I’ve been reading through Quickbooks OAuth 2.0 Authentication guides and I feel like I’m super close but I’m getting these errors when trying to authenticate via the sandbox environment to move on (screenshot below of errors I get).

Can someone help identify what I’m doing wrong in my workflows/API connector setup? Many thanks!

Screenshots of API connector, Error, and workflow I have:

I’m having the same issues with Pinterest - it feels like I’m 90% there but when I come back to bubble site I get an API error message

1 Like

I think url for user profile is accounts.platform.intuit.com/v1/openid_connect/userinfo
(missing platform in url)
Don’t forget to have openid in the scope list

Hey Jici, thanks for replying here, I switched to that URL you recommended but it still seems to have the same issue. Here are the scopes that I have in Bubble:

com.intuit.quickbooks.accounting, com.intuit.quickbooks.payment, openid, profile, email, phone, address

These are also the selected scopes in the Intuit developer portal for the app I made:

Hum, I don’t remember the settings directly in the QBO settings.
How did you separate them in the scopes in API connector? Also, can you share the auth screen from QBO when you try to login? Normally, it should show the list of scopes

@Jici Yeah sure thing:

When a user in my app Clicks on “Connect to Quickbooks”, they’re taken to the Intuit Sign in and OAuth consent page to connect their Quickbooks account to my app.

Then, after clicking on “Next”, the error is thrown:

For the scopes, I’ve copied and pasted exactly what’s in the API connector right now: com.intuit.quickbooks.accounting, com.intuit.quickbooks.payment, openid, profile, email, phone, address

Hi All,

here is my setup, just note it is in Sandbox and not Production.

Note that I have removed the commas in the scope part, not sure if it actually makes a difference.

Also in your Quickbooks Developer account, you need to go to sandbox companies and make sure there is no one connected, which is what is causing the error mentioned, at least that is what I could see when I tried to run a few different scenarios.

Yes, so if your key are the sandbox one, you need to use the sandbox endpoint (This is why personnaly I use self handled process). Another reason if I remember to use the Self handled process is that you will get the realmID. So I think it may be already better to switch to a self handled process because you will not be able to do anything without the realmID and if I remember, the only way to get it, it’s from the callback url

Yeah, I never bothered setting up the entire workflow, was just trying to recreate the issue, and see if I could figure out the solution.

I don’t have a QBO account actually that I can use. So I’m limited from what I remember. But the scope list with the space is the correct setting.
From the screenshot, I can see selected scopes doesn’t include the openid stuff, so maybe it’s why.
Maybe try to create another app and be sure to select all the scopes if there’s more

Finally, Got access tu an old dev account. And the scopes seem to be fine I think. But the scopes seem to also be set in the production. So if you use your production key, you need to remove sandbox- from the url for user endpoint.

Hey all,

Thanks for that advice - to keep things tight I’m going to try each troubleshoot and see what I get:

“Get rid of the commas in the scopes”:
I got rid of the commas and kept the spaces, went through the flow and received this error:

“Add the sandbox user profile endpoint url”

I added the “sandbox-accounts….” URL since this is the sandbox account, and it then gave me this error when trying to go through the OAuth flow:

Finally, I un-checked, “Requesting an access token uses Basic Auth” and it looks like I was successfully authenticated… received this:

Going back to my API connector setup, it looks like that language saying, “You must authenticate before you can do anything” is gone.

Follow up question now that the sandbox OAuth is properly configured:

  1. For production, would I simply input the production Client ID and Secret keys into the production fields and be good to go?
  2. Or do I then replace the user-endpoint URL with the normal production URL when I eventually deploy this out?
  3. Neither 1 or 2, but something else?

Thanks so much!

1 Like

You will need to set your live key but also set the production user endpoint url (that is just done by removeving sandbox-

I forgot to add this in the previous message, but two follow ups:

  • I’d like to show a “Connected” after the user has successfully connected via OAuth to Quickbooks. Is there something that’s saved in the Bubble database that I can set a conditional on for when to show that “Connected” Icon? Or how would you suggest doing that?
  • The second portion is on the OAuth Disconnect. How have you configured the “Disconnect from Quickbooks” flow?