User Details and POS Location ID from App Bridge Library

App Bridge
1

Hello, I’m building a POS/Admin Embedded App(Extensions) using Ionic+Vue(TypeScript).

import { getSessionToken } from '@shopify/app-bridge-utils';
import createAppBridge from '@shopify/app-bridge';

// Initializing the app bridge
const createShopifyAppBridge = async () => {
  try {
  const host = new URLSearchParams(location.search).get('host') || "";
  const shop = new URLSearchParams(location.search).get('shop') || "";

  const apiKey = JSON.parse(process.env.VUE_APP_SHOPIFY_SHOP_CONFIG)[shop].apiKey;  
  const shopifyAppBridgeConfig = {
    apiKey: apiKey || '',
    host: host || '',
    forceRedirect: true,
  };
    
  const appBridge = createAppBridge(shopifyAppBridgeConfig);
  
  return Promise.resolve(appBridge);      
  } catch (error) {
    return Promise.reject(error);
  }
}

App is running on Admin and POS well, but I’m unable to get the User details and POS Location ID from app-bridge.

But the Global Variable Shopify is Undefined in my app.

2

Hey again @Banibrata_Manna, happy to take a look at this with you.

To get user details and POS location data, you’ll need to use the lowercase global like this (a bit more info here):

// For user data:
const user = await shopify.user();

// For POS location (when in POS context):
if (shopify.environment.pos) {
  const location = await shopify.pos.location();
}

Both of these methods return Promises, so you’d want to just make sure you’re handling them asynchronously.

Since you’re using TypeScript, you might also want to install the type definitions to avoid TypeScript errors in case that’s causing issues:

npm install --save-dev @shopify/app-bridge-types

One thing to check is that the App Bridge script is fully loaded before you try to access the shopify global. You can verify this by checking if typeof shopify !== 'undefined' before making any API calls.

If you need a bit more help, I’m happy to dig into this for sure, could you share what version of App Bridge you’re expecting to use (the CDN URL suggests you’re on the latest), what error messages you’re seeing in the console, and what the output is when you run console.log(window.shopify) in your app?

Hope this helps - let me know if I can dig into this more with you, happy to help out.

4

Hey @Alan_G , I got the shopify global object from useAppBridge of @shopify/app-bridge-react library, I can log it successfully but when I do: await shopify.user() and run my app on admin then promise stays in pending state forever.

const createShopifyAppBridge = async () => {
  try {
  const host = new URLSearchParams(location.search).get('host') || "";
  const shop = new URLSearchParams(location.search).get('shop') || "";

  const apiKey = JSON.parse(process.env.VUE_APP_SHOPIFY_SHOP_CONFIG)[shop].apiKey;  
  const shopifyAppBridgeConfig = {
    apiKey: apiKey || '',
    host: host || '',
    forceRedirect: true,
  };
    
  const appBridge = createAppBridge(shopifyAppBridgeConfig);
  
  return Promise.resolve(appBridge);      
  } catch (error) {
    return Promise.reject(error);
  }
}

// TODO: Move this to Utils
const getSessionTokenFromShopify = async (appBridgeConfig: any) => {
  try {
    if (appBridgeConfig) {
      const shopifySessionToken = await getSessionToken(appBridgeConfig);
      shopify = useAppBridge();

     const user = await shopify.user();

     console.log("This is User : ", user);      

      return Promise.resolve(shopifySessionToken);
    } else {
      throw new Error("Invalid App Config");
    }
  } catch (error) {
    return Promise.reject(error);
  }
}

image
image691×117 11.4 KB

The app gets stuck at await shopify.user() because the promise couldn’t be resolved.

5

Thanks @Banibrata_Manna, that is strange. Can you let me know which version of the App Bridge packages you’re using? (npm list @shopify/app-bridge) and are you seeing any console errors before the promise hangs (please share if so!)?

I think my next step here is to touch base with the product team to investigate further, but just wanted to follow up in case it’s potentially a version mismtach issue. Hope to speak soon!

6

Hey @Alan_G

This is what I got on npm list @shopify/app-bridge

+-- @shopify/app-bridge-utils@3.5.1
| `-- @shopify/app-bridge@3.7.10 deduped
`-- @shopify/app-bridge@3.7.10
7

Hey @Banibrata_Manna, thanks for checking that.

I think I see the issue here. It looks like you’re using App Bridge v3.7.10 but using v4 API patterns ( for example, the shopify.user() method is only available in v4).

For v3, you’ll need to use [getState()] instead: const state = await [appBridge.getState(); const user = state.staffMember;

There’s a bit more info here: Methods

The lowercase shopify global doesn’t exist in v3, which is likely why your promise is hanging - if you want to use those newer API patterns, you’d need to upgrade to App Bridge v4. Let me know if this helps get you unstuck, hope this helps!

8

Hey @Alan_G , I’ve tried these earlier but didn’t help, will try again, Thanks

Though my project is on Ionic, Vue and Typescript only, I still have to use the app-bridge-react library as shown below:

"@shopify/app-bridge": "^3.7.10",
"@shopify/app-bridge-react": "^4.2.0",
"@shopify/app-bridge-utils": "^3.5.1",
"@shopify/app-bridge-types": "^0.1.0"

And I’m not using remix framework or shopify CLI at all. Isn’t there a way to do all these without using the react library.

My App is basically a PW App which takes the session token from app bridge and passes it to my backend to validate and syncs the user’s ID from the token to backend and issues a a JWT Token that will be used for any future API calls to my backend. And Using the issued JWT token user logs in other PW Apps and use that same token for it’s api calls.

The app is working fine, I just don’t have the POS user details and POS Location ID and I only need them to complete my flow.

And my Project Plan doesn’t include remix-framework, Shopify CLI and just use the app-bridge-library and if it is really needed then I can also keep the app-bridge-react library.

Though I’ll try with latest dependency of shopify-app-react library.

Please help me out here, POS User and Location is the only thing left in my plan, rest is done.

Once Again, Thanks!!

10

Hey @Banibrata_Manna, thanks for the additional context. I think I’ve figured out what’s happening here after chatting with our App Bridge team.

The issue does appear to be related to how you’re mixing different major of our App Bridge libraries, which is causing the promise to hang. It looks like you’ve got v3 of app-bridge and v4 of app-bridge-react, and they’re essentially just not working well together there.

When you’re using useAppBridge() from the React library (v4), it’s expecting to work with App Bridge v4’s global shopify object, but you’re initializing with v3’s createAppBridge.

Our recommendation at the moment would be to upgrade everything to v4. You’d want to update your dependencies to something like:

"@shopify/app-bridge-react": "^4.2.0"

Then, uninstall @shopify/app-bridge from your project and instead of using createAppBridge from v3, you’d initialize using the v4 CDN approach. Add this script tag to your HTML as the first script in <head>:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

You can read more about App Bridge CDN here: App Bridge

After that, you should be able to access the POS user and location directly:

const user = await shopify.user();
const location = await shopify.pos.location(); // when in POS context

Let me know if you run into any issues with the upgrade, happy to help troubleshoot as always!

11

Hey @Alan_G , Thanks,

I got the user and location from the legacy API, from the app state.

Here is another blocker I’m having, Please Help!

12

Glad to hear things are solved for you on this one @Banibrata_Manna - I’ll take a look at your other question there and see if I can help there as well :slight_smile: