Front-end Firebase requests are blocked on website loaded over corporate proxy

Viewed 330

We ran into an issue with corporate clients who are unable to authenticate with Firebase and read/write with Firestore as these requests to Google APIs were written on the front-end of our Next.js instance.

The error the clients see in their JS console:

Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED

I imagine this is a strict same origin policy behind the corporate proxy, and we should move all firebase/firestore requests to the back-end, behind the /api in Next.js.

We can't ask each corporate client to whitelist *.googleapis.com cross-origin requests moving forward.

Am I correct in this assumption of next steps? If so, a large number of Firestore queries currently written on our front-end will need to move to the back-end, i.e.:

await db
  .collection('users')
  .doc(user.email)
  .collection('starred')
  .doc(user.id)
  .set({ set: true });

Is there already an API library, Cloud same origin policy, or a Cloud Function to make this simpler then writing a whole new API for Firestore DB queries?

1 Answers

It sounds like your hands are tied and you must comply with what you currently have and there maybe tricky proxy tricks you could attempt but the limitation will always be corporate and running into other walls could be a hassle and a waste of time, so considering to move the queries to back end is not a terrible idea if development isn't too far in.

Cloud functions work based on HTTP requests you could run into the same issue given that the requests from the front end could also require authentication for safety.

You can always consider using Firebase Admin SDK to handle the same logic but from the backend. Firebase Admin SDK currently supports the latest versions of Node.js-Java-Python-Go-C#. If you were to port the queries to Node.js you would already have most of the queries done.

You can learn how to setup the SDK by checking out the documentation

Related