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

Highlighted
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. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
45 8 14

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

0 Likes
Highlighted
Tourist
4 0 2

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

0 Likes
Highlighted
Tourist
13 0 1

@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? 

0 Likes
Highlighted
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.

1 Like
Highlighted
Tourist
13 0 1

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?

0 Likes
Highlighted
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.

1 Like
Highlighted
Tourist
13 0 1

Sounds good. 

Thanks again.

0 Likes