# Session Token The API for interacting with session tokens. ### Using a session token with fetch() ```jsx import {useEffect} from 'react'; import { reactExtension, Banner, useApi, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const {sessionToken} = useApi(); useEffect(() => { async function queryApi() { // Request a new (or cached) session token from Shopify const token = await 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(); }, [sessionToken]); return ( <Banner>See console for API response</Banner> ); } ``` ```js import { extension, Banner, BlockStack, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {sessionToken}) => { async function queryApi() { // Request a new (or cached) session token from Shopify const token = await sessionToken.get(); console.log(token); const apiResponse = await fetchWithToken(token); // Use your response console.log(apiResponse); } function fetchWithToken(token) { const result = fetch( 'https://myapp.com/api/session-token', { headers: { Authorization: `Bearer ${token}`, }, }, ); return result; } queryApi(); root.appendChild( root.createComponent(Banner, { title: 'Session Token Extension', }), ); }, ); ``` ## StandardApi The base API object provided to `purchase` extension targets. ### Docs_Standard_SessionTokenApi ### sessionToken The session token providing a set of claims as a signed JSON Web Token (JWT). The token has a TTL of 5 minutes. If the previous token expires, this value will reflect a new session token with a new signature and expiry. Refer to [session token examples](/docs/api/checkout-ui-extensions/apis/session-token) for more information. ### SessionToken ### get Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself. ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The API for interacting with session tokens. ### 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. > Caution: > Your app server can only trust the claims within the session token. It cannot use the token to trust the entire HTTP request. See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) for details. ### Session token claims ```json { // 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>" } ``` ## useSessionToken Returns a the session token API object. ### UseSessionTokenGeneratedType Provides access to session tokens, which can be used to verify token claims on your app's server. #### Returns: SessionToken export function useSessionToken< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): SessionToken { return useApi<Target>().sessionToken; } ### SessionToken ### get Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself. ## Related - [Targets](/docs/api/checkout-ui-extensions/targets) - [Components](/docs/api/checkout-ui-extensions/components) - [Configuration](/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The API for interacting with session tokens. ### 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. > Caution: > Your app server can only trust the claims within the session token. It cannot use the token to trust the entire HTTP request. See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) for details. ### Session token claims ```json { // 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>" } ```