How to Integrate Bolt.new with Google Classroom

Start at Google Cloud Console (console.cloud.google.com). Create a new project or select an existing one. Navigate to APIs & Services → Library, search for 'Google Classroom API', and click Enable. You'll also need to enable the 'Google People API' if you plan to access student profile information. Next, configure the OAuth consent screen: go to APIs & Services → OAuth consent screen. Choose 'External' if you want any Google account to log in (required for testing), or 'Internal' if you're building for a specific Google Workspace for Education domain. Fill in the app name, support email, and developer contact. On the Scopes step, add the scopes you need: start with '.../auth/classroom.courses.readonly' for listing courses and '.../auth/classroom.coursework.me.readonly' for viewing assignments. Do NOT add student-roster or submission-reading scopes unless you need them — they trigger a full Google OAuth verification review. Now create credentials: APIs & Services → Credentials → Create Credentials → OAuth Client ID. Select 'Web application'. Under 'Authorized redirect URIs', add your deployed URL (e.g., https://your-app.netlify.app/api/auth/callback/google). You'll update this after deployment if you don't have a URL yet. Download the credentials JSON — you'll need the client_id and client_secret.

In your Bolt.new project, add the OAuth credentials and configuration to your .env file. You'll need the Google client ID and secret (server-side only — no NEXT_PUBLIC_ prefix), the OAuth callback URL (your deployed domain), and a session secret for encrypting tokens stored in cookies. For the Google Classroom API calls, you'll use the googleapis npm package, which provides typed clients for all Google APIs including Classroom. For session management, iron-session provides encrypted, stateless cookie sessions that work well with Next.js API routes and don't require a database to store tokens. Prompt Bolt to install these packages and set up the basic project structure.

1# .env file additions
2# OAuth credentials — server-side only, never NEXT_PUBLIC_
3GOOGLE_CLIENT_ID=your_client_id.apps.googleusercontent.com
4GOOGLE_CLIENT_SECRET=GOCSPX-your_client_secret
5# Update this to your deployed URL before testing OAuth
6GOOGLE_REDIRECT_URI=https://your-app.netlify.app/api/auth/callback
7# Generate a random 32+ character string for session encryption
8SESSION_SECRET=replace_with_32_character_random_string_here
9# OAuth scopes — space-separated
10GOOGLE_SCOPES=https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.coursework.me.readonly

The OAuth flow requires two API routes: one that redirects users to Google's authorization page, and one that handles the callback with the authorization code and exchanges it for tokens. The authorization route generates the Google OAuth URL with your configured scopes, sets the access_type to 'offline' (required to receive a refresh token for long-lived access), and includes 'prompt: consent' to ensure you get a refresh token even if the user has previously authorized. Without 'prompt: consent', Google only sends a refresh token on the first authorization. The callback route receives the authorization code from Google, exchanges it for access and refresh tokens, stores them in an encrypted session cookie, and redirects the user to the dashboard. Token storage in a session cookie means no database is required for basic use — but if you need tokens to persist across sessions or for server-to-server calls without a logged-in user, store them in your database instead.

1// app/api/auth/login/route.ts
2import { NextResponse } from 'next/server';
3import { google } from 'googleapis';
4
5function getOAuthClient() {
6  return new google.auth.OAuth2(
7    process.env.GOOGLE_CLIENT_ID,
8    process.env.GOOGLE_CLIENT_SECRET,
9    process.env.GOOGLE_REDIRECT_URI
10  );
11}
12
13export async function GET() {
14  const oauth2Client = getOAuthClient();
15  const scopes = (process.env.GOOGLE_SCOPES ?? '').split(' ');
16
17  const authUrl = oauth2Client.generateAuthUrl({
18    access_type: 'offline',
19    scope: scopes,
20    prompt: 'consent', // Always get refresh_token
21  });
22
23  return NextResponse.redirect(authUrl);
24}
25
26// app/api/auth/callback/route.ts
27import { NextResponse } from 'next/server';
28import { google } from 'googleapis';
29
30export async function GET(request: Request) {
31  const url = new URL(request.url);
32  const code = url.searchParams.get('code');
33  const error = url.searchParams.get('error');
34
35  if (error || !code) {
36    return NextResponse.redirect(new URL('/?error=auth_failed', request.url));
37  }
38
39  try {
40    const oauth2Client = new google.auth.OAuth2(
41      process.env.GOOGLE_CLIENT_ID,
42      process.env.GOOGLE_CLIENT_SECRET,
43      process.env.GOOGLE_REDIRECT_URI
44    );
45
46    const { tokens } = await oauth2Client.getToken(code);
47    // Store tokens in session cookie (implement with iron-session)
48    // tokens.access_token, tokens.refresh_token, tokens.expiry_date
49    
50    return NextResponse.redirect(new URL('/dashboard', request.url));
51  } catch (err) {
52    console.error('OAuth callback error:', err);
53    return NextResponse.redirect(new URL('/?error=token_exchange_failed', request.url));
54  }
55}

With tokens stored in the session, you can now make authenticated Classroom API calls. Create an API route that fetches the user's courses and coursework, then build a React component that displays this data. The googleapis package provides a typed classroom client. You initialize it with the OAuth2 client that has tokens set, then call classroom.courses.list() to get all courses, classroom.courses.courseWork.list() to get assignments in a specific course, and classroom.courses.courseWork.studentSubmissions.list() to get submission data. For rate limits, the Classroom API allows 500 requests per 100 seconds per project and 100 requests per 100 seconds per user. For a dashboard that loads multiple courses' assignments at once, use sequential requests with small delays rather than Promise.all() on many simultaneous calls.

1// app/api/classroom/courses/route.ts
2import { NextResponse } from 'next/server';
3import { google } from 'googleapis';
4
5export async function GET(request: Request) {
6  // Get tokens from session cookie
7  // (Replace with your actual session retrieval logic)
8  const accessToken = 'YOUR_ACCESS_TOKEN_FROM_SESSION';
9  const refreshToken = 'YOUR_REFRESH_TOKEN_FROM_SESSION';
10
11  try {
12    const oauth2Client = new google.auth.OAuth2(
13      process.env.GOOGLE_CLIENT_ID,
14      process.env.GOOGLE_CLIENT_SECRET,
15      process.env.GOOGLE_REDIRECT_URI
16    );
17    oauth2Client.setCredentials({
18      access_token: accessToken,
19      refresh_token: refreshToken,
20    });
21
22    const classroom = google.classroom({ version: 'v1', auth: oauth2Client });
23
24    const coursesResponse = await classroom.courses.list({
25      courseStates: ['ACTIVE'],
26      pageSize: 20,
27    });
28
29    const courses = coursesResponse.data.courses ?? [];
30    return NextResponse.json({ courses });
31  } catch (error: unknown) {
32    if ((error as { code?: number }).code === 401) {
33      return NextResponse.json({ error: 'Token expired — please re-authenticate' }, { status: 401 });
34    }
35    console.error('Classroom API error:', error);
36    return NextResponse.json({ error: 'Failed to fetch courses' }, { status: 500 });
37  }
38}

Since OAuth callbacks require a registered redirect URI, you must deploy before the complete authentication flow works. The Bolt preview URL (containing webcontainer-api.io) cannot be registered as an authorized URI in Google Cloud Console. Deploy to Netlify by connecting your GitHub repository in Netlify's dashboard and adding all environment variables: GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI (set to your Netlify URL + /api/auth/callback), and SESSION_SECRET. After your first deploy, you'll know your Netlify URL — go back to Google Cloud Console → APIs & Services → Credentials → your OAuth client → edit → add the new redirect URI. Once deployed, test the flow by visiting your Netlify URL, clicking login, authenticating with a Google account that has Classroom access, and verifying that courses appear in the dashboard. Check the browser's Network tab to confirm API calls return 200 responses with real course data.