CODEWITHSUNDEEP
firebasefirebase-authenticationaxios
Igal
Igal

Reputation: 6103

Axios post request to Firebase Auth REST API produces 400 error

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?

Upvotes: 1

Views: 3618

Answers (4)

Anunay Anand
Anunay Anand

Reputation: 1

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 :)

Upvotes: 0

Yogesh Joglekar
Yogesh Joglekar

Reputation: 1

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

No need to keep it in a separate file

Upvotes: 0

Mihir Sata
Mihir Sata

Reputation: 51

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!

Upvotes: 0

Renaud Tarnec
Renaud Tarnec

Reputation: 83163

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

Upvotes: 6

Related Questions