# About API working

**URL:** <https://forum.codewithmosh.com/t/about-api-working/16941>\
**Category:** React\
**Created:** [December 9, 2022, 8:41pm UTC](https://forum.codewithmosh.com/t/about-api-working/16941 "2022-12-09T20:41:52Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sid](https://avatars.discourse-cdn.com/v4/letter/s/5f9b8f/32.png) [@Sid](https://forum.codewithmosh.com/u/Sid)\
**Post date:** [December 9, 2022, 8:41pm UTC](https://forum.codewithmosh.com/t/about-api-working/16941/1 "2022-12-09T20:41:52Z")

</div>

currently, I am working on the project. Where I have an API let’s say {A}. I am using API “A” to send data to the server and using the same API “A” I am supposed to receive data from the backend with different properties. I am able to do it in Postman. But When I tried to fetch the same API in reactJs to receive data from the backend it is not working, although while sending data it is working fine. I am getting desired output.

The second problem is even after logging in when I am sending data to the backend, In response of that I am getting desired data to send but for a user it shows a status like “user not logged in” even after logging in. I am attaching my fetching API code, login, and register code. your suggestions will be a big help to me and It will be appreciated.

**Sending data to backend code - This is working fine**  
export const generateApaWebsite = async (details) =\> {  
let formData = new FormData();  
formData.append(“purpose”, “Access”);  
formData.append(“format”, “APA”);  
formData.append(“cite\_for”, “website”);  
formData.append(“authors”, details.authorini + “-” + details.authorlast);  
formData.append(“publish\_date”, details.date);  
formData.append(“title”, details.title);  
formData.append(“journal\_type”, details.webname);  
formData.append(“doi\_url”, details.website);  
formData.append(“organization”, details.organization);  
formData.append(“action”, “insert”);  
// formData.append(“type”, “Web”);  
// formData.append(“for”, “logged\_in”);

try {  
const response = await fetch(“[https://www.estudypal.com/api/citation](https://www.estudypal.com/api/citation)”, {  
method: “POST”,  
body: formData,  
});  
const data = await response.json();  
console.log(data);  
return data;  
} catch {  
return { error: true };  
}  
};

**output -**

1. **{code: 0, status: ‘You are not logged in’, data: Array(1)}**

2. code: 0

3. data: Array(1)

```
0: {id: 1, source: 'APA', date: '2022-12-09', citation: 'Dsdsdsd, D.(2022, Dec 30).<i>dsdsd</i>.assasasa.https://codewithmosh.com/', intext_Parenthetical: '(Dsdsdsd, 2022)', …}
 length: 1
[[Prototype]]: Array(0)

```

1. status: “You are not logged in”  
\*\*As you can see user staus \*\*

**for sending data to backend -**

export const getcit = async () =\> {  
let formData = new FormData();  
formData.append(“purpose”, “Access”);  
formData.append(“format”, “APA”);

try {  
const response = await fetch(“[https://www.estudypal.com/api/citation](https://www.estudypal.com/api/citation)”, {  
method: “POST”,  
body: formData,  
});  
const data = await response.json();  
console.log(data);  
return data;  
} catch (e) {  
console.log(e.message);  
}  
};

**ouput-**

1. {code: 0, status: ‘No data found.’, data: Array(0)}
2. code: 0
3. data: 
4. status: “No data found.”
5. [[Prototype]]: Object

As you can I am sending and receiving at the same time

login.jsx  
const Login = () =\> {  
const onSuccess = (res) =\> {  
console.log("LOGIN SUCCESS! Current user : “, res.profile0bj);  
notify1();  
};  
const onFailure = (res) =\> {  
notify1();  
console.log(” LOGIN FAILED! res: ", res);  
};

const dispatch = useDispatch();  
const authStatus = useSelector((state) =\> state.user.authStatus);  
const navigate = useNavigate();

useEffect(() =\> {  
if (authStatus) {  
console.log(authStatus);  
setTimeout(() =\> {  
notify1();  
//navigate to the protected route  
navigate(“/”);  
}, 2000);  
}  
}, [authStatus]);  
const formik = useFormik({  
initialValues: {  
email: “”,  
password: “”,  
},  
validationSchema: loginValidators,  
onSubmit: async (values) =\> {  
console.log(values);  
const response = await login(values);  
console.log(response);  
if (!response.error) {  
if (response.code == 1) {  
dispatch(userDetails(response));  
dispatch(userAuthStatus(true));  
TokenService.setUser(response);  
navigate(“/”);  
} else {  
alert(response.status);  
}  
} else {  
alert(“Error Occured”);  
}  
// navigate(‘/’);  
// if(response.code)

```
  // ;
},

```

});

useEffect(() =\> {  
function start() {  
gapi.auth2.init({  
clientId:  
“[57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com](http://57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com)”,  
scope: “”,  
});  
}  
gapi.load(“client:auth”, start);  
});

const notify1 = () =\> {  
toast(“User Logged in Successfully”);  
};

return (  
\<\>

  

  

  

# Login
  
  

  

  
\<TextField  
id=“email”  
name=“email”  
placeholder=“Email”  
onChange={formik.handleChange}  
value={formik.values.email}  
onBlur={formik.handleBlur}  
error={formik.touched.email && Boolean(formik.errors.email)}  
helperText={formik.touched.email && formik.errors.email}  
className=“loginInputField”  
/\>  

  

  

  
\<TextField  
type=“password”  
id=“password”  
name=“password”  
placeholder=“Passowrd”  
onChange={formik.handleChange}  
value={formik.values.password}  
onBlur={formik.handleBlur}  
error={  
formik.touched.password && Boolean(formik.errors.password)  
}  
helperText={  
formik.touched.password && formik.errors.password  
}  
className=“loginInputField”  
/\>  

  

  

  

  

  
Login  

  

  

or

  

  
  

  

  
  

  

### Dont have a account? start here
  

  

  

  

  
 ![]()  

  

  
  
\</\>  
);  
};

export default Login;

**register.jsx**

const Register2 = () =\> {  
const dispatch = useDispatch();  
const authStatus = useSelector((state) =\> state.user.authStatus);  
const navigate = useNavigate();

useEffect(() =\> {  
if (authStatus) {  
//navigate to the protected route  
// navigate(‘’);  
}  
console.log(“I am here to”);  
}, [authStatus]);

const formik = useFormik({  
initialValues: {  
first\_name: “”,  
last\_name: “”,  
email: “”,  
password: “”,  
password1: “”,  
},  
validationSchema: registerValidators,  
onSubmit: async (values) =\> {  
console.log(values);  
const response = await register(values);  
console.log(response);  
navigate(“/”);  
// dispatch(loginRequest(values));  
},  
});  
useEffect(() =\> {  
function start() {  
gapi.auth2.init({  
clientId:  
“[57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com](http://57748193347-ho5flu959ib6qkhcfrpkdd6qn3bnoobl.apps.googleusercontent.com)”,  
scope: “profile email”,  
});  
}  
console.log(“I am registering here”);  
gapi.load(“client:auth”, start);  
});

return (  
\<\>

  

  
  

  

  

# Register
  
  

  

  
\<TextField  
id=“first\_name”  
name=“first\_name”  
placeholder=“first name”  
onChange={formik.handleChange}  
value={formik.values.first\_name}  
onBlur={formik.handleBlur}  
className=“loginInputField”  
// label=“first name”  
/\>  

  

  

  
  

  

  

  
  

  

  

  
\<TextField  
type=“password”  
id=“password”  
name=“password”  
placeholder=“Passowrd”  
onChange={formik.handleChange}  
value={formik.values.password}  
onBlur={formik.handleBlur}  
error={  
formik.touched.password && Boolean(formik.errors.password)  
}  
helperText={formik.touched.password && formik.errors.password}  
className=“loginInputField”  
/\>  

  

  

  
  

  

  

  
\<div className=“register-button-anim” style={{ display: “flex” }}\>  

  
Register  

  

  

  
  

  

  
{/\* 

```
          </div> */}
        {/* <div className="login-reg-btns">
      <div className="button-anim">
        <button type="submit">Login</button>
        <div className="buttin-div"></div>
      </div>
      <p>or </p>
      <div className="login-google">
         <Loginbtn/>
          </div>
    </div> */}

        {/* <div className="register-btn">

          <Button variant="contained" type="submit">Log in</Button>
          <a href="#" className="forgetpassword-link">
            Forget Password?
          </a>
          </div>
          <div className="login-google">
         <Loginbtn/>
          </div> */}
      </form>
    </div>
  </div>
  <ToastContainer
    position="bottom-right"
    pauseOnFocusLoss
    draggable
    pauseOnHover
  />
</>

```

);  
};

export default Register2;