CODEWITHSUNDEEP
reactjsfirebasereact-nativefirebase-authenticationaxios
Beka Batmanashvili
Beka Batmanashvili

Reputation: 151

firebase authentication rest API request with axios

I am trying to write function to Sign in user with Email and Password.

Using Axios and firebase rest API.

So this is how Axios instance looks like, really simple right? ...

 const authUrl = `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${DATABASE_SECRET}`;
const baseURL = "https://beauty-wonderland-e913c-default-rtdb.firebaseio.com";

export const getAxios = (token = null) => {
  const config = {
    baseURL: baseURL,
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
      "Access-Control-Allow-Headers":
        "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
    },
    timeout: 10000,
  };

  if (token !== null) {
    // config.headers.Authorization = `Bearer ${token}`;

    config.baseURL = authUrl;
    config.withCredentials = true;

  }

  let instance = axios.create(config);

  instance.interceptors.request.use(
    (request) => {
      return request;
    },
    (error) => {
      console.log("axios error: ", error);
      return Promise.reject(error);
    }
  );

  instance.interceptors.response.use((response) => {
    return response;
  });

  return instance;
};

This code works fine, flexible and can send any kind of request, but when it comes to authentication, there is problem with sending user data: email and password.

const loginHandler = async () => {
    const response = await getAxios("/").post("", {
      body: JSON.stringify({
        email: "[email protected]",
        password: "password",
        returnSecureToken: true,
      }),
    });

    const outPut = processResponse(response);

    console.log(outPut);
}

so as i guess There is problem with this part

{
          body: JSON.stringify({
            email: "[email protected]",
            password: "123456",
            returnSecureToken: true,
          }),
        });
 }

if fetch function works this way

fetch(   
`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPasswordkey=${DATABASE_SECRET}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: "[email protected]",
          password: "password",
          returnSecureToken: true,
        }),
      }
    );

why do axios gives following error:

XMLHttpRequest at ... from origin 'http://localhost:19006' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please note other get and post request with axios works, and alo authentication works with fetch, only axios shows such an error, please post additional resourses to learn more about firebase rest API and Axios usecases.

This is how error looks like

enter image description here

Upvotes: 2

Views: 1236

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50850

The baseURL in the axios instance returned by "getAxios" function is https://beauty-wonderland-e913c-default-rtdb.firebaseio.com and not the Auth REST API url. It should be authUrl instead. While in fetch you have hard-coded the URL so the URL is correct for sure.

Edit:

Remove those extraneous headers. You just need content-type as per the docs. I got the same CORS error when I had those.

const config = {
    baseURL: baseURL,
    headers: {
      "Content-Type": "application/json",
    },
    timeout: 10000,
  };

Upvotes: 1

Related Questions