Google Classroom

Go to console.cloud.google.com. Create a new project (or select an existing one) named after your Bubble app. **Enable the Classroom API:** In the left sidebar, go to APIs & Services → Library. Search for 'Google Classroom API' and click Enable. **Configure the OAuth Consent Screen:** Go to APIs & Services → OAuth consent screen. - **User Type:** Select **Internal** if your school uses Google Workspace for Education — this restricts the app to your domain's users but completely bypasses Google's weeks-long verification review for restricted scopes. Select External only if you need users from outside your domain (and be prepared for the verification process). - Fill in App name, User support email (your school email), Developer contact information. - Under Scopes, click 'Add or Remove Scopes' and add: - `https://www.googleapis.com/auth/classroom.courses.readonly` - `https://www.googleapis.com/auth/classroom.rosters.readonly` - `https://www.googleapis.com/auth/classroom.coursework.students.readonly` - Save and continue. **Create OAuth 2.0 Credentials:** Go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID. - Application type: **Web application** - Name: 'Bubble App' - Authorized redirect URIs: add `https://your-bubble-app.bubbleapps.io/oauth-callback` (replace with your actual Bubble app URL plus the callback page name you'll create) - Click Create. Copy the **Client ID** and **Client Secret** — you'll use these in Bubble.

Create a new page in Bubble named `oauth-callback`. This page will handle the final step of the OAuth flow — receiving Google's authorization code and exchanging it for tokens. **Store your OAuth credentials in Bubble:** Do not hardcode the Client ID and Client Secret in workflows. Instead, go to Settings → Environment Variables (or use a Bubble 'Config' Data Type with admin-only privacy rules). Store: - `google_client_id` — your OAuth Client ID (this can be semi-public, but keep it in config for easy updates) - `google_client_secret` — your OAuth Client Secret (this MUST be Private; never expose it in client-side code) **Build the authorization redirect:** On your main page, add a 'Connect Google Classroom' button. Its workflow action should open a URL in a new tab: ``` https://accounts.google.com/o/oauth2/v2/auth ?client_id=YOUR_CLIENT_ID &redirect_uri=https://your-app.bubbleapps.io/oauth-callback &response_type=code &scope=https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.rosters.readonly https://www.googleapis.com/auth/classroom.coursework.students.readonly &access_type=offline &prompt=consent ``` The `access_type=offline` parameter is critical — without it, Google will not return a refresh token. The `prompt=consent` forces the consent screen every time, which ensures you always receive a refresh token (without it, Google may skip issuing a new one if the user has authorized before). **Capture the authorization code on the callback page:** On the `oauth-callback` page, add a page-load workflow. In the workflow, use 'Get data from URL → code' to capture the `code` URL parameter that Google appends to your redirect URI. Store this in a Custom State: `authorization_code` (text). Immediately trigger a Backend Workflow named 'ExchangeCodeForTokens' passing the authorization_code value.

1https://accounts.google.com/o/oauth2/v2/auth?client_id=<YOUR_CLIENT_ID>&redirect_uri=https://your-app.bubbleapps.io/oauth-callback&response_type=code&scope=https://www.googleapis.com/auth/classroom.courses.readonly%20https://www.googleapis.com/auth/classroom.rosters.readonly%20https://www.googleapis.com/auth/classroom.coursework.students.readonly&access_type=offline&prompt=consent

These Backend Workflows handle the server-side token operations. They require Bubble Starter plan or higher. **ExchangeCodeForTokens Backend Workflow:** Go to Settings → API → enable 'This app exposes a Workflow API'. Open Backend Workflows tab. Create a new API Workflow named 'ExchangeCodeForTokens' with parameter: `auth_code` (text). In the API Connector, add a new API Group called 'Google OAuth'. Add a call: - Name: Exchange Code for Tokens - Method: POST - URL: `https://oauth2.googleapis.com/token` - Body parameters (application/x-www-form-urlencoded): - `code`: `<auth_code>` (dynamic) - `client_id`: `<YOUR_CLIENT_ID>` (not Private — Client IDs are semi-public) - `client_secret`: `<YOUR_CLIENT_SECRET>` (mark **Private**) - `redirect_uri`: `https://your-app.bubbleapps.io/oauth-callback` - `grant_type`: `authorization_code` Initialize with real values from your OAuth flow. In the ExchangeCodeForTokens workflow, call this API. Then save the response fields: - `Result's access_token` → store in a User private field `classroom_access_token` - `Result's refresh_token` → store in a User private field `classroom_refresh_token` (this is precious — store it permanently) - `Result's expires_in` → compute expiry time: Current date/time + expires_in seconds; store in `classroom_token_expiry` **RefreshClassroomToken Backend Workflow:** Create a second Backend Workflow named 'RefreshClassroomToken'. No parameters needed — it acts on Current User. In the API Connector Google OAuth group, add another call: - Name: Refresh Access Token - Method: POST - URL: `https://oauth2.googleapis.com/token` - Body: `client_id`, `client_secret` (Private), `refresh_token` = `<refresh_token>` (dynamic), `grant_type` = `refresh_token` In the RefreshClassroomToken workflow: call Refresh Access Token, set `refresh_token` to Current User's classroom_refresh_token. Save `Result's access_token` to User's classroom_access_token and update classroom_token_expiry. Set privacy rules on both User fields (`classroom_access_token`, `classroom_refresh_token`): visible only when Current User is the User record.

1{
2  "method": "POST",
3  "url": "https://oauth2.googleapis.com/token",
4  "headers": {
5    "Content-Type": "application/x-www-form-urlencoded"
6  },
7  "body": {
8    "client_id": "<YOUR_CLIENT_ID>",
9    "client_secret": "<private>",
10    "refresh_token": "<refresh_token>",
11    "grant_type": "refresh_token"
12  }
13}

Add a new API Group in the API Connector called 'Google Classroom'. Set the Base URL to `https://classroom.googleapis.com/v1`. Add a shared header at the API Group level: - **Authorization**: `Bearer <access_token>` — mark this header value as **Private** BUT note that the token itself is dynamic (it changes per user). You'll override this at the call level using a dynamic value from the User record. **Call 1 — List Courses:** - Name: List Courses - Method: GET - URL append: `/courses` - URL parameters: `teacherId` = `me` (to list current user's courses), `pageSize` = `20`, `courseStates` = `ACTIVE` - Use as: Data - Initialize with your access token in the Authorization header **Call 2 — List Students (course roster):** - Name: List Students - Method: GET - URL append: `/courses/<courseId>/students` - Parameters: `courseId` = dynamic - Initialize with a real courseId **Call 3 — List CourseWork (assignments):** - Name: List CourseWork - Method: GET - URL append: `/courses/<courseId>/courseWork` - Parameters: `courseId` = dynamic **Call 4 — List Student Submissions:** - Name: List Submissions - Method: GET - URL append: `/courses/<courseId>/courseWork/<courseWorkId>/studentSubmissions` - Parameters: `courseId` = dynamic, `courseWorkId` = dynamic IMPORTANT: Submissions return `userId` (Google's internal ID), NOT email addresses. To display student names, you must pre-fetch the course roster (Call 2) and build a name lookup. Store the roster in a local Bubble Data Type `ClassroomStudent` with `google_user_id`, `full_name`, and `email_address` fields. Use a Search to match submission userId to the local roster.

1{
2  "method": "GET",
3  "url": "https://classroom.googleapis.com/v1/courses/<courseId>/courseWork/<courseWorkId>/studentSubmissions",
4  "headers": {
5    "Authorization": "Bearer <access_token>"
6  },
7  "params": {
8    "courseId": "<courseId>",
9    "courseWorkId": "<courseWorkId>"
10  }
11}

Create a page `classroom-dashboard` in Bubble. This page requires the user to be logged in and have a valid classroom_access_token. **Token freshness check on page load:** Add a page-load workflow: if Current User's classroom_token_expiry is in the past → call RefreshClassroomToken Backend Workflow → continue after completion. If classroom_refresh_token is empty → redirect to oauth-callback page to re-authorize. **Course list Repeating Group:** Add a Repeating Group with Type: 'Google Classroom - List Courses response'. Data Source: 'Get data from external API → Google Classroom - List Courses', setting the Authorization header dynamically to `Bearer [Current User's classroom_access_token]`. In each cell, display: course name, section (if available), enrollment count, and a 'View Assignments' button navigating to an assignments page with the courseId as a URL parameter. **Student submission matrix (assignment detail page):** Create a second page `classroom-course` with URL parameter `course_id`. - Fetch assignments: 'Get data from external API → List CourseWork' with courseId = URL's course_id parameter - For each assignment, fetch submissions using the List Submissions call - Pre-load the course roster using List Students and store in a page-level temporary state (a list of student objects) - For each submission's userId, search the temporary roster state to find the matching student name **Handle school-wide access:** If your Bubble app needs school-wide visibility (all teachers' courses), the teacher's own OAuth token can only see their own courses. You need a Google Workspace domain admin to authorize the app — the domain admin's refresh token grants access to all courses across all teachers. Store the admin token separately (in a Config record, not a User record) and use it for school-wide queries.

Before going live, lock down all sensitive data with Bubble privacy rules. **Privacy rules for User fields:** Go to Data tab → User → Privacy. Add rules: - `classroom_access_token`: This User is visible when Current User is the User (only the user themselves can read their own token) - `classroom_refresh_token`: same rule — Current User is the User - `classroom_token_expiry`: same rule **Privacy rules for locally cached Classroom data:** If you store course or submission data in Bubble Data Types: - ClassroomStudent records: visible when Current User is the teacher who fetched them (add a `teacher_ref` field on the record) - Submission data: visible when Current User is the student OR the teacher (not visible to unrelated users) **Full end-to-end test:** 1. Open your published Bubble app in a fresh browser session (not the editor) 2. Click 'Connect Google Classroom' 3. Verify Google's consent screen appears with your app name and the three scopes listed 4. Approve access. Verify you land on the oauth-callback page with a code parameter 5. Verify classroom_access_token and classroom_refresh_token are saved to the User record (check via Bubble's App Data tab) 6. Navigate to the dashboard — verify courses appear 7. Wait 1 hour OR temporarily set classroom_token_expiry to a past time. Reload the page. Verify the token refreshes automatically without any user action 8. Check Bubble's Logs tab → Workflow logs. Confirm Backend Workflows ran successfully and no errors appear in the token exchange or refresh calls RapidDev's team has built district-wide Google Classroom dashboards on Bubble — if you need help structuring OAuth flows for multi-teacher or admin-scope access patterns, book a free scoping call at rapidevelopers.com/contact.