Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: App Bridge v2 required host parameter is missing from the OAuth confirmation redirect's query st

App Bridge v2 required host parameter is missing from the OAuth confirmation redirect's query string

dylanpierce
Shopify Partner
288 14 124

The v2 of the App Bridge was released yesterday:

https://shopify.dev/tutorials/migrate-your-app-to-app-bridge-2

However, the documentation claims that a `host` parameter will be passed as part of the query string in the request back to my API during the OAuth handshake.

The issue is that this is not the case. The query string only contains these parameters:

* hmac
* code
* shop
* state (a.k.a. the nonce)

Even the OAuth documentation doesn't mention this new parameter: https://shopify.dev/tutorials/authenticate-with-oauth#step-3-confirm-installation

I have written a test in `shopify-nextjs-toolbox` to prove that all query string parameters are passed correctly. The query string simply just doesn't have the `host` parameter that's needed to instantiate the AppBridge v2 in the frontend.

Can we have an explanation for this? Is there a special parameter we need to set at the start of the OAuth flow to tell Shopify's API that this is flow needs a `host` parameter?

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

Replies 26 (26)

dylanpierce
Shopify Partner
288 14 124

Update to everyone else following this thread.

I've spoken with a Shopify rep and they're working to fix the issue. Will update here when I have a response and confirm the fix.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

mikeastral
Tourist
5 0 4

Any news regarding this issue? From what I see the issue still remains.

ArchitechproOU
Shopify Partner
104 2 19

On our end it still remains too.

hannachen
Shopify Staff
54 8 17

Hi everyone, thank you for your patience and being one of the first to jump into upgrading. Really appreciate the fast reporting of this issue.

The fix for the missing `host` search param during auth is in and it's currently being rolled out. Some apps should start seeing it today, and more in the next couple of days.

Hanna | 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

BoxUp
Shopify Partner
38 1 15

Hi Hanna,

Suddenly, stores are unable to install our app as the signature check is failing, despite no changes on our end.

Please could you explain what's been updated exactly?

Thanks

BoxUp
Shopify Partner
38 1 15

Possibly unrelated. Working normally now...

hannachen
Shopify Staff
54 8 17

Thanks for the followup, I don't believe changes were made to `shop`, host was added on top of shop. Glad to hear that it's working properly now.

Hanna | 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

Vostario
Tourist
12 0 2

What does host mean in the query?  hostname of the App / hostname of the store?

 
 

 

 

hannachen
Shopify Staff
54 8 17

`host` url parameter is the hostname of the store, used by the App Bridge 2.0 client. It's a different version of `shop` as described in the Get and store the shop origin guide.

Hanna | 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

AurimasR
Visitor
2 0 1

Hello,

do I understand correctly that the `host` parameter is added to the whole OAuth process? Because in our app we're not using App Bridge or Embedded Apps but the installation is not working because of the failing hmac verification.

BoxUp
Shopify Partner
38 1 15

Hi @AurimasR 

Double check that you are including all parameters, other then the hmac param itself, when you create your hmac to compare to Shopify's.

I think it mentions on the documentation somewhere that parameters are subject to change, so remove the hmac param and include all else.

Thanks

AurimasR
Visitor
2 0 1

@BoxUp We were dependent on the exact parameters. But you are right, I see it is mentioned in the documentation that parameters are subject to change.

Thanks!

Michelle_C
New Member
6 0 0

Hi Hanna,

We also faced a similar issue.
Just want to ask that every time there is an update of API or params or things like that, will we be noticed via e-mails or other messages? So we are able to prevent possible problems.

And if there won't be notices, do you have any ideas that what we can do?
Thanks.

playwright-mike
Shopify Partner
72 18 33

I was struggling with this for a few days. Looks like this change is coming in 18.0.0

https://github.com/Shopify/shopify_app/pull/1241/files

 

This is what will be included in 18.0.0

https://github.com/Shopify/shopify_app/pull/1252

Playwright | Create Shopify Scripts without writing code | https://playwrightapp.com
- Was my reply helpful? Please Like and Accept Solution.

Michelle_C
New Member
6 0 0

Hi @hannachen 

