Search code examples
firebasefirebase-authenticationcorsgoogle-identity-toolkit

Create React app - React.js- Browser throwing CORS error when using Firebase Auth REST APIs

In my React.js app, I was implementing authentication using Firebase REST AUTH APIs.

https://firebase.google.com/docs/reference/rest/auth#section-create-email-password

My code looks like this:

export const signUp = createAsyncThunk(
  "auth/signUp",
  async ({ resource, email, password, returnSecureToken }) => {
    try {
      const response = await axios.post(
        `${BASE_URL}/${resource}:signUp?key=[API_KEY]`,
        JSON.stringify({ email, password, returnSecureToken }),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
    } catch (error) {
      throw error;
    }
  }
);

I am trying to make a request to https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

Request Header:

request header

But browser threw the following CORS error:

cors error

In Firebase Setting, the localhost domain is allowed!

firebase setting

I tried other resources to solve this issue! But couldn't able to find a solution!

Solution

  • This is not an issue related to your Firebase settings, it's a navigator security issue.

    A request is sent to a domain identitytoolkit.googleapis.com which is completely different from your current app's domain (localhost).

    One way to solve this is to use a proxy. Check react proxy for further details.