Hi, I was following the Build a Shopify app using React Router tutorial, but I am stuck with an authentication issue. Whenever I click the “Create QR code” , I am redirected to a “Log in Shop domain…. “ page, which ultimately fails with an error “accounts.shopify.com refused to connect.“
I am running the QRCode app on a dev environment from my local machine. Kindly help me fix it, as I am a beginner at Shopify app development. Thank you.
Hi @akashchandragupta any luck to understand what is going on?
このチュートリアルでは、 の onSubmit にhandleSave を設定していることが問題です。
form本来のサブミットと、submit(data, { method: “post” });の二重で発火しています。
form本来のサブミットにより、loader が動作し、認証エラーとなります。
修正するには、handleSave に e.reventDefault(); で、form本来のサブミットをキャンセルします。
function handleSave(e) {
e.preventDefault();
const data = {
title: formState.title,
productId: formState.productId || "",
productVariantId: formState.productVariantId || "",
productHandle: formState.productHandle || "",
destination: formState.destination,
};
submit(data, { method: "post" });
}
In this tutorial, the issue is that handleSave is assigned to the form’s onSubmit.
As a result, the form’s native submit and submit(data, { method: “post” }); are both triggered, causing a double submission.
Because of the form’s native submit, the loader runs and results in an authentication error.
To fix this, call e.preventDefault(); in handleSave to cancel the form’s native submit behavior.