Bolt.new AI and Google Classroom integration: Step-by-Step Guide 2025

 

Setting Up Dependencies in Bolt.new AI Project

 

• Open your project’s package.json file.
• Add googleapis as a dependency by including the following in the "dependencies" section:

"dependencies": {
  "googleapis": "^105.0.0"
  // ...other dependencies
}
  

• Since Bolt.new AI doesn’t have a terminal, saving these changes in package.json will automatically include the dependency on deployment.

 

Creating the Google Classroom Integration File

 

• Create a new file named googleClassroom.ts in your project’s root directory.
• Paste the following TypeScript code into googleClassroom.ts. This code sets up an OAuth2 client, generates an authentication URL, handles the callback token exchange, and includes an example method for listing courses from Google Classroom:

import { google } from 'googleapis';

const CLIENTID = process.env.GOOGLECLIENTID || 'YOURCLIENT_ID';
const CLIENTSECRET = process.env.GOOGLECLIENTSECRET || 'YOURCLIENT_SECRET';
const REDIRECTURI = process.env.GOOGLEREDIRECTURI || 'YOURREDIRECT_URI';
export class GoogleClassroomService {
  private oauth2Client = new google.auth.OAuth2(
    CLIENT_ID,
    CLIENT_SECRET,
    REDIRECT_URI
  );
  // Generates a URL to direct users to Google for Classroom authorization
  getAuthUrl(): string {
    const scopes = ['https://www.googleapis.com/auth/classroom.courses.readonly'];
    const url = this.oauth2Client.generateAuthUrl({
      access_type: 'offline',
      scope: scopes,
    });
    return url;
  }
  // Exchanges the provided code for access tokens
  setCredentials(code: string): Promise {
    return new Promise((resolve, reject) => {
      this.oauth2Client.getToken(code, (err, tokens) => {
        if (err) {
          return reject(err);
        }
        this.oauth2Client.setCredentials(tokens || {});
        resolve();
      });
    });
  }
  // Example method: Lists Google Classroom courses
  async listCourses() {
    const classroom = google.classroom({ version: 'v1', auth: this.oauth2Client });
    const res = await classroom.courses.list();
    return res.data.courses;
  }
}
  

 

Integrating the Google Classroom Service into Your Main Application

 

• In your main project file (for example, index.ts or app.ts), import the Express framework and the GoogleClassroomService you created.
• Add the following code snippet to set up routes for initiating Google authentication and handling its callback:

import express from 'express';
import { GoogleClassroomService } from './googleClassroom';

const app = express();
const port = process.env.PORT || 3000;
const googleService = new GoogleClassroomService();
// Route to redirect users to Google for Classroom permissions
app.get('/auth/google', (req, res) => {
  const authUrl = googleService.getAuthUrl();
  res.redirect(authUrl);
});
// Google OAuth2 callback route
app.get('/auth/google/callback', async (req, res) => {
  const code = req.query.code as string;
  try {
    await googleService.setCredentials(code);
    const courses = await googleService.listCourses();
    res.send(courses);
  } catch (error) {
    res.status(500).send('Error during Google authentication');
  }
});
app.listen(port, () => {
  console.log(Server listening on port ${port});
});
  



• This code creates two endpoints: one for redirecting users to the Google login page (/auth/google) and another to handle the OAuth2 callback (/auth/google/callback).

 

Configuring Environment Variables for Google API Credentials

 

• In your Bolt.new AI project, add the following environment variables using the project’s secrets/settings interface:
• GOOGLECLIENTID: Your Google API client ID
• GOOGLECLIENTSECRET: Your Google API client secret
• GOOGLEREDIRECTURI: The redirect URI configured in your Google API Console (typically something like https://your-app-domain/auth/google/callback)
• These variables will be automatically accessed in your code via process.env.

 

Deploying and Testing the Integration

 

• Save all changes to your project files.
• The Bolt.new AI platform will deploy your changes automatically.
• To test, navigate to the /auth/google endpoint in your deployed app. You should be redirected to Google’s login page for Classroom authorization.
• After granting access, Google will redirect you back to /auth/google/callback, where the app exchanges the code for tokens and displays your Google Classroom courses (if any).

 

Final Notes

 

• Ensure that the Google API credentials you use have the necessary permissions and that the redirect URI precisely matches the one configured in your Google Developer Console.
• This guide uses minimal error handling. For production applications, consider adding robust error management and secure token storage.