Embedded app getting redirected to app url on install - embeds fine after getting installed

Embedded app getting redirected to app url on install - embeds fine after getting installed

im_asad
Tourist
4 0 2

Upon installing the app, I am being redirected to a non-embedded version. When accessing the app from the installed apps list, the app is redirecting to the embedded version. This occurs when an initial OAuth request redirect fails to escape the iframe. Refer to our Shopify App Bridge documentation.

https://screenshot.click/20-07-rzlux-ev9im.mp4 

I have used https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify to create my shopify app.

Followed the exact same steps as mentioned in the tutorial.

This is the response after getting rejected from Shopify App Approval.

Now I have tried several possible solutions to this problem.
1. Tried to initialize Shopify App Bridge using @shopify/app-bride-react

2.

Was doing ctx.redirect("/") when this problem was occurring, from an answer on forum, I redirected the app to `https://${shop}/admin/apps/${appName}`

 

const shopifyMiddleware = {
    createShopifyAuth: ({ SHOPIFY_API_KEY, SHOPIFY_API_SECRET_KEY }, db) => {
        return createShopifyAuth({
            apiKey: SHOPIFY_API_KEY,
            secret: SHOPIFY_API_SECRET_KEY,
            scopes,
            accessMode: 'offline',
            forceRedirect: false,
            async afterAuth(ctx) {
                const { shop, accessToken } = ctx.session;

                ctx.cookies.set('shopOrigin', shop, {
                    httpOnly: false,
                    secure: true,
                    sameSite: 'none'
                });

                ctx.redirect(`https://${shop}/admin/apps/${SHOPIFY_APP_NAME}?shop=${shop}`);
            },
        })
    },
    verifyRequest: () => verifyRequest()
};

 

I would appreciate if anyone could help me with this issue. I can't get my app through approval process. 

Replies 11 (11)

Trish_Ta
Shopify Staff
58 13 28

Have you tried setting `forceRedirect: true`? This will allow App Bridge to automatically redirect your app back to be embedded inside Shopify Admin.

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

im_asad
Tourist
4 0 2

Yes, I tried that too. It isn't working either. 

Souravv
Tourist
16 0 2

@im_asad wrote:

Yes, I tried that too. It isn't working either. 


I am experiencing exact same problem in my app, this issue has been raised in my app approval. 

Did you get any fix for this problem? 

im_asad
Tourist
4 0 2
import React from "react";
import App from "next/app";
import Head from "next/head";
import { Provider } from '@shopify/app-bridge-react';
import translations from '@shopify/polaris/locales/en.json';

class MyApp extends App {
    static async getInitialProps(server) {
        const { res, query } = server.ctx;
        const shopOrigin = query.shop;
        if (!shopOrigin) {
            res.writeHead(302, { Location: "/app/error" });
            res.end();
        }
        return { shopOrigin };
    }
    render() {
        const { SHOPIFY_API_KEY } = process.env;
        const { Component, pageProps, shopOrigin } = this.props;

        const config = { apiKey: SHOPIFY_API_KEY, shopOrigin };
        return (
            <React.Fragment>
                <Head>
                    <title>Insta-Connect</title>
                    <meta charSet="utf-8" />
                </Head>
                <Provider config={config} i18n={translations}>
                    <Component {...pageProps} />
                </Provider>
            </React.Fragment>
        );
    }
}

export default MyApp;

Here you go @Souravv. You can see that I am using Provider component from app bridge. On development env, you won't see any changes but on production, you'll see that you are first taken to your app url on install and then redirected to embedded version of it.
Shopify needs to improve their documentation. It took me time to realize this as it was nowhere in the documentation.

Souravv
Tourist
16 0 2

Thanks for the solution @im_asad 

I will definitely implement it, but I have one doubt if it doesn't make any difference in development environment, will it pass through the app approval process?

im_asad
Tourist
4 0 2

Yes, it will pass as the reviewer tests the app in production, I think so as they have no concern over this issue anymore after I implemented this solution.

Souravv
Tourist
16 0 2

Sounds good. 

Thanks again.

mkirilov
Visitor
2 0 0

Hello, guys I am having the same issue, but I am using Rails with HTML and a little bit of JS, could you please help me achieve this redirect?
Is there a way to test it in development, since @im_asad said that it works only in prod?


Mou_S
Visitor
1 0 0

Hello, did you found a solution? 

Im also using Rails, and have this issue, still looking for a solution...

1080
Shopify Partner
297 9 56

@Trish_Ta  Thanks for your Answers.
yes but I am still facing the same issue. I am getting Auth flow endless loop, but I can see the Access token is valid I was able to make an APi call from the postman. 

ShopifyDevSup
Shopify Staff
1453 238 501

Hey @1080

 

Just looking at the thread here, I can see that initial solution is from a few years ago. Can you share a few more details on your specific integration, including any guides you are following, examples of the issue, errors received, etc, then we can take a closer look. 

 

- Kyle G. 

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog