I’m trying to implement the Shopify Customer Account API following the Shopify documentation here. I’m currently working on the authorization step, where I need to redirect a customer to the login page. However, I’m encountering a 400 (Bad Request) error with the message: client_id invalid.
My setup:
import express from "express";
import dotenv from "dotenv";
import { generateState } from "./utils/index.js";
dotenv.config();
const app = express();
const port = process.env.PORT || 5000;
const clientId = process.env.CLIENT_ID;
const scope = process.env.SCOPE;
const redirectUri = process.env.REDIRECT_URI;
const shopId = process.env.SHOP_ID;
const state = await generateState();
app.get("/auth", (req, res) => {
const authorizationRequestUrl = new URL(
`https://shopify.com/${shopId}/auth/oauth/authorize`
);
authorizationRequestUrl.searchParams.append("scope", scope);
authorizationRequestUrl.searchParams.append("client_id", clientId);
authorizationRequestUrl.searchParams.append("response_type", "code");
authorizationRequestUrl.searchParams.append("redirect_uri", redirectUri);
authorizationRequestUrl.searchParams.append("state", state);
// authorizationRequestUrl.searchParams.append("nonce", "<nonce>");
res.redirect(authorizationRequestUrl);
});
app.get("/", (req, res) => {
res.send("server running on port 5000");
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
// code for generateState function
export async function generateState() {
const timestamp = Date.now().toString();
const randomString = Math.random().toString(36).substring(2);
return timestamp + randomString;
}
Error
When I navigate to /auth, I get the following error: 400 (Bad Request) with error: “client_id invalid”
What i have tried
Verified that process.env.CLIENT_ID contains the correct client ID. Checked that the URL being constructed looks correct. Ensured that my environment variables are properly loaded.
The error “client_id invalid” indicates that Shopify is not recognizing the client ID you’re providing in your authorization request. Here are some additional steps you can take to diagnose and fix this issue:
1. Double-Check Client ID:
Location: Make sure you’re looking at the correct client ID. The client ID for the Customer Account API is different from the Admin API client ID. You can find the Customer Account API client ID in your Shopify app’s settings under “APIs and auth.”
Case Sensitivity: Ensure that the client ID is entered exactly as it appears in your Shopify app settings, including case sensitivity.
2. Environment Variable Loading:
Verify Loading: Confirm that your environment variables are loaded correctly before your code attempts to access them. You can use console.log(process.env.CLIENT_ID) within your /auth route to check if the variable is loaded and has the correct value.
Dotenv Path: If you’re using a separate .env file, ensure it’s located in the root directory of your project or in a directory configured for dotenv to find it.
3. URL Construction:
URL Encoding: Double-check that the client ID is encoded correctly when added to the URL search parameters. Use encodeURIComponent(clientId) before adding it to the authorizationRequestUrl.searchParams.append('client_id', clientId) .
4. Shop Domain:
Shopify Subdomain: Verify that you’re using the correct Shopify subdomain in the URL. It should be in the format https://<shop-name>.myshopify.com .
Shopify Test Store: Try using your Shopify test store’s client ID to rule out any issues with your development store.
Shopify Documentation: Refer to the official Shopify documentation on Customer Account API authorization for detailed guidance: [invalid URL removed]
By following these steps and carefully checking your client ID, environment variables, URL construction, and Shopify subdomain, you should be able to resolve the “client_id invalid” error and successfully redirect customers to the Shopify login page.