Unable to Install app on development store

[raultoks-peppy]

I created an app using shopify cli , on trying to open the shareable app URL i get the message -"You don't have this app installed" on loop. Doing the same process on another partner account and the test store associated with it works. I have installed other apps previously on this partner account as well before following the same steps. Attaching picture of the screen I am directed to on opening the URL, clicking the install button keeps loading the same page.

 

[noticemeshoplfy]

In the same boat, noticed there's a loop when I use development stores to test production apps, although the problem is inconsistently replicated (some stores are fine) (some stores are not). Has there been any word from shopify on this?

[raultoks-peppy]

No help yet. 

[ottero]

Had the same issue. Tried deleting the app and then creating a new one with a different name, but that did not help. Seems to be an issue with the store. I created a new development store for testing and that worked.

Before I got this issue, I removed the app from the test store. Maybe that causes problems?

[PickyArtist]

I'm having the same issue.

my workaround is using this URL and redirect to the install page

https://*****.ngrok.io/auth?shop=***.myshopify.com

[zamson]

Had the same issue when attempting to reinstall an app. Can confirm @PickyArtist solution is working, just copy the URL that the browser is hitting before the redirect and hit that URL directly with the browser.

[ottero]

Thanks for the workaround, but it doesn't work for me sadly. Not sure what the issue is.

[Paul_vd_Dool]

Hitting the callback URL directly, as mentioned further above, didn't work for me as well.
I'm having this issue since the admin url changed from slug.myshopify.com to admin.shopify.com.
I will try to contact Partner Support to see if they know anything about it.

[Paul_vd_Dool]

I fixed it, for me at least.

The issue was in the redirect to the auth URL. This URL.

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={client_id}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}

I build my app using NextJS and used App Bridge redirect like this:

index.tsx

import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

export default function Home() {

  const app = useAppBridge();
  const redirect = Redirect.create( app );

  useEffect( () => {
    if ( typeof window !== "undefined" && window.location ) {
      // construct auth url
      const authUrl = `https://${query.shop}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}&state=${nonce}`;
      redirect.dispatch( Redirect.Action.REMOTE, authUrl );
    }
  }, [] );

}

I tried a version where I use the newer useNavigation hook but that resulted in the same loop.

import { useNavigation } from "@shopify/app-bridge-react";

export default function Home() {

  const navigation = useNavigation();

  useEffect( () => {
    if ( typeof window !== "undefined" && window.location ) {
      // construct auth url without slug.myshopify.com/admin part
      const authUrl = `/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}&state=${nonce}`;
      navigate( authUrl );
    }
  }, [] );

}

The solution for me was to replace the redirect with a simple Javascript redirect.

export default function Home() {

  useEffect( () => {
    if ( typeof window !== "undefined" && window.location ) {
      // construct auth url
      window.location.href = `https://${query.shop}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}&state=${nonce}`;
    }
  }, [] );

}

I hope this helps one of you as well.

[polguixe]

Also experiencing the same.

[polguixe]

@Paul_vd_Dool in your solution, how do you do define the `redirect_uri`and the `state`?

Cheers,

[Paul_vd_Dool]

The redirect uri is the url of my callback endpoint. I've got that defined in my environment variables, but you could also hardcode it.

The state is a nonce (unique key) that I generate and which I check against on my callback endpoint.

export default function Home() {

  useEffect( () => {
    if ( typeof window !== "undefined" && window.location ) {
      const redirectUri = process.env.NEXT_PUBLIC_SHOPIFY_AUTH_CALLBACK_URL;
      const nonce = generateNonce();
      window.location.href = `https://${query.shop}/admin/oauth/authorize?client_id=${apiKey}&scope=${scopes}&redirect_uri=${redirectUri}&state=${nonce}`;
    }
  }, [] );

}

[raultoks-peppy]

Will give this a shot, atm creating a new development store seemed the quicker way to go the app installs fine on the new store I created associated with the same partner account.

[Paul_vd_Dool]

My earlier solution gave issues where it would not connect correctly because the embedded iframe was not escaped correctly.

Shopify had temporarily reversed the admin.shopify.com thing and was back on store.myshopify.com. But now it's admin.shopify.com again and it's the same damn issue.
An infinite loop and it doesn't just happen with dev stores. It happens with live stores as well.

[Paul_vd_Dool]

I figured I should change how I do authorization in my NextJS app.
I'm currently refactoring based on an example by Gil Greenberg.
https://github.com/Checkout-Blocks/Shopify-App-Examples/tree/ff3af20190462ab0af100f4c1e02dd52f6e27be...

[raultoks-peppy]

their code even makes errors in generating the correct URL, they've used sloppy string manipulation on that front it seems and is pretty error prone.

[raultoks-peppy · Accepted solution]

Just an update marking this as closed- Dealing with the session storage and making sure that the redirect URLs are correct resolved everything.

[peterbamist984]

I faced a similar issue with the Shopify CLI Development  app. However, I managed to resolve it by dealing with the session storage and ensuring the redirect URLs were correct. After making these adjustments, everything started working fine.

[CarmineT]

Non sure there is a general solution and this happening with remix as well as.

[CarmineT]

If your app is not ambeded and you are using Remix,  try to comment this line unstable_newEmbeddedAuthStrategy    in Shopify.server.js

because that resolved for me the issue and I was able to install the app into my Test store finally.

This feature seems be enabled by default for embeded apps but cause indeed this issue for not embeded app.

https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#enabling-this-new-str...