Google OAuth with Bubble

In this guide, we'll walk through how to integrate Google OAuth authentication using Xano as the backend service and Bubble as the frontend. Google OAuth allows users to sign in or sign up for your application using their existing Google account, providing a seamless authentication experience.

Step 1: Set Up Google OAuth in Xano

Before we start, you'll need to have the Google OAuth marketplace extension installed in your Xano workspace. This extension provides pre-built API endpoints to handle the OAuth flow.

1. In the Xano marketplace, locate the Google OAuth extension and install it in your workspace.
2. Follow the instructions provided in the extension to configure your Google OAuth client ID and secret in the Google Developer Console. This includes setting up an authorized redirect URI, which we'll use later.

Step 2: Create a Login Page in Bubble

1. In your Bubble workspace, create a new page called "Login."
2. Add a large button to the page with the text "Continue with Google."

Step 3: Set Up the Bubble API Connector Plugin

1. Install the Bubble API Connector plugin in your Bubble workspace.
2. Create a new API data source in the plugin, and name it "Xano Google OAuth."

Step 4: Configure the OAuth Initialization Endpoint

1. In Xano, copy the URL for the Google OAuth Init API endpoint from the Google OAuth extension.
2. In Bubble, go to the API data source you created and add a new API call. Paste the endpoint URL and name it "init."
3. Add a parameter called "redirect_uri" and set its value to the authorized redirect URI you configured in the Google Developer Console.

Step 5: Handle the OAuth Flow

1. In Bubble, set up a workflow for the "Continue with Google" button click event.
2. In the workflow, call the "init" API you just configured.
3. Use the auth_url result from the API call to open an external website (the Google OAuth page).

Step 6: Complete the Authentication

1. Back in Bubble, go to the "Login" page you created earlier.
2. Add a workflow that triggers when the page loads.
3. In the workflow, call the Google OAuth Continue API endpoint from Xano. This endpoint requires two parameters:

• code: Get this value from the page URL using the Get data from page URL dynamic data function and the parameter name code.
• redirect_uri: Use the same authorized redirect URI you configured earlier.

4. Store the token result from the API call in the browser's local storage using the Send storage element action.
5. Refresh the page using the Refresh page navigation action.
6. Retrieve the token from local storage using the Get storage element action.

Step 7: Display User Information

1. On the "Login" page, add a text element to display the user's name.
2. Use the Get data from external API call dynamic data function to call the Auth Me API endpoint from Xano.
3. In the API call, set the Authorization header using the format Bearer [token], where [token] is the value you retrieved from local storage.
4. Select the user's name from the API response and display it in the text element.

Now, when a user clicks the "Continue with Google" button, they'll be redirected to the Google OAuth page to select their account. After authentication, they'll be redirected back to your Bubble app, and their name will be displayed on the "Login" page using the authenticated token from Xano.

Remember to replace any placeholders (like [token]) with the appropriate dynamic data values, and feel free to customize the UI and workflows based on your application's specific requirements.