How to get session token in shopify appbridge react v4

How to get session token in shopify appbridge react v4

AlexLew
Shopify Partner
1 0 0
import createApp from "@shopify/app-bridge";
import { getSessionToken } from "@shopify/app-bridge/utilities";

const app = createApp({
  apiKey: "12345",
});


const sessionToken = await getSessionToken(app);


How can i get this session token in App Bridge React v4?

Replies 8 (8)

ericute
Shopify Partner
63 5 14

I'm having the same issue too after upgrading to v4 just to get the Modal working.

ericute_0-1710174724359.png

 

BrainStation23
Shopify Partner
413 62 60

Hello,

@Shopify/app-bridge/utilities package is deprecated  https://www.npmjs.com/package/@shopify/app-bridge-utils

Instead of using this, You find everything on app state https://www.npmjs.com/package/@shopify/app-bridge

App State

Once the app is set up, you can access additional details and the state of the app at any time by making async call app.getState():

app.getState().then((state) => { console.info('App State:', state); });

Brain Station 23 PLC (Mail: js.sbu@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps
ericute
Shopify Partner
63 5 14

Okay, so I can't install shopify/app-bridge and shopify/app-bridge-react without shopify/app-bridge-utils.

 

Here's what I have in my package.json.

ericute_0-1710294282998.png

 

Now I am getting a Module Not Found error:

ericute_1-1710294595337.png

 

ericute
Shopify Partner
63 5 14

I got it wrong. There's no @Shopify/app-bridge v4, that's for app-bridge-react. 

3ux1n3
Shopify Partner
14 0 2

in app bridge react 4 with the app bridge JS tag added to your index.html you don't need that session token since all fetch calls are wrapped and add that token automatically however if you still need it you can use this : 
https://shopify.dev/docs/api/app-bridge-library/apis/id-token

where shopify is the variable u get this way : 
const shopify = useAppBridge()

sjwebsolutions
Shopify Partner
1 0 0

Thankyou , it helps me to resolve my issue but can you help me with 

$response->getBody {"errors":"[API] Invalid API key or access token (unrecognized login or wrong password)"}
i got  $request->all() []
 

Jando3
Shopify Partner
1 0 0

did you ever get this resolved? I'm having the same issue with the remix app template?

mcohen
Shopify Partner
9 0 0
I use this:

 

const shopify = useAppBridge();

await shopify.idToken() -> gives me an auth token

 


Then in the backend I validate that token, however I find out it expires quickly, I wonder if there's a way to refresh it.