Focuses on API authentication, access scopes, and permission management.
I am writing a react frontend which lets users login with their shopify credentials. I used the client id given in my app credentials section, however when i click to login i get the error shown in the image. Code:
import React, { useState } from "react";
const ShopifyLogin = () => {
const [loggedIn, setLoggedIn] = useState(false);
const handleLogin = () => {
const clientId = "MY_SHOPIFY_API_KEY";
const redirectUri = "MY_REDIRECT_URI";
const scope = "read_products";
const loginUrl = `https://accounts.shopify.com/auth?client_id=${clientId}&scope=${scope}&redirect_uri=${redirectUri}&response_type=code`;
window.location.href = loginUrl;
};
const checkAuthorizationCode = () => {
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get("code");
if (code) {
setLoggedIn(true);
window.location.href = "/dashboard";
}
};
React.useEffect(() => {
checkAuthorizationCode();
}, []);
return (
<div>
{!loggedIn ? (
<button onClick={handleLogin}>Log in with Shopify</button>
) : (
<p>You are logged in with Shopify.</p>
)}
</div>
);
};
export default ShopifyLogin;
The error:
Solved! Go to the solution
This is an accepted solution.
1) open "loginUrl" in google chrome (with your already inserted credentials, you can console.log it and get it from the terminal)
2) open the dev-tools: https://developer.chrome.com/docs/devtools/network/
3) inspect the response from the server and try to get debug it without using react code.
in google chrome
Have you inserted your values into these variables?
const clientId = "MY_SHOPIFY_API_KEY";
const redirectUri = "MY_REDIRECT_URI";
Yes, I used the client id in the app credentials section. I have it as "MY_SHOPIFY_API_KEY" in order to not post my actual key on here.
This is an accepted solution.
1) open "loginUrl" in google chrome (with your already inserted credentials, you can console.log it and get it from the terminal)
2) open the dev-tools: https://developer.chrome.com/docs/devtools/network/
3) inspect the response from the server and try to get debug it without using react code.
in google chrome