Workflow Fails on Google Outh Flow while getting the authorization code

baris.ugur · 2024-11-06T19:49:22.069Z

Hello everyone, hope all are doing great!

My issue is about a persistent problem with a manually created Google OAuth 2.0 Workflow using Bubble’s API Connector, and I just can’t seem to solve it. I’ve researched similar issues from multiple sources, tried to get help from AI platforms, but I’m completely stuck at this point. I would greatly appreciate any support from anyone who has faced and resolved a similar issue.

First, I created a manual API in Bubble’s API Connector called ‘Google OAuth - Manual API’ that is set to ‘none’ or ‘self-handled’ so that it appears in workflows. I then defined API calls named ‘Google Access Token via Authorization Code’ and ‘Google Access Token via Refresh Code’ linked to it. At this stage, I also created another API call named ‘Google UserInfo’ to retrieve basic information about users. In Google Cloud Console, I carefully defined the credentials, including scopes, redirect URIs, and all other settings, and I believe there’s no issue originating from there.

1981×2481 222 KB

I was able to manually initialize all of the above API calls, and I can say they work flawlessly. The problem arises when trying to create a workflow that uses these API calls. Initially, I use a button on the page (which I also defined as the redirect URI) to call an external URL, and I can see the Authorization Code as a query string value in the URL returned from Google. In the workflow, I use the ‘Page Load’ event to first call ‘Google Access Token via Authorization Code’ and use ‘Get code from page URL’ to provide this code to the API. At this point, the workflow halts and doesn’t proceed to any subsequent steps.

2676×687 46.9 KB

31123×646 64.3 KB

If it were to proceed, as you can see in the visual provided, I would use the ‘login’ or ‘signup’ actions to register the user in the Bubble database and achieve Google login. With the acquired access token, I intend to access various tools like Sheets, Drive, Docs, Meeting, and Calendar throughout the application. Unfortunately, I’ve encountered significant errors and issues with the Google OAuth integration, which has prevented me from completing this setup.

I’ve tried many alternative methods: I tried the built-in Google OAuth plugins, but I couldn’t get the access token needed for other API uses, so they weren’t suitable. I also used intermediary platforms like Zapier, but its integration with Google tools has serious errors and issues, like mixing up rows and reading incorrect data even at a basic level.

41532×964 218 KB

Anyway, I’ve also shared the error message from Chrome and the step where the error occurs on the screen. I’d be really grateful if anyone could assist me.

Thanks all.

Jici · 2024-11-06T19:54:07.698Z

A) Did you tried using API Connector user-agent?

B) Did you run step by step or use logs to see what you was sending when doing the Get access token request? Are you sure you get the code correctly from the URL?

baris.ugur · 2024-11-06T20:14:47.855Z

First of all, thank you for your interest and support.

A) User-Agent Flow Usage: I tried using User-Agent Flow before, and I was able to successfully log in via Google, and Bubble also recognized the session automatically. However, since the authorization code wasn’t returned in the URL, I couldn’t retrieve the access token or access other Google services. That’s why I switched to a manual approach, as recommended by various sources. I also wanted to avoid opening separate Google verification prompts for login and for accessing other services.

B) Step-by-Step and Logs: Yes, I ran the workflow step by step and reviewed the Chrome error messages and Bubble logs. I could see the authorization code in the URL, but the workflow unexpectedly stops at the ‘Get Access Token’ request, and it doesn’t proceed to the next steps.

Jici · 2024-11-06T20:42:25.091Z

baris.ugur:

since the authorization code wasn’t returned in the URL, I couldn’t retrieve the access token or access other Google services.

You don’t need. Bubble do all the stuff for you. The only reason in your case to use manual auth, is if you need your user to authenticate with Bubble auth instead OR if you need to access to another user (A) Google data while logged in with another user (B).

baris.ugur:

I also wanted to avoid opening separate Google verification prompts for login and for accessing other services.

If not needed if you already request all needed scopes first

For the manual flow, did you inspect logs? Because you say it stop (and it does often if the workflow fail when doing API request. Sometimes if you enable continue workflow if error, this could help to debug). Logs could also return a more specific error. What I believe however is that you actually send the request as JSON while this expect url form encoded. There’s a lot of option to try to fix that. try to use form-data, or enable querystr checkbox or use body instead with code=<code>&redirect_uri=... and adding header for content-type. Often however, it work by enabling querystr or switchin to form-data

baris.ugur · 2024-11-06T21:11:33.421Z

Jici:

You don’t need. Bubble do all the stuff for you. The only reason in your case to use manual auth, is if you need your user to authenticate with Bubble auth instead OR if you need to access to another user (A) Google data while logged in with another user (B).

Thank you for your response. If I proceed with Bubble’s built-in authentication, it only grants me scopes like openid, email, and profile. As far as I know, this level of permission does not allow me to access shared documents on Google Workspace Shared Drives (indeed, User A needs to access documents created by User B but shared with them).

My plan is to use Bubble’s login system purely for session management; my users won’t need separate usernames or passwords beyond their @mycompany.com accounts. When a session ends, they’ll re-authenticate via Google OAuth. (Note: The credentials I created in Google Console are set to “internal” and only allow users within my Google Workspace.)

If, as you mentioned, there’s a way to get the required permissions during login without manual management, and if I could maintain that access throughout the session, I’d be happy to use it. However, my concern is that even if the Bubble session persists, the access token will eventually need refreshing. I don’t want users to be forced to re-login each time—I’d prefer to continue the Google session seamlessly using the refresh token.

Jici:

If not needed if you already request all needed scopes first

For the manual flow, did you inspect logs? Because you say it stop (and it does often if the workflow fail when doing API request. Sometimes if you enable continue workflow if error, this could help to debug). Logs could also return a more specific error. What I believe however is that you actually send the request as JSON while this expect url form encoded. There’s a lot of option to try to fix that. try to use form-data, or enable querystr checkbox or use body instead with code=<code>&redirect_uri=... and adding header for content-type. Often however, it work by enabling querystr or switchin to form-data

In my initial message, I shared the error returned by the console. However, when I check the Bubble logs, I also see a different message at this stage:

“Page was loaded /. Anonymous user: Action condition failed”

Unfortunately, there aren’t any other details available in the logs beyond this. I will try the approaches you mentioned—switching to form-data, enabling the querystr checkbox, or using the body format with code=<code>&redirect_uri=... along with the correct content-type header.

I appreciate the help and will test these out to see if they can solve the issue.

Jici · 2024-11-06T21:15:30.998Z

My first answer was related to the user of user-agent in API connector, not Bubble Google auth or plugins.

In Bubble logs, you need to activate the https request and response. Click on advanced.

baris.ugur · 2024-11-06T21:35:28.119Z

Got it, that makes it much clearer—I misunderstood initially. I wasn’t aware of the advanced logging to view detailed HTTP requests and responses, so that will definitely be helpful now. I’ll go through my workflow again, taking into account your notes. Thank you for now; hopefully, I’ll be able to figure out where exactly I’m getting stuck.

baris.ugur · 2024-11-14T04:14:36.805Z

SOLVED

First of all, I want to express my gratitude for the support I’ve received here. I also want to share how I resolved this issue, as I believe it might be helpful for anyone reading about this topic in the future.

Initially, I faced challenges with connecting Bubble to Google OAuth and accessing Google APIs due to Bubble’s strict security standards. I tried almost every method I found in forums and on the internet (such as manual OAuth flow and backend workflows). Eventually, I realized that separating Google OAuth authentication and Google API access into distinct flows was the key to success. This was my experience.

My goal was to allow users to log into my Bubble application using Google OAuth, without creating separate Bubble user accounts, and to keep them connected to the authorized Google Workspace tools throughout the session. To achieve this, I first used the Google OAuth plugin, along with the redirect URI “/api/1.1/oauth_redirect” in Bubble, to initiate a session in Bubble for users logging in with Google OAuth.

In the next step, I needed to get a more comprehensive scope. I used an external URL to acquire an authorization code from Google, and then used that code to obtain access and refresh tokens, which I saved. This next step was critical: initially, I tried adding Google API calls like Google UserInfo, Google Sheets, etc., directly afterward. Unfortunately, I couldn’t get any responses. I believe the issue was a conflict between the tokens Bubble holds for the session and the tokens I manually obtained—though I still can’t be certain.

To overcome this, I created a brand-new manual API and used it to make Google API calls, which started working flawlessly. Essentially, with this new setup, I bypassed the user authentication that was part of the user-agent flow from before. My conclusion was that logging in and initiating the session should be handled using Google plugins, while further actions should be divided into two parts:

Obtain access and refresh tokens using the user-agent flow manually (since Bubble requires user information when interacting with Google).
Make separate manual API calls for accessing Google APIs (since user authentication is not required for each request—access tokens from the previous flow already handle authentication).

I hope my explanation makes sense, and my goal here is simply to share my experiences to help anyone who faces similar issues. If I have made any technical mistakes in my explanation, I apologize in advance. I wish everyone good luck with their projects!