Invalid client_id

Retired Boards Appdev Authentication
1

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 (
    
      {!loggedIn ? (
        
      ) : (
        

You are logged in with Shopify.

      )}
    

  );
};

export default ShopifyLogin;

The error:

IMG_3743.jpg
IMG_3743.jpg1170×692 32.2 KB

2

Have you inserted your values into these variables?

const clientId = “MY_SHOPIFY_API_KEY”;
const redirectUri = “MY_REDIRECT_URI”;

3

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.

4

  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