We also faced a similar issue.
Just want to ask that every time there is an update of API or params or things like that, will we be noticed via e-mails or other messages? So we are able to prevent possible problems.

And if there won't be notices, do you have any ideas that what we can do?
Thanks.

manuel-platlan
Visitor
1 0 0

 We face the same problem.

Where can I find the information?  in order to solve it.

cormacncheese
Shopify Partner
11 0 0

Any update on this?

My app was rejected for this and I'm still not able to find the required 'host' param

dylanpierce
Shopify Partner
288 14 124

It appears that this issue still persists and Shopify has put the permanent fix on backlog.

As a temporary workaround - I recommend 2 things:

 

1. Using AppBridge v1 until Shopify releases a fix for this issue. Instead of using the missing `host` parameter as the instantiating string for the AppBridge, instead you can use `shopOrigin` (aka *.myshopify.com)

 

2. If for some reason you need to use AppBridge v2, unofficially the `host` parameter is just the `shopOrigin` base64 encoded. I haven't verified this myself but I've heard from a number of other developers they're using this as a workaround. However, if Shopify gets around to fixing the `host` parameter and decides to actually make it more secure by encrypting with your App's private key instead of encoding - well your authentication could break.

I would recommend v1 over using v2 until we have an official announcement and debrief over what went wrong with the v2 release. I was told back in April a fix was in the works but it's regressed or was never fixed.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

mikeastral
Tourist
5 0 4

Based on @dylanpierce I would like to add a 3 workaround I discovered on my testing stores, not sure if it works for non-testing stores, it is a little tricky, but until now it has been consistent in my testing stores.

1. After installation, every time the App is launched from the "Apps" section, the host param will be included in the incoming request params, so in this way, you can design a middleware that grabs and stores this param in a database; and then use it anytime you need it to pass it to AppBridge v2.

2. During installation, this host param is still not passed at all, so what you can do is to perform a redirect into the parent window, simulating the action of opening the App from the "Apps" section.

After installation, the behavior will be as point 1.

cormacncheese
Shopify Partner
11 0 0

Thanks for the advice.

However, my app was recently rejected stating that I needed to upgrade to AppBridge v2 so I'm a little confused what to do since v2 isn't working.

OleACF
Shopify Partner
5 0 5

Yep, we are required to upgrade to v2 by end of 2021

Accentuate Custom Fields | Undo
cormacncheese
Shopify Partner
11 0 0

How am I supposed to submit my app then if v2 isn't working yet?

(they rejected it because I was using v1)...

Vostario
Tourist
12 0 2

You can find host here:

https://example.org/some/redirect/uri?code={authorization_code}&hmac=da9d83c171400a41f8db91a95050898...

 

use it to create your hmac to compare to Shopify's  (code, host, shop, state, timestamp)

cormacncheese
Shopify Partner
11 0 0

Thank you! I was able to find the host and set the config variable

Does anyone know how to add the host param when using  the useAppBridge hook?

 

const app = useAppBridge();
     const redirectToProduct = () => {
          const redirect = Redirect.create(app);
          redirect.dispatch(
          Redirect.Action.APP,
          '/edit-products',
      );
};
 
Results in INVALID_CONFIG: host must be provided still even when host is provided in _app.js
Flafi87
Shopify Partner
11 1 6

Hello,

I am not sure if your stack is the same but I received a working workaround from a Shopify Staff.

https://community.shopify.com/c/Shopify-APIs-SDKs/Redirect-after-creating-recurring-application-char...

nextlead
Shopify Partner
4 0 2

Option #2 

 

Only if you absolutely must. But if you're going with nodejs and koa-shopify-auth, it's all handled for you and proper encoded host will be made available upon completion of the client auth process.

 

 

const params = new URLSearchParams(window.location.search);
const query = {
      host: params.get("host"),
      shop: params.get("shop")
};

// base64 encode "shop/admin" if query.host is absent
let host = query.host || btoa(`${query.shop}/admin`);

const provider = <Provider 
              config={{
                apiKey: API_KEY, 
                forceRedirect: true,
                host
              }}
            >
   // app component 
</Provider>;