Axios post request to Firebase Auth REST API produces 400 error

Question

I have an instance of Axios:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://identitytoolkit.googleapis.com/v1'
});

export default instance;

Then I import it in my signup.vue file:

<script>
  import axios from '../../axios-auth';
  ...
</script>

In that Vue file I have a signup form, which runs the following method once I hit the Submit button:

onSubmit() {
        const formData = {
          email: this.email,
          age: this.age,
          password: this.password,
          confirmPassword: this.confirmPassword,
          country: this.country,
          hobbies: this.hobbyInputs.map(hobby => hobby.value),
          terms: this.terms
        };
        console.log(formData);
        axios.post('/accounts:signUp?key=my_key_goes_here', {
          email: formData.email,
          password: formData.password,
          returnSecureToken: true
        })
          .then(res => {
            console.info(res);
          })
          .catch(error => {
            console.error(error);
          });
      }

I'm getting a ~~403 error - forbidden~~ 400 error - bad request.

I tried to change headers:

instance.defaults.headers.post["Access-Control-Allow-Origin"] = "localhost";
instance.defaults.headers.common["Content-Type"] = "application/json";

But that didn't help.

I'm working from localhost and I saw that localhost is allowed by default. I tried also to add 127.0.0.1 to the list, but that also didn't help.

What am I missing? How can I make this request work?

Access-Control-Allow-Origin is a response header. It must be set on the server side, not in your frontend JavaScript code that makes the request. And if you’re getting a 403 response, it’s expected it won’t have the Access-Control-Allow-Origin response header. Typically, servers only add your application-set headers to success responses — 2xx and maybe 3xx responses — but not to 4xx or 5xx error responses. And any CORS configuration you do is never going to cause the server to respond with a 403. So whatever is actually causing the 403 error, it’s not related to CORS configuration, at all. — sideshowbarker, Oct 19 '19 at 12:47
@sideshowbarker I saw an error message saying it was CORS. For some reason now I don't see it, but now I have a 400 error - bad request. I see the request goes to `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=my_api_key` which is, according to Firebase docs, should be the API endpoint. — Igal, Oct 19 '19 at 13:01

Renaud Tarnec · Accepted Answer · 2019-10-19T14:19:17.080

If you get a 400 error it is maybe because you get an error from the API itself:

Common error codes

EMAIL_EXISTS: The email address is already in use by another account.

OPERATION_NOT_ALLOWED: Password sign-in is disabled for this project.

TOO_MANY_ATTEMPTS_TRY_LATER: We have blocked all requests from this device due to unusual activity. Try again later.

As a matter of fact, those errors return an HTTP Status Code of 400.

You can see the exact response message (e.g. EMAIL_EXISTS) by doing the following with axios:

    axios.post('/accounts:signUp?key=my_key_goes_here', {
      email: formData.email,
      password: formData.password,
      returnSecureToken: true
    })
      .then(res => {
        console.info(res);
      })
    .catch(error => {
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        console.log(error.response.data);
      } else if (error.request) {
        console.log(error.request);
      } else {
        console.log("Error", error.message);
      }

    });

See https://github.com/axios/axios#handling-errors

Thank you, that did help! Apparently, since I'm only testing it, I was using a weak password, only 3 chars, while Firebase requires a minimum of 6 chars. Once changed to 6 - worked like a charm. Again, thank you! — Igal, Oct 20 '19 at 08:21

score 0 · Answer 2 · answered Jul 15 '20 at 12:59

I agree with you as i have tried many approaches but was not getting the result. Hence i have tried to change the code.

You need to make two changes in your code.

1] You need to comment the instance.defaults.headers.post["Access-Control-Allow-Origin"] = "localhost"; because you are providing the authentication globally. As, firebase provides the feature of authentication and you are connecting the web app with REST API.

2] You need to add { headers: {'Content-Type': 'application/json' } in the axios.post() method to prevent it from CORS Error. Following this approach i hope you can get the respective output. Happy Coding!

score 0 · Answer 3 · answered Aug 10 '20 at 15:13

0

Directly call https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[yourkey]

No need to keep it in a separate file

answered Aug 10 '20 at 15:13

Yogesh Joglekar

1

score 0 · Answer 4 · answered Sep 14 '21 at 09:18

Anyone who comes to the thread in future. I faced this issue and lost in debugging and worked with fetch. It was tiresome and took me a day but i made axios work. Here is the code.
const data = JSON.stringify({ idToken: authContext.token, password: enteredNewPassword, returnSecureToken: false, });

// Send the valid password to the endpoint to change password
axios
  .post(
    "https://identitytoolkit.googleapis.com/v1/accounts:update?key=[Your Key]",
    data,
    {
      headers: {
        "Content-Type": "application/json",
      },
    }
  )
  .then((response) => {
    console.log(response.data);
  })
  .catch((err) => {
    console.log(err.message);
  });

Remember to Stringify the data you want to send. Stringify it outside of the http request and then pass that variable. Don't know why but this helps!
Lastly remember to add the header when sending the request to firebase. Make sure axios.post is on the same line. My formatter gave a line break which was also cause of error.
Hope it helps :)

Axios post request to Firebase Auth REST API produces 400 error

4 Answers4