How do I use google-auth-library in client side javascript?

Question

I have a frontend service written in React and built with Vite. I need it to fetch an auth token from google-auth-library that it can use to authenticate with the backend. I'm going through Google's documentation on service-to-service communication and it wants me to write code like this:

const {GoogleAuth} = require('google-auth-library')
const auth = new GoogleAuth();
const audience = '<FRONTEND_HOSTNAME>'
const client = await auth.getIdTokenClient(audience)
const clientHeaders = await client.getRequestHeaders()
return clientHeaders['Authorization']

When run in the browser, this code fails on the first line with Uncaught ReferenceError: require is not defined. I do not have type:module in my package.json, which is one solution I found while googling around. I've also tried using Browserify to bundle google-auth-library, but it fails in the same place, presumably because the require it has a problem with is the one in my code and not in the library.

How do I use this library on the frontend?

Answer 1

Use:

import { GoogleAuth } from 'google-auth-library';