javascript - End to End Encryption with Google (Classroom, Docs, Sheets, Drive) APIs Architecture - Stack Overflow

Is it possible to implement Google OAuth in client-side code so that I can call googleapis with an OAuth Object as follows:

const studentData = await classroom.courses.students.list({
  courseId,
  auth: authClient,
});

To implement E2EE, I'm migrating a lot of code that was originally on my Node js backend to my Vite frontend. My understanding is that to have full E2EE, the backend should not handle API calls that contain data like the students.list above. This authClient is created with

const authClient = new google.auth.OAuth2(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URL,
);

However, I can't expose the client secret on my frontend. I've tried with using only the access token but it fails with a 401 Need Login error:

const studentData = await classroom.courses.students.list({
  courseId,
  access_token: req.user.accessToken,
});

"code": 401,
"message": "Request is missing required authentication credential. Expected OAuth 2 
 access token, login cookie or other valid authentication credential. See
 .",

The response goes through and the data gets logged to the console either way (not sure why) but the Gaxios error stops the code from executing as expected.

This can be fixed with fetching it directly using the proper endpoint:

await (fetch(
  `/${courseId}/students`,
  {
    headers: {
      Authorization: `Bearer ${req.user.accessToken}`,
    },
  },
) as unknown as GaxiosPromise<classroom_v1.Schema$ListStudentsResponse>);

But I lose some typing information that I'd have to do manually as shown.

I've tried using the key property but it gives this error:

await classroom.courses.students.list({
  courseId,
  key: "API_KEY",
});

API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal. See

I'm planning to use Firebase Authentication with the Google Provider on the client-side, so I'm given an access_token on the frontend. Is there a similar way to get an OAuth object from Firebase Auth?

I'm wondering if I'm misunderstanding my options for implementing E2EE or if I'm missing some configuration.

Is it possible to implement Google OAuth in client-side code so that I can call googleapis with an OAuth Object as follows:

const studentData = await classroom.courses.students.list({
  courseId,
  auth: authClient,
});

To implement E2EE, I'm migrating a lot of code that was originally on my Node js backend to my Vite frontend. My understanding is that to have full E2EE, the backend should not handle API calls that contain data like the students.list above. This authClient is created with

const authClient = new google.auth.OAuth2(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URL,
);

However, I can't expose the client secret on my frontend. I've tried with using only the access token but it fails with a 401 Need Login error:

const studentData = await classroom.courses.students.list({
  courseId,
  access_token: req.user.accessToken,
});

"code": 401,
"message": "Request is missing required authentication credential. Expected OAuth 2 
 access token, login cookie or other valid authentication credential. See
 https://developers.google.com/identity/sign-in/web/devconsole-project.",

The response goes through and the data gets logged to the console either way (not sure why) but the Gaxios error stops the code from executing as expected.

This can be fixed with fetching it directly using the proper endpoint:

await (fetch(
  `https://classroom.googleapis.com/v1/courses/${courseId}/students`,
  {
    headers: {
      Authorization: `Bearer ${req.user.accessToken}`,
    },
  },
) as unknown as GaxiosPromise<classroom_v1.Schema$ListStudentsResponse>);

But I lose some typing information that I'd have to do manually as shown.

I've tried using the key property but it gives this error:

await classroom.courses.students.list({
  courseId,
  key: "API_KEY",
});

API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal. See https://cloud.google.com/docs/authentication

I'm planning to use Firebase Authentication with the Google Provider on the client-side, so I'm given an access_token on the frontend. Is there a similar way to get an OAuth object from Firebase Auth?

I'm wondering if I'm misunderstanding my options for implementing E2EE or if I'm missing some configuration.

• javascript
• firebase-authentication
• google-api
• vite
• google-classroom

Share Improve this question Follow edited Jan 2 at 16:55 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Jan 2 at 14:09 bit07123bit07123 1511 silver badge44 bronze badges 3

• To get the Google OAuth token if you sign in with Firebase, you'll need to capture it from signInWith.... See stackoverflow.com/questions/44484440/get-google-access-token. I didn't immediately find a code-sample to do this, so I'm hoping somebody else can share that (below). – Frank van Puffelen Commented Jan 2 at 17:00
• @FrankvanPuffelen thank you for the tip! I posted and answer with the code; slightly unrelated, but would you recommend using googleapis with React in the browser? I'm going with the fetch requests for now because I'm getting errors with Vite and googleapis. – bit07123 Commented Jan 2 at 19:16
• Nice answer! I forgot about the GoogleAuthProvider.credentialFromResult(...) flow.