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

Retired Boards Appdev Tools
1

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

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.

2

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

1 Like
3

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

4

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?

1 Like
5 
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 (
            
        );
    }
}

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
6

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?

7

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
8

Sounds good.

Thanks again.

9

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?

10

Hello, did you found a solution?

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

11

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

12

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.