OAuth before any other steps occur fail

Authentication & Access
1

I have a shopify app which is getting rejected due to oAuth not being called before anything else.

As per their code, I have made sure that I have my auth as explained but nothing worked on production for me. I am also using react for my frontend.

The error that I get from the shopify team
Your app must immediately authenticate using OAuth before any other steps occur. Merchants should not be able to interact with the user interface (UI) before OAuth.

Below is the code for my index.js. Not sure what am I doing wrong?

// @ts-check
import path, { join } from "path";
import fs, { readFileSync,writeFileSync } from "fs";
import express from "express";
import cors from "cors";

import multer from "multer";
import serveStatic from "serve-static";

import shopify from "./shopify.js";



var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, '${process.cwd()}/uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now()+file.originalname)
    }
  })
 
  const fileFilter=(req, file, cb)=>{
   if(file.mimetype ==='image/jpeg' || file.mimetype ==='image/jpg' || file.mimetype ==='image/png'){
       cb(null,true);
   }else{
       cb(null, false);
   }
  }

 
 const upload = multer({ dest: join('uploads/') });

const PORT = parseInt(
  process.env.BACKEND_PORT || process.env.PORT || "3000",
  10
);

const STATIC_PATH =
  process.env.NODE_ENV === "production"
    ? `${process.cwd()}/frontend/dist`
    : `${process.cwd()}/frontend/`;

const app = express();

// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: PrivacyWebhookHandlers })
);

// If you are adding routes outside of the /api path, remember to
// also add a proxy rule for them in web/frontend/vite.config.js
app.use("/api/*", shopify.validateAuthenticatedSession());
app.use(express.json());


app.get(shopify.config.auth.callbackPath, shopify.auth.callback(), async (req, res, next) => {
    const client = new shopify.api.clients.Rest({
        session: res.locals.shopify.session,
    })
    const accessToken = client.session.accessToken
    saveToOwnDatabase(acessToken);
})



app.get("/api/products/count", async (_req, res) => {
  const countData = await shopify.api.rest.Product.count({
    session: res.locals.shopify.session,
  });
  res.status(200).send(countData);
});

app.get("/api/collections/123456", async (_req, res) => {
  try {
    const getProduct = await shopify.api.rest.Collection.find({
      session: res.locals.shopify.session,
        id: 123456,
    });
    res.status(200).send(getProduct);
  } catch (error) {
    console.error("Error fetching product:", error);
    res.status(500).send("Internal Server Error");
  }
});

app.get("/api/getconfigsetting", async (_req, res) => {
  try {
   
    const client = new shopify.api.clients.Rest({
                session: res.locals.shopify.session,
              })
    
    let clientId = shopify.api.config.apiKey;
    let token = client.session.accessToken;           
    
    //saveToOwnDatabase(acessToken);

    res.status(200).send({'clientId':clientId,'token':token});
  } catch (error) {
    console.error("Error fetching token:", error);
    res.status(500).send("Internal Server Error");
  }
});


app.use(shopify.cspHeaders());
app.use(serveStatic(STATIC_PATH, { index: false }));

app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => {
  return res
    .status(200)
    .set("Content-Type", "text/html")
    .send(readFileSync(join(STATIC_PATH, "index.html")));
});

app.listen(PORT);
2

Just a suggestion, but the new Managed Installation feature in the Shopify CLI makes it so that Shopify handles OAuth for you and you can skip this code entirely.

You can enable it in the shopify.app.toml file, and after enabling it merchants will be forwarded to your normal App Home URL but already authenticated.

Then you’ll just need to verify the session token to ensure they are logged in.

But if you want to continue with your own OAuth handshake implementation, it would really help to know more details.

I wonder if perhaps your app’s home URL is configured to open the home page and not the OAuth handshake.

3

give you give a log screenshot and the partner app config screenshot？