blog/2023/04/01/using-cloudflare-workers-as-a-proxy-for-firebase-authentication/ about blog-comments HOT 2 OPEN

This article has helped me a ton to add firebase auth to my app, thanks! I'm already using Workers for many things, so it made sense to go this route.

Google and Github auth worked perfectly right away using this proxy, but it took me a few weeks to figure out why Apple wasn't working with this approach. Apple/Firebase do not make the best job of explaining different domain verification requirements, key ids, cryptic errors, and especially Apple has the most confusing dashboards where you have to configure this…

Turns out the error lied in this little proxy. When you request an email and user name from Apple during the auth (which is done by default in Firebase), the OAuth flow slightly changes — from passing the code in the URL query params into using a POST request and passing data in the request body. This is why Firebase docs mention that you must use Firebase Hosting to use Sign in with Apple, but they do not go into why. They need their server to read POST bodies.

This proxy is written in a way that keeps the URL, headers, method, but NOT the body. The body is thrown out and with it all required data to make the flow work correctly.

The fix is quite simple. You can go from:

const newRequest = new Request(transformedUrl.toString(), {
  method: request.method,
  headers: request.headers,
});

Into:

const newRequest = new Request(transformedUrl.toString(), request);

Which makes the new request inherit all original properties, not just the method and headers. It will include the body too and that's when my integration started to work for Apple auth too.

from blog-comments.

I'm getting a CORS error:

Access to XMLHttpRequest at 'https://my-app.com/__/firebase/init.json' (redirected from 'https://my-app.com/__/firebase/init.json') from origin 'https://my-app.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried this:

const newRequest = new Request(transformedUrl.toString(), request);
const response = await fetch(newRequest)
const responseHeaders = new Headers(response.headers)
responseHeaders.set('Access-Control-Allow-Origin', '*')
return new Response(response.body, {
   headers: responseHeaders,
   status: response.status,
   statusText: response.statusText
})

But still not working for redirect, siginWithPopUp works tho.

Any ideas?

from blog-comments.