Search code examples
firebase-authenticationcorsnetlifyastrojs

Firebase authentication works locally, but does not work when deployed with Netlify


I integrated Firebase authentication to an Astro website following this guide: https://docs.astro.build/en/guides/backend/google-firebase/

the authentication works locally, but in the deployed version on Netlify the authentication is not working: all of the same requests are happening as locally, but instead of handling the authentication and redirecting the user to the "dashboard" page the "No token found" response in returned, although the token is passed in the request in the same way as locally.

The Google OAuth sign-in works locally, but returns "Cross-Origin-Opener-Policy policy would block the window.closed call." error in the browser's console in the deployed version.

The registration works locally , but returns 404 in the deployed version.

I have the following netlify.toml file in the root of my project's directory:

# netlify.toml
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"
    Access-Control-Allow-Headers = "Content-Type, Authorization"
    Cross-Origin-Opener-Policy = "same-origin-allow-popups"

But it does not seem to help.

I have also experimented with _headers file cors header's configurations, but it did not seem to help either.

I have been searching up Google and Stack Overflow, but could not find a solution for my problem. It does not help that for some reason Netlify is not displaying server side console.log()'s of the Astro website.

Could you please help me with this?


Solution

  • It turned out much easier to solve than I originally thought it would be. All I had to do is to set Astro config to output mode server instead of hybrid:

    export default defineConfig({
      output: 'server',
        adapter: netlify(),
    });