How to get access token in node.js outside shopify app?

Question

I have a code for fetching the accessToken from Shopify API and fetching products and stocks with this authorization.

require('dotenv').config();
require('isomorphic-fetch');
const Shopify = require('shopify-api-node');

const apiKey = process.env.CLIENT_ID;
const apiSecret = process.env.API_SECRET;
const storeUrl = process.env.STORE_URL;
const scopes = process.env.SCOPES;
const redirectUrl = "https://graph-plenty-leaf-prior.trycloudflare.com/api/auth/callback";

const accessTokenUrl = `https://${apiKey}:${apiSecret}@${storeUrl}/admin/oauth/access_token`;
const installApprovalUrl = `https://${storeUrl}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUrl}`;

async function getAccessToken() {
  const response = await fetch(installApprovalUrl);
  console.log('response', response);
  const res = await fetch(accessTokenUrl);
  console.log('res', res);
}

async function fetchProducts(accessToken) {
  const productsUrl = `https://${apiKey}:${accessToken}@${storeUrl}/admin/api/2023-04/products.json`;
  const response = await fetch(productsUrl);
  const data = await response.json();
  return data.products;
}

async function fetchProductStocks(productId, accessToken) {
  const productUrl = `https://${apiKey}:${accessToken}@${storeUrl}/admin/api/2023-04/products/${productId}.json`;
  const response = await fetch(productUrl);
  const data = await response.json();
  return data.product.variants.map((variant) => ({
    variantId: variant.id,
    variantTitle: variant.title,
    stockQuantity: variant.inventory_quantity,
  }));
}

async function main() {
  try {
    const accessToken = await getAccessToken();
    console.log('accessToken', accessToken);
    // const accessToken = "shpua_8b69ed7a11917efb185a43a74ee60c27";
    const products = await fetchProducts(accessToken);
    console.log('Products:', products);

    if (products.length > 0) {
      const firstProduct = products[0];
      const stocks = await fetchProductStocks(firstProduct.id, accessToken);
      console.log('Stocks:', stocks);
    }
  } catch (error) {
    console.error
  }
}

main().catch(console.error);

But with this token const accessToken = "shpua_8b69ed7a11917efb185a43a74ee60c27"; I can fetch products and stocks. I got this token from session storage in shopify app backend.

Now I want to get this access token from shopify API. With my current code, the logs of response and res look like below.

I printed installApprovalUrl.

https://xianjin-development-store.myshopify.com/admin/oauth/authorize?client_id=ca0b8f857f9c5754b23d4bc0618733de&scope=read_orders,write_products&redirect_uri=https://graph-plenty-leaf-prior.trycloudflare.com/api/auth/callback

If I follow this link, get to this page.

In my situation, how can get the accessToken? How can I fix this code?

Answer 1

Having read shopify references more and more, I found that in my case, it is impossible to do the oauth authentication, where I obtain a token, inside not the shopify app but inside a different web application.

I was going to write a stock management saas application. It is not only for shopify but also for different ecommerce systems so it cannot be only a Shopify app. My concern was : I want people who own Shopify store is to be able to create an account on my web SaaS app (separate from the shopify admin panel). And then inside my saas web app there should be a button which says connect to Shopify. Click on this should obtain the token.

So I am going to plant a button, e.g., "connector app" button in my saas app, then it will redirect to shopify admin dashboard, we will have accessToken, store it to database through the app, and finally saas will fetch that token using the script above. As my current shopify app is embed one, I am going to have a card with this button that prompts them to login->redirect to my saas platform.

I hope my answer would help other guys who might have same concerns in the future.