firebasegoogle-cloud-platformfirebase-authenticationnx-monorepo

Steps to get Firebase Authentication working locally?

Im using NX with firebase app hosting to get my angular application deployed. It is deploying correctly and seems like auth is working there on the live site but when running the app locally the popup flow does not seem to be working correctly and a site (https://my-project-id.firebaseapp.com/__/auth/handler...) opens with this error

enter image description here

upon opening the dev tools i can see its getting a 403 when trying to make a call to an endpoint that ends in getProjectConfig with a response:

{
  "error": {
    "code": 403,
    "message": "Requests from referer https://my-project-id.firebaseapp.com/ are blocked.",
    "errors": [
      {
        "message": "Requests from referer https://my-project-id.firebaseapp.com/ are blocked.",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "API_KEY_HTTP_REFERRER_BLOCKED",
        "domain": "googleapis.com",
        "metadata": {
          "consumer": "projects/some_number",
          "service": "identitytoolkit.googleapis.com",
          "httpReferrer": "https://my-project-id.firebaseapp.com/"
        }
      },
      {
        "@type": "type.googleapis.com/google.rpc.LocalizedMessage",
        "locale": "en-US",
        "message": "Requests from referer https://my-project-id.firebaseapp.com/ are blocked."
      }
    ]
  }
}

which is a little confusing to me because it would have been referred by localhost i would have thought.

I have authorized my real domain as well as localhost in the firebase auth authorized domains area:

enter image description here

In the google cloud console Credentials - OAuth2 client ids i have an auto generated client that sets up what seem to be the appropriate authorized javascript origins and authorized redirect URIs

enter image description here

So it seems like my bases are covered? The only other thing i can think of is that i use the same firebase config options to start my firebase app when my angular application opens. do I have to make tweaks to that when running locally? perhaps specifically to the authDomain field?

Solution

  • Turns out the api key I was using (the one in the apiKey field of my firebase config object) did not have my *.firebaseapp.com domain set up in the website restrictions section. adding it there allowed it to work although i suspect theres a better way to get it working for localhost? its solved my issue for now though