Invalid client_id

[IgorPietrzak]

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:

[Speedup_guru]

Have you inserted your values into these variables?

const clientId = "MY_SHOPIFY_API_KEY";
const redirectUri = "MY_REDIRECT_URI";

[IgorPietrzak]

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.

[Speedup_guru · 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