Disabled `install` button while installing custom app

[Tiwa_Ojo]

Hello,

I am trying to integrate the Storefront and Admin API into my non-embedded app. I am using the authorization grant flow to obtain my session for my graphql queries.

Upon installing my custom app via the flow, I am presented with the following below, where the install button is disabled with no logs/messages to help(I replaced the apps and org name).

My server is currently being tunneled through Cloudflare for oauth and valid ssl purposes.

I am able to install my app via an installation link from the partners dashboard, but this process breaks my application as my /auth and /auth/callback endpoints are not called by Shopify. Attached below is my app config.

# Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration

client_id = ""
name = "My-App"
application_url = "https://my-app.trycloudflare.com"
embedded = false

[build]
automatically_update_urls_on_dev = true
dev_store_url = "my-store.myshopify.com"

[webhooks]
api_version = "2026-01"

[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "read_orders,read_products,read_product_listings,read_metaobjects,read_inventory,write_metaobjects"

[auth]
redirect_urls = [
  "https://my-app.trycloudflare.com/auth",
  "https://my-app.trycloudflare.com/auth/callback",
  "https://my-app.trycloudflare.com/auth/shopify/callback",
  "https://my-app.trycloudflare.com/session-token-bounce",
]

[pos]
embedded = false

APIVersion: 2025-10

I appreciate any assistance into this matter.

[JordanFinners]

Shopify managed installations is the default now which is what your app will be defaulting to.

Enable Shopify-managed installations for your app

You’ll need to set legacy install property in your TOML App configuration

[Tiwa_Ojo]

Thanks for the suggestion @JordanFinners. Unfortunately this did not resolve the issue. I also deployed my server application on a proper domain, but the issue still remains.

In addition to the above, I encountered the following on my store at My-App. · Apps and sales channels · App development · Shopify

I am growing increasingly confused about how to set up and deploy a custom app with my server-side application. Below are the steps I currently follow via the authorization code grant flow:

• Create app on Dev Dashboard
• Sync with local environment via shopify app config link
• Update TOML config(Disabled `install` button while installing custom app) with use_legacy_install_flow=true
• Deploy via shopify app deploy --config=shopify.app.toml
• Using the browser, navigate to https://<server-application-url>/auth?shop=my-shop to redirect to shop for authorization

I’m not sure what step I am missing. The use of Shopify’s managed installation will not provide my server-side application with the appropriate shop name and session, as I can only trigger my app installation/auth flow outside of Shopify via the tokenExchange OAuth process.

[Tiwa_Ojo]

Hey @JordanFinners, do you have any recommendations on troubleshooting steps i can follow to resolve this issue?

I have also tried using Client Credentials to no avail.

[JordanFinners]

Hey Tiwa,

Sorry I’m pretty confused here, so I think lets start again.
What kind of app are you building here, because the image you shared is of legacy custom apps which are different to apps developed in the dev dashboard and those that are going to be available on the app store?

[Tiwa_Ojo]

My sincerest apologies for the confusion. I’ve really just been trying anything/everything possible to resolve this error.

I am trying to build a custom non embedded app that uses the Shopify Admin and Storefront GraphQL API’s within my server side application written in typescript. I need to create a Session with a valid accesstoken to authenticate my requests.

My use of the authentication code grant flow and client credentials to install the app have not yielded expected results.

My distribution method in my partners dashboard is custom with a valid domain defined in the domain page (*.myshopify.com)

[JordanFinners]

And where did you create the app, because the screenshot you provided in this post, is not where you create these apps Disabled `install` button while installing custom app - #3 by Tiwa_Ojo

Just want to be super clear on this

[Tiwa_Ojo]

I created the app via the dev dashboard and configured custom distribution via the partners dashboard. The screenshot from my original post was a poor attempt at creating a custom app after my attempt at creating one through the dev dashboard and syncing with the Shopify cli did not yield my expected results. The legacy custom app created via the deprecated method(image in Disabled `install` button while installing custom app - #3 by Tiwa_Ojo) has been uninstalled and is no longer being utilized.

I would like to use one of the following methods suggested in the github docs for performing oauth

[JordanFinners]

Okay so if you’ve done that you will need to follow these steps listed under custom non embedded app.

Authentication and authorization

It looks like you can use Shopify managed installs, but then you need to use Authorization code grant to get an offline/online access token for your app to use.

[Tiwa_Ojo]

Authorization Code Grant is what I am currently using. Attached below is a sample of my script:

import '@shopify/shopify-api/adapters/cf-worker';
import { shopifyApi } from '@shopify/shopify-api';

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    // extract the pathname from the request URL
    const url = new URL(request.url);
    const params = new URLSearchParams(url.search);

    const api = shopifyApi({
      apiKey: env.SHOPIFY_API_KEY,
      apiSecretKey: env.SHOPIFY_API_SECRET,
      scopes: env.SHOPIFY_SCOPES,
      hostScheme: "https", //url.protocol.includes('https') ? 'https' : 'http',
      // ...other configurations like hostName, sessionStorage, etc.
    });

    let shopifyGraphqlClient;

    switch (url.pathname) {
      case "/auth":
        const shop =
          api.utils.sanitizeShop(`${params.get("shop")}.myshopify.com`, true) ||
          "";

        // Reference: https://github.com/Shopify/shopify-app-js/blob/main/packages/apps/shopify-api/docs/reference/auth/begin.md
        const res = await api.auth.begin({
          isOnline: false,
          rawRequest: request,
          // This should be the same as the "Redirect URL" in your app setup in the Partner Dashboard
          callbackPath: "/auth/callback", // `${url.origin}/auth/callback`,
          shop: shop,
        });

        return res;
      case "/auth/callback":
        // Reference: https://github.com/Shopify/shopify-app-js/blob/main/packages/apps/shopify-api/docs/reference/auth/callback.md
        const callback =
          (await api.auth.callback) <
          Headers >
          {
            rawRequest: request,
          };

        console.debug(callback.session);

        // TODO: Create GraphqlClient, and add session token to KV storage
        shopifyGraphqlClient = new api.clients.Graphql({
          session: callback.session,
        });

        // The callback returns some HTTP headers, but you can redirect to any route here
        return new Response("", {
          status: 302,
          headers: [...callback.headers, ["Location", "/"]],
        });
    }

    // Example GraphQL query using the shopifyGraphqlClient
    const ProductVariantsListDocument = /* GraphQL */ `
      query ProductVariantsList(
        $first: Int!
        $after: String
        $query: String
        $sortKey: ProductVariantSortKeys
        $reverse: Boolean
      ) {
        productVariants(
          first: $first
          after: $after
          query: $query
          sortKey: $sortKey
          reverse: $reverse
        ) {
          edges {
            cursor
            node {
              id
              title
              sku
            }
          }
          pageInfo {
            hasNextPage
          }
        }
      }
    `;
    const response =
      (await shopifyGraphqlClient.request) <
      ProductVariantsListQuery >
      (ProductVariantsListDocument,
      {
        variables: {
          first,
          after,
          query,
          sortKey,
          reverse,
        },
      });

    console.log(response);
  },
};

The results I get is below

Furthermore, I have tried installing via incognito mode on different browsers(Edge & Firefox) and using client credentials. Neither allows me to install my app

I am using Cloudflare Workers and developing within a docker container with --net= host.

[JordanFinners]

Can you deploy the cloudflare worker? Or run it locally?

Development & testing

I suspect that its likely because of a https / http issue.

However when you see the error page you screenshotted. Before you try install your app also open developer tools in the browser and check the URLs its calling match the documentation and what you expected also if you copy the url in there will be a more helpful error message you can look at.

[Tiwa_Ojo]

I have tried both approaches and got the same results. My observations are below:

• Using cloudflare locally via the cloudflared tunnel. I did notice the protocol changes to http:. Hence why I used https in my hostScheme when setting up the shopifyApi. I get a redirect url whitelist error page if I change the hostScheme to http
• Upon deploying to the *.workers.dev domain the protocol to the redirect_uri was https and the console/network activity are the same as when developing locally via cloudflared tunnels.

A sample console log and network HAR file are provided below

• Browser Console Log
• Browser Network HAR File

[JordanFinners]

I had a skim through the files and they look fine.
In your fetch flow when you query they products you need to still return a response to the client.

Also its not included in your files, but when you get the error message from Shopify, have a look in the URL of the page as often an error message is included in the query params

Also check the store you are installing it on is valid

[Tiwa_Ojo]

@JordanFinners

In your fetch flow when you query they products you need to still return a response to the client.

• The products query was simply an example of how I intend to use the access token via the callback session object to make a query to the admin api. The session object is a required parameter to creating a valid graphql client

@JordanFinners

Also its not included in your files, but when you get the error message from Shopify, have a look in the URL of the page as often an error message is included in the query params

• To my observation, neither the url of the page nor the network logs in the dev console indicated any errors

@JordanFinners

Also check the store you are installing it on is valid

• The store is a basic store with a valid subscription but not grouped with my dev stores. Example attached below where TargetStore is the store I intend on installing my custom app and the others are dev stores