I have an React/Express application that is deployed on Heroku. The issue that I’m having is that when I work on localhost, a basic login API call is called once as expected by the way React component was done.
const [searchParams, setSearchParams] = useSearchParams();
let code = searchParams.get("code");
const [state, setState] = useState({ data: null, loading: true });
useEffect(() => {
setState((state) => ({
data: state.data,
loading: true,
}));
const getData = async () => {
console.log("helloeoeoeoeo");
try {
await fetch("https://statifyme.herokuapp.com/login", {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ code }),
})
.then((res) => {
if (res.ok) {
return res.json();
} else {
throw new Error("Failed");
}
})
.then((resJson) => {
let data = JSON.parse(resJson.response);
setState({ data: data, loading: false });
});
} catch (error) {
console.log(error);
}
};
getData();
}, []);
if (!state.loading) {
return { loading: state.loading, access_token: state.data.access_token };
}
}
In contrast, after I switch to Heroku, the login API call is called three times which ends up in an error overall (the OAuth2 authorization code expires after the first call, therefore the next two calls return a fail).
This is how the Express API call looks like:
app.post("/login", function (req, res) {
var code = req.body.code || null;
var state = req.body.state || null;
console.log({ code });
var options = {
method: "POST",
url: "https://accounts.spotify.com/api/token",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
form: {
grant_type: "authorization_code",
redirect_uri,
code,
client_id,
client_secret,
},
};
request.post(options, function (error, response, body) {
if (error) throw new Error(error);
let data = JSON.parse(body);
console.log(data.refresh_token);
res.cookie("refresh_token", data.refresh_token, {
maxAge: 30 * 24 * 3600 * 1000,
});
// res.cookie("access_token", data.access_token, {
// maxAge: data.expires_in * 1000,
// });
res.json({
response: response.body,
});
});
});
I need the /login call only once since I will work with refresh tokens afterwards, is there a way to stop Heroku from this behaviour or a method by which I can restrict the call to only one instance and block it afterwards?
Thanks.