Invalid client_id

Solved

Invalid client_id

IgorPietrzak
Shopify Partner
5 0 0

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:

 

IMG_3743.jpg

Accepted Solution (1)
Speedup_guru
Shopify Partner
18 2 3

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

Regards,Pavel Iakushenkov, Speedup.guru

View solution in original post

Replies 3 (3)

Speedup_guru
Shopify Partner
18 2 3

 

Have you inserted your values into these variables?

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

Regards,Pavel Iakushenkov, Speedup.guru
IgorPietrzak
Shopify Partner
5 0 0

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
Shopify Partner
18 2 3

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

Regards,Pavel Iakushenkov, Speedup.guru