How to Integrate Google Classroom with V0

Open V0 at v0.dev and describe the Google Classroom interface you want to build. Google Classroom data organizes naturally into courses (the top-level container), coursework (assignments and questions within each course), and submissions (student work tied to each assignment). Think about which user role your dashboard serves — a teacher view differs significantly from a student view or an admin view, and describing the role clearly to V0 produces better component designs. For a teacher dashboard, describe a multi-column layout with a course list on the left and selected course details on the right, including pending submissions and upcoming assignments. For a student tracker, describe a chronological assignment list with status badges. Be specific about interactive elements — clicking a course should load that course's data, and clicking an assignment should show its details. Describe the API routes your components will call: /api/classroom/courses for the course list and /api/classroom/courses/[courseId]/coursework for assignments within a selected course. Include loading states (skeleton loaders while Google API calls complete) and error handling (a friendly message if the user hasn't authorized access yet). After generating the UI, push it to GitHub via V0's Git panel and connect to Vercel for deployment.

Create the Next.js API routes for Google OAuth 2.0 and Google Classroom data fetching. The OAuth flow requires two routes: an authorization initiator (GET /api/auth/google that redirects the user to Google's consent screen) and a callback handler (GET /api/auth/callback/google that receives the authorization code and exchanges it for tokens). For the Classroom data routes, use the access token stored in the user's session to call the Google Classroom REST API endpoints. The main Classroom API endpoints you'll use are: GET https://classroom.googleapis.com/v1/courses (list courses where the user is a teacher or student), GET https://classroom.googleapis.com/v1/courses/{courseId}/courseWork (list assignments for a course), and GET https://classroom.googleapis.com/v1/courses/{courseId}/courseWork/{courseWorkId}/studentSubmissions (get student submissions). For access token storage, use a signed cookie or JWT — never store the refresh token in localStorage. The googleapis npm package provides TypeScript-typed client methods for all Classroom API endpoints and handles token refresh automatically when you provide a refresh token, making it the recommended approach over raw fetch calls for Google APIs. For a simpler implementation without the full googleapis package, you can make raw fetch calls using the access token as a Bearer header — this works for straightforward read operations.

1// app/api/classroom/courses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const CLASSROOM_API_BASE = 'https://classroom.googleapis.com/v1';
5
6export async function GET(request: NextRequest) {
7  // Get access token from session cookie or header
8  const accessToken = request.cookies.get('google_access_token')?.value;
9
10  if (!accessToken) {
11    return NextResponse.json(
12      { error: 'Not authenticated', authUrl: '/api/auth/google' },
13      { status: 401 }
14    );
15  }
16
17  try {
18    const response = await fetch(
19      `${CLASSROOM_API_BASE}/courses?courseStates=ACTIVE&pageSize=20`,
20      {
21        headers: {
22          Authorization: `Bearer ${accessToken}`,
23          'Content-Type': 'application/json',
24        },
25      }
26    );
27
28    if (response.status === 401) {
29      // Token expired — signal client to re-authenticate
30      return NextResponse.json(
31        { error: 'Token expired', authUrl: '/api/auth/google' },
32        { status: 401 }
33      );
34    }
35
36    if (!response.ok) {
37      throw new Error(`Classroom API error: ${response.status}`);
38    }
39
40    const data = await response.json() as {
41      courses?: Array<{
42        id: string;
43        name: string;
44        section?: string;
45        description?: string;
46        courseState: string;
47        enrollmentCode?: string;
48        creationTime: string;
49        updateTime: string;
50      }>;
51    };
52
53    const courses = (data.courses ?? []).map((course) => ({
54      id: course.id,
55      name: course.name,
56      section: course.section ?? '',
57      description: course.description ?? '',
58      state: course.courseState,
59      enrollmentCode: course.enrollmentCode ?? '',
60      createdAt: course.creationTime,
61      updatedAt: course.updateTime,
62    }));
63
64    return NextResponse.json({ courses });
65  } catch (error) {
66    const message = error instanceof Error ? error.message : 'Unknown error';
67    console.error('Google Classroom API error:', message);
68    return NextResponse.json(
69      { error: 'Failed to fetch courses', details: message },
70      { status: 500 }
71    );
72  }
73}

Create the OAuth 2.0 authorization and callback routes that handle Google sign-in. The authorization route constructs a Google OAuth URL with the required Classroom API scopes and redirects the user to it. After the user grants permission, Google redirects back to your callback route with an authorization code, which you exchange for an access token and refresh token. Store the access token in an HTTP-only cookie for subsequent API calls. The scopes needed for read-only Classroom access are: https://www.googleapis.com/auth/classroom.courses.readonly for courses, https://www.googleapis.com/auth/classroom.coursework.me.readonly for student submissions, and https://www.googleapis.com/auth/classroom.rosters.readonly for class rosters. For teacher access to all student submissions, you need the broader https://www.googleapis.com/auth/classroom.coursework.students.readonly scope. Requesting only the scopes your app actually needs reduces friction in the consent screen and builds user trust. The redirect URI registered in Google Cloud Console must exactly match the one used in your authorization URL — for Vercel deployments, use your production URL (e.g., https://your-app.vercel.app/api/auth/callback/google). For local development, add http://localhost:3000/api/auth/callback/google as an additional authorized redirect URI in Google Cloud Console. Set GOOGLE_REDIRECT_URI as an environment variable so you can switch between local and production values without code changes.

1// app/api/auth/google/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.GOOGLE_CLIENT_ID!;
6  const redirectUri = process.env.GOOGLE_REDIRECT_URI!;
7
8  const scopes = [
9    'https://www.googleapis.com/auth/classroom.courses.readonly',
10    'https://www.googleapis.com/auth/classroom.coursework.me.readonly',
11    'https://www.googleapis.com/auth/classroom.rosters.readonly',
12    'https://www.googleapis.com/auth/classroom.coursework.students.readonly',
13  ].join(' ');
14
15  const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
16  authUrl.searchParams.set('client_id', clientId);
17  authUrl.searchParams.set('redirect_uri', redirectUri);
18  authUrl.searchParams.set('response_type', 'code');
19  authUrl.searchParams.set('scope', scopes);
20  authUrl.searchParams.set('access_type', 'offline'); // Request refresh token
21  authUrl.searchParams.set('prompt', 'consent'); // Force consent to get refresh token
22
23  return NextResponse.redirect(authUrl.toString());
24}
25
26// app/api/auth/callback/google/route.ts
27// exchange code for tokens and store in cookie

Push your code to GitHub and configure Google OAuth credentials in Vercel. Open the Vercel Dashboard, select your project, and go to Settings → Environment Variables. Add GOOGLE_CLIENT_ID with your Google Cloud OAuth client ID, GOOGLE_CLIENT_SECRET with your OAuth client secret, and GOOGLE_REDIRECT_URI with your Vercel deployment callback URL in the format https://your-app.vercel.app/api/auth/callback/google. None of these should have the NEXT_PUBLIC_ prefix — all OAuth processing happens server-side. After setting variables for Production, save and trigger a redeployment. After deployment, go to the Google Cloud Console, navigate to APIs & Services → Credentials → your OAuth client, and add your Vercel production URL to the Authorized redirect URIs list (e.g., https://your-app.vercel.app/api/auth/callback/google). If your app is in 'Testing' mode in the OAuth consent screen, you must also add each user's email address to the Test Users list before they can authorize. To move to production, submit your app for Google's OAuth verification, which requires a brief review if you're requesting sensitive scopes like Classroom data. For V0 Preview deployments, add each preview deployment URL to Google Cloud's authorized redirect URIs list, or use a single stable domain for your authorization testing.