I tried almost all options all I need to know if I am doing anythignwrong?? I have use command shopify app dev and that is generating preview url directly then in another powershell I have use shopify app deploy after changing url in shopify.app.toml url???
Please help me to understand how can I crate this custom app. Every time I get stuck here
Hey @Ritu23 ,
From your screenshot, it doesn’t look like the issue is with shopify app dev or shopify app deploy itself. The 401 (Unauthorized) errors usually indicate an authentication or app configuration issue.
I’d recommend checking:
That the application_url in shopify.app.toml matches your current preview URL.
That your Allowed redirection URLs are updated.
That your environment variables (SHOPIFY_API_KEY, SHOPIFY_API_SECRET, etc.) match your app configuration.
If the preview URL changed, try reinstalling the app so the new configuration is applied.
Could you also share your shopify.app.toml (without any secrets) and let us know exactly where it gets stuck? For example, does the OAuth flow fail, or does the embedded app simply load a blank page? That should help narrow down the root cause.
Thank You !
# Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration
client_id = "dc34d225591095d78f8acbb917295060"
name = "regional-policy-app"
application_url = "https://little-mandate-convenience-thread.trycloudflare.com"
embedded = true
[build]
automatically_update_urls_on_dev = false
[webhooks]
api_version = "2026-10"
[[webhooks.subscriptions]]
uri = "/webhooks/app/scopes_update"
topics = [ "app/scopes_update" ]
[[webhooks.subscriptions]]
uri = "/webhooks/app/uninstalled"
topics = [ "app/uninstalled" ]
[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "write_metaobject_definitions,write_metaobjects,write_products"
[auth]
redirect_urls = [ "https://little-mandate-convenience-thread.trycloudflare.com/api/auth" ]
direct_api_mode = "online"
[product.metafields.app.demo_info]
type = "single_line_text_field"
name = "Demo Source Info"
description = "Tracks products created by the Shopify app template for development"
[product.metafields.app.demo_info.access]
admin = "merchant_read_write"
[metaobjects.app.example]
name = "Example"
description = "An example metaobject definition created by this template"
[metaobjects.app.example.access]
admin = "merchant_read_write"
[metaobjects.app.example.fields.title]
name = "Title"
type = "single_line_text_field"
required = true
[metaobjects.app.example.fields.description]
name = "Description"
type = "multi_line_text_field"
This is my current issue and
PS C:\xampp\htdocs\regional-policy-app> shopify app dev
╭─ info ────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Using shopify.app.toml for default values: │
│ │
│ • Org: est │
│ • App: regional-policy-app │
│ • Dev store: custom-dev-store-app.myshopify.com │
│ • Update URLs: No │
│ │
│ You can pass `--reset` to your command to reset your app configuration. │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
19:39:50 │ React Router │ Running pre-dev command: "npm exec prisma generate"
19:39:50 │ app-preview │ Preparing dev preview on custom-dev-store-app.myshopify.com
19:39:50 │ graphiql │ GraphiQL server started on port 3457
19:39:50 │ proxy │ Proxy server started on port 57085
19:39:53 │ app-preview │ ✅ Ready, watching for changes in your app
19:39:53 │ app_access │ │ Access scopes auto-granted: write_metaobject_definitions, write_metaobjects, write_products
19:39:53 │ app_home │ └ Using URL: https://little-mandate-convenience-thread.trycloudflare.com
19:39:58 │ React Router │ Prisma schema loaded from prisma\schema.prisma
19:39:58 │ React Router │ Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"
19:39:58 │ React Router │
19:39:58 │ React Router │ 2 migrations found in prisma/migrations
19:39:58 │ React Router │
19:39:58 │ React Router │
19:39:58 │ React Router │ No pending migrations to apply.
19:40:01 │ React Router │ ⚠️ Future Flag Warning: Route middleware support is changing in React Router v8.
19:40:01 │ React Router │ You can use the `future.v8_middleware` flag to opt in early.
19:40:01 │ React Router │ -> https://reactrouter.com/v7/upgrading/future#futurev8_middleware
19:40:01 │ React Router │ ⚠️ Future Flag Warning: Route module splitting behavior is changing in React Router v8.
19:40:01 │ React Router │ You can use the `future.v8_splitRouteModules` flag to opt in early.
19:40:01 │ React Router │ -> https://reactrouter.com/v7/upgrading/future#futurev8_splitroutemodules
19:40:01 │ React Router │ ⚠️ Future Flag Warning: Vite Environment API usage is changing in React Router v8.
19:40:01 │ React Router │ You can use the `future.v8_viteEnvironmentApi` flag to opt in early.
19:40:01 │ React Router │ -> https://reactrouter.com/v7/upgrading/future#futurev8_viteenvironmentapi
19:40:01 │ React Router │ ⚠️ Future Flag Warning: Request handling behavior is changing in React Router v8.
19:40:01 │ React Router │ You can use the `future.v8_passThroughRequests` flag to opt in early.
19:40:01 │ React Router │ -> https://reactrouter.com/v7/upgrading/future#futurev8_passthroughrequests
19:40:01 │ React Router │ ⚠️ Future Flag Warning: Data request URL formats are changing in React Router v8.
19:40:01 │ React Router │ You can use the `future.v8_trailingSlashAwareDataRequests` flag to opt in early.
19:40:01 │ React Router │ -> https://reactrouter.com/v7/upgrading/future#futurev8_trailingslashawaredatarequests
19:40:02 │ React Router │ ➜ Local: http://localhost:57088/
19:40:02 │ React Router │ ➜ Network: use --host to expose
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
19:47:07 │ React Router │ {
19:47:07 │ React Router │ SHOPIFY_API_KEY: 'dc34d225591095d78f8acbb917295060',
19:47:07 │ React Router │ SHOPIFY_API_SECRET: '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',
19:47:07 │ React Router │ SHOPIFY_APP_URL: 'https://periodic-booking-punch-formerly.trycloudflare.com',
19:47:07 │ React Router │ SCOPES: 'write_metaobject_definitions,write_metaobjects,write_products'
19:47:07 │ React Router │ }
19:47:07 │ React Router │ [shopify-api/INFO] version 13.1.0, environment React Router
19:47:27 │ React Router │ [shopify-app/INFO] Redirecting login request to
https://null/oauth/install?client_id=dc34d225591095d78f8acbb917295060 | {shop: admin.shopify.com}
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ (d) Dev status │ (a) App info │ (s) Store info │ (q) Quit
✅ Ready, watching for changes in your app
› (p) Open app preview
› (g) Open GraphiQL (Admin API)
Preview URL: https://admin.shopify.com/store/custom-dev-store-app/apps/dc34d225591095d78f8acbb917295060?dev-console=show
GraphiQL URL: http://localhost:3457/graphiql?key=973539fc51cfc9595a12ee011e82946c53bf693b4a97437f803dbe2eb5ac8459
This is the preview url I already set with shopify.app.toml
I think I can see a likely cause from your logs.
Your shopify.app.toml is using https://little-mandate-convenience - thread.trycloudflare.com
SHOPIFY_APP_URL=https://periodic-booking-punch-formerly.trycloudflare.com
Those URLs should match.
The biggest clue is this line:
Redirecting login request to https://null/oauth/install
That isn’t expected and usually indicates that the OAuth configuration isn’t receiving the correct app URL, which could explain the 401 Unauthorized errors.
I’d recommend checking your .env file (especially SHOPIFY_APP_URL) and making sure it matches the application_url in shopify.app.toml. Then restart shopify app dev and reinstall the app.
If the issue persists, could you also share your shopify.server.ts (or shopify.ts) file? That would help confirm whether the authentication configuration is causing the problem.
Hi In the Shopify.app.toml I did set the
application_url and redirect_urls and also put automatically_update_urls_on_dev = false so can you guide me how this Shopify_app_url keep changing on every time I run app and how to resolve this error???
Thanks for confirming. If application_url, redirect_urls, and automatically_update_urls_on_dev = false are already configured correctly, then your shopify.app.toml doesn’t appear to be the problem.
What still stands out is that your logs show a different SHOPIFY_APP_URL, and the OAuth flow is redirecting to:
That isn’t expected and suggests the app is getting its URL from somewhere else or the authentication configuration isn’t resolving it correctly.
Could you share your .env file (without any secrets) and your shopify.server.ts (or shopify.ts) file? That should help identify where SHOPIFY_APP_URL is being set and why the OAuth redirect is resolving to null.
This is .env file
SHOPIFY_API_KEY=dc34d225591095d78f8acbb917295060
SHOPIFY_API_SECRET=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
SCOPES=write_metaobject_definitions,write_metaobjects,write_products
This is shopify.server.js
import “@shopify/shopify-app-react-router/adapters/node”;
import {
ApiVersion,
AppDistribution,
shopifyApp,
} from “@shopify/shopify-app-react-router/server”;
import { PrismaSessionStorage } from “@shopify/shopify-app-session-storage-prisma”;
import prisma from “./db.server”;
console.log({
SHOPIFY_API_KEY: process.env.SHOPIFY_API_KEY,
SHOPIFY_API_SECRET: process.env.SHOPIFY_API_SECRET,
SHOPIFY_APP_URL: process.env.SHOPIFY_APP_URL,
SCOPES: process.env.SCOPES,
});
const shopify = shopifyApp({
apiKey: process.env.SHOPIFY_API_KEY,
apiSecretKey: process.env.SHOPIFY_API_SECRET || “”,
apiVersion: ApiVersion.July26,
scopes: process.env.SCOPES?.split(“,”),
appUrl: process.env.SHOPIFY_APP_URL || “”,
authPathPrefix: “/auth”,
sessionStorage: new PrismaSessionStorage(prisma),
distribution: AppDistribution.AppStore,
future: {
expiringOfflineAccessTokens: true,
},
…(process.env.SHOP_CUSTOM_DOMAIN
? { customShopDomains: \[process.env.SHOP_CUSTOM_DOMAIN\] }
: {}),
});
export default shopify;
export const apiVersion = ApiVersion.July26;
export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
export const authenticate = shopify.authenticate;
export const unauthenticated = shopify.unauthenticated;
export const login = shopify.login;
export const registerWebhooks = shopify.registerWebhooks;
export const sessionStorage = shopify.sessionStorage;
I agree. A 401 error is usually an authentication or configuration issue rather than a problem with the Shopify CLI itself. Double-checking the app URLs, OAuth redirect URLs, API credentials, and reinstalling the app after any configuration changes often resolves it. Sharing the exact error logs would also make it easier to pinpoint the cause.
Thanks for confirming, Sophia. Looking at the logs Ritu shared, one detail still stands out to me:
Redirecting login request to https://null/oauth/install
That isn’t a typical OAuth redirect and suggests the app isn’t resolving its authentication configuration correctly.
Since the shopify.app.toml settings appear to be correct, I’d be interested in seeing the .env file (without any secrets) and the shopify.server.ts (or shopify.ts) file. That should help determine why the app is resolving the OAuth URL to null.
Hi @sophia24, I have already shared my shopify.app.toml, .env, my response after giving command shopify app dev and shopify.server.js above and sharing the links here. You can check on this links
[type or paste code here](https://community.shopify.com/t/facing-an-issue-while-creating-an-app/651689/3?u=ritu23)
https://community.shopify.com/t/facing-an-issue-while-creating-an-app/651689/4?u=ritu23
https://community.shopify.com/t/facing-an-issue-while-creating-an-app/651689/6?u=ritu23
https://community.shopify.com/t/facing-an-issue-while-creating-an-app/651689/8?u=ritu23
Just a sidenote, you should not share a full details of your .env file and your API key and secret. You will change it later but still.
Those ad-hoc tunnel url is buggy. It didn’t work for me earlier.
instead of the one-off URL shopify app dev prints each time. Using cloudflare tunnel is recommended for long term. But little difficult to set it up .
Ngrok tunnels is very easy. You can get a permanent domain for free
In the dashboard of ngrok, hit the New Domain button
Put that fixed URL in shopify.app.toml and set automatically_update_urls_on_dev = false.
client_id = "your_client_id_here"
name = "your-app-name"
application_url = "https://your-stable-tunnel-url.com"
embedded = true
[access_scopes]
scopes = "write_products,read_orders"
use_legacy_install_flow = false
[auth]
redirect_urls = [ "https://your-stable-tunnel-url.com/api/auth/callback" ]
[webhooks]
api_version = "2025-01"
[build]
automatically_update_urls_on_dev = false
dev and deploy in the same terminal sessionOne more thing, seconding what @Laza_Binaery said: change your API secret. It is leaked.