Skip to main content

Session Token
API

The API for interacting with session tokens.

The base API object provided to this and other customer-account extension targets.

required

Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.

Was this section helpful?

Using a session token with fetch()

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect} from 'preact/hooks';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
useEffect(() => {
async function queryApi() {
// Request a new (or cached) session token from Shopify
const token =
await shopify.sessionToken.get();
console.log('sessionToken.get()', token);

const apiResponse = await fetchWithToken(
token,
);
// Use your response
console.log('API response', apiResponse);
}

function fetchWithToken(token) {
const result = fetch(
'https://myapp.com/api/session-token',
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
return result;
}

queryApi();
}, []);

return (
<s-banner>
See console for API response
</s-banner>
);
}

The contents of the token are signed using your shared app secret. The optional sub claim contains the customer's gid if they are logged in and your app has permission to read customer accounts. For example, a loyalty app that needs to check a customer's point balance can use the sub claim to verify the customer's account.

Was this section helpful?

Session token claims

{
// Shopify URL
"dest": "store-name.myshopify.com",
// The Client ID of your app
"aud": "<clientId>",
// When the token expires. Set at 5 minutes.
"exp": 1679954053,
// When the token was actived
"nbf": 1679953753,
// When the token was issued
"iat": 1679953753,
// A unique identifier (a nonce) to prevent replay attacks
"jti": "6c992878-dbaf-48d1-bb9d-6d9b59814fd1",
// Optional claim present when a customer is logged in and your app has permissions to read customer data
"sub": "gid://shopify/Customer/<customerId>"
}