Storefront AccessToken accessing in theme app extension

Store Design

Topic summary

A developer is building a Theme App Extension and needs to access the Storefront Access Token to make Storefront API calls from the client-side, ideally without using a Shopify proxy.

Key recommendations provided:

  • The Storefront Access Token can be exposed client-side since it’s designed for public contexts, but permissions should be strictly limited to read-only scopes.
  • Avoid hardcoding tokens directly in theme files, especially across multiple environments.

Suggested implementation approach:

  • Pass the token through app block settings using a text field in the block’s schema
  • Inject it into JavaScript via Liquid templating: window.storefrontApiToken = "{{ settings.sf_access_token }}"

When to use Shopify App Proxy:

While not required for basic read operations, a proxy is recommended when:

  • Handling server-side authenticated API calls
  • Protecting business logic or credentials
  • Validating requests or accessing user-specific/sensitive data

The discussion remains open for further code examples or tailored solutions.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I’m working on a Theme App Extension, and I need to use the Storefront Access Token to make Storefront API calls from the storefront.

What are the different ways to expose or access the token securely within the theme extension context?

Also, is it possible to achieve this without using a Shopify proxy setup, or is a proxy the only secure option?

Any guidance or best practices would be greatly appreciated!

Thanks,
Tess

1 Like
2

Hi @Tess_12 ,

Great question! When working with a Theme App Extension and needing to use the Storefront Access Token (SFAT) for Storefront API calls directly from the storefront, there are a few important considerations around security and architecture.

Securely Accessing the Storefront Access Token

The Storefront Access Token is meant to be used in a public context, so it’s technically okay to expose it client-side. However, you should:

  • Limit the token’s permissions strictly to what you need (e.g., read-only access to products, collections, etc.).

  • Avoid embedding it directly in theme files if possible, especially if you have multiple environments (dev/stage/prod).

### Options for Providing the Token in a Theme App Extension

Here are a few approaches:

1. Exposing via theme.app.blocks with dynamic settings

You can pass the token to your extension via the app block settings or dynamic sections. Just be cautious:

json
{
“name”: “Storefront API Token”,
“settings”: [
{
“type”: “text”,
“id”: “sf_access_token”,
“label”: “Storefront API Token”
}
]
}

Use this only for tokens with limited permissions and no sensitive scopes.

2. Injecting via Liquid variables

You can inject the token using Liquid in your extension’s .liquid files:

liquid

This makes it accessible to your JS, but again, be mindful of what the token can do.

### Is a Shopify Proxy Required?

While Shopify App Proxy is not required, it is the recommended secure pattern when:

  • You need to call authenticated APIs server-side.

  • You want to keep credentials or business logic private.

  • You need to validate/verify requests before hitting Shopify APIs.

If your use case requires enhanced security (e.g., user-specific data), using a proxy endpoint through your app server is the way to go.

### Best Practices- Restrict the SFAT to read-only scopes.

  • Avoid using the token for customer-specific or sensitive data operations.

  • Use Shopify App Proxy for scenarios that require private validation or authentication logic.

Let me know if you’d like code snippets or a more tailored example — happy to help!

Best,