App Bridge CDN Script Causes 404 During App Installation

Authentication & Access
1

Hi everyone,
I’m running into an issue while trying to submit my app for Shopify review.

To pass the checklist item:

“Use the latest App Bridge script loaded from the Shopify CDN”

I added the following tags to the <head> of my index.html:

<meta name="shopify-api-key" content="xxxxxxx" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

Once I added those tags, the checklist item was marked as complete — so that part worked.
But after this, the app installation no longer works.

Before adding the script, users would access the app URL during installation, and my frontend would run as expected. It would call my backend API to check if the app was already installed, and either show the initial app content or redirect to the installation URL.

Now, after adding the App Bridge script tag, my frontend doesn’t even load. It crashes immediately and shows a 404 error page.

The weird part?
If I remove the script tag, install the app, and then re-add the tag — everything works fine.

But since this tag is required for app review, I need to figure out how to fix this before I can submit.

This issue is really critical for my team :cry:

Extra context:
I’m not using Shopify CLI or Remix.
This is a custom React project built from scratch, and switching frameworks isn’t an option.

If anyone has experienced this or has ideas on what might be causing the issue, I’d really appreciate the help.

Thanks!

Please note that this message was originally written in Korean and translated into English.
If any part of the message is unclear or sounds awkward, feel free to let me know.

image
image1770×1180 69 KB

2

What’s happening in your network log? If you debug it in the browser? :thinking:

Are you using Shopify managed installs or manual?

3

@JordanFinners Hello!

I’m not using Shopify Managed Installs or the manual configuration via .toml — this is a fully manual installation flow.

The app works fine when it’s already installed, but when the app is not yet installed and the installation flow should be triggered, no logs are printed at all… :sob:

In other words, when installation is required, the request never even reaches my app’s URL, so I’m unable to debug anything.

Before using the App Bridge CDN script, the user would land on my app’s page first, and if installation was needed, they would be redirected to the OAuth flow.

After adding the CDN script, that part is entirely skipped and a 404 error is returned instead.

I’m seriously going crazy trying to figure out what’s causing this… :sob:

4

Please can you open your browser network tab and from there you should be able to follow what is happening. If you’re able to share that or see what is happening in there?

Are you embedded app in Shopify?
If so you cannot do the authorization flow as the Caution box here indicates Implement authorization code grant manually

5

image
image1136×889 211 KB

image
image1166×890 210 KB

This is an embedded app, and everything was working fine as I followed the official documentation during development.

However, after adding the CDN script tag to comply with the app review policy, this issue started occurring…!

There’s a lot of activity in the network tab, so I’ve only captured the beginning and end of the flow.
From what I can see, there doesn’t seem to be any major issue — all status codes are in the 200 range.

Also, there are no error logs shown in the console.

6

Sorry can you filter it down to just requests made to your app?

I think you are falling into this issue here, it seems all new apps must be using managed installs and so you can’t do the auth flow you are currently doing

7

Wow, thank you so much!

After reading the Managed Install documentation you shared, I created a .toml file and deployed the app — and it worked!
The installation process no longer throws an error, it redirects properly to the installation link, and the installation completes successfully.

However, the app UI doesn’t load.
I’m seeing the following log in the browser console — do you happen to know what it means?

Interestingly, the app works fine on the development store where I had installed it previously (before adding the CDN script).
But this issue occurs only on the new development store, where I installed the app after deploying it with the .toml file and including the CDN script.

4o

image

image
image1388×1233 28.2 KB

8

Ah, never mind — I figured it out.
The issue was caused by some leftover code on my server that was still trying to manually redirect to the app installation link.

Now that the installation flow is handled properly through the CDN script and Managed Install, I think I can safely remove that logic.

Thank you so much again for your help! :folded_hands:

1 Like
9

@JordanFinners Would it be okay if I asked one more question?

The installation process is now working via the Managed Install using the .toml file, but after the app is installed, I’m not receiving any callback to my server.

In my .toml file, I’ve set the following:

toml

[auth]
redirect_urls = [
  "https://my-server.com/oauth/callback",
]

But I’m not sure what else I need to configure beyond that.

Previously, when I used the manual installation flow, I would include the redirect URL directly in the installation link, and everything worked fine.

But with this new flow, I’m not sure how or when the redirect to my callback URL is supposed to happen.
Any guidance would be greatly appreciated :folded_hands:

10

The oauth redirect won’t happen as the managed installs, so it won’t hit your server this way.

When your app loads you’ll need to do whatever logic in the GET to your app or if you are using a statically hosted frontend trigger an API call to your server to do your logic

1 Like
12

To get the access token please see the guides here

1 Like
13

That solved the issue. Thanks a lot — I really appreciate your help! :folded_hands: