search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

Invalid Host Origin #296

Closed nikunj-crawlapps closed 7 months ago

nikunj-crawlapps commented 7 months ago

Describe the bug

Getting Invalid Host Origin when trying to access sub-domain.

Expected behaviour

I am trying to release my new updated app as beta release so merchant can use both app based on the preference.

I have two setup of projects for both based on the preference. merchant able to switch over to app.

Setup Details:

Existing App: https://main-domain.com New App (Beta): https://v2.main-domain.com

Contextual information

A new version of the app has been developed and set up on a subdomain (https://v2.main-domain.com/) to ensure a smooth transition for users. However, the "Invalid Host Origin" error is impeding the use of the new app with the subdomain.

Packages and versions

List the relevant packages you’re using, and their versions. For example:

jzazove commented 7 months ago

The latest version of App Bridge supports subdomains using appOrigins. Here are the docs: https://shopify.dev/docs/api/app-bridge-library/apis/config#config-propertydetail-apporigins

nikunj-crawlapps commented 6 months ago

@jzazove I updated my app bridge version but issue remains same.

jzazove commented 6 months ago

And what values show when you use shopify.config.appOrigins ?

nikunj-crawlapps commented 6 months ago

@jzazove it's showing all the app origins which I have added.

I am using session token for authenticate APIs call. but can you please help me with to how can get session token?

Currently I am using @shopify/app-bridge: ^3.7.9

Here is My code snippet which I am using for api authentication.

import { getSessionToken } from "@shopify/app-bridge/utilities/session-token/session-token";

const shopifConfig = {
    apiKey: shopify.config.apiKey,
    host: shopify.config.host,
    forceRedirect: true
}
const app = createApp(shopifConfig);

instance.interceptors.request.use(function (config) {
    return getSessionToken(app) // requires a Shopify App Bridge instance
        .then((token) => {
            // Append your request headers with an authenticated token
            config.headers.Authorization = `Bearer ${token}`
            config.headers['X-Project'] = "new";
            return config
        })
})
jzazove commented 6 months ago

I would recommend these guides for authentication: Shopify managed installation Token exchange getting started

nikunj-crawlapps commented 6 months ago

Hello @jzazove, I have allowed origin for app-bridge still having same issue.

Here is my Shopify app bridge config object:

{
    "config": {
        "locale": "en-IN",
        "apiKey": "...694q",
        "appOrigins": [
            "https://memstaging.simplee.best",
            "https://mem.staging.simplee.best"
        ],
        "shop": "abc.myshopify.com",
        "host": "...FnaW5n"
    },
    "protocol": {},
    "origin": "https://admin.shopify.com",
    "environment": {
        "mobile": false,
        "embedded": true,
        "pos": false
    },
    "modal": {},
    "pos": {
        "cart": {}
    },
    "saveBar": {},
    "scanner": {},
    "toast": {},
    "ready": {}
}

Here is my app-bridge error:

{
    "name": "AppBridgeError",
    "message": "APP::ERROR::INVALID_ORIGIN",
    "action": {
        "group": "Error",
        "payload": {
            "message": "Message origin 'https://memstaging.simplee.best' does not match app origin 'https://mem.staging.simplee.best'.",
            "type": "APP::ERROR::INVALID_ORIGIN"
        },
        "type": "APP::ERROR::INVALID_ORIGIN"
    },
    "type": "APP::ERROR::INVALID_ORIGIN"
}

What you please guide me, what can be potential issue?

henrytao-me commented 6 months ago

A new version of the app has been developed and set up on a subdomain (https://v2.main-domain.com/) to ensure a smooth transition for users. However, the "Invalid Host Origin" error is impeding the use of the new app with the subdomain.

I am not really sure what your flow here. May I have your current appId and new appId?

nikunj-crawlapps commented 6 months ago

@henrytao-me @jzazove Is it not possible through the single app? I am using same app for both setup. based on the customer preference I wanna load specific domain which servers different version of app.

henrytao-me commented 6 months ago

Is it not possible through the single app?

Correct. It is not possible. You need to use different paths for different app UI instead of different subdomain unfortunately.

nikunj-crawlapps commented 6 months ago

@henrytao-me Thank you for guide me. I have some query can please guide me on this as well.

Is there any other approach to release beta for merchants?

Are we need to verify the new app if we follow two app approach? Can we provide our new version app without verifying from the Shopify? as of our old app already verified and on Shopify store.

henrytao-me commented 6 months ago

@nikunj-crawlapps You can setup your new app under the same domain as the current one but use different path, ex: https://my-app-domain.com/v2/...

Otherwise, the new app approach has to go through verify again.