Shopify App Tokens: Online vs. Offline - A Developer's Dilemma and Solution

Decoding Shopify App Tokens: Online vs. Offline

Hey everyone, let's dive into a common head-scratcher for Shopify app developers: managing online and offline tokens. I recently saw a great discussion in the Shopify Community about this, and I wanted to share some insights that came out of it. The original poster, @NicholasByDesign, was wrestling with how to best use useOnlineTokens in their app, and it sparked some really helpful advice.

The Challenge: One App, Two Token Types

The core issue, as @NicholasByDesign explained, was building an admin app that heavily relied on useOnlineTokens: true and the associated_user object. This is great for the admin UI, but then the app needed to interact with third-party services, which typically require offline tokens. The question was: how do you juggle both without tearing your hair out?

It's a tricky situation because, as @NicholasByDesign pointed out, the shopify.server.js file's static nature makes it difficult to dynamically switch between useOnlineTokens true/false at runtime. You're seemingly stuck with one or the other.

The Solution: Embrace Both, But Separately

Thankfully, @oscprofessional chimed in with a really elegant solution. The key takeaway? Don't try to toggle useOnlineTokens at runtime. It's not designed for that. Instead, embrace a strategy that leverages both online and offline tokens strategically.

Here's the recommended approach:

1. Initialize the app with useOnlineTokens: true. This sets the foundation for your admin UI, which benefits from the associated_user data.
2. Capture and store the offline token during install/reauth. A database like MongoDB is perfect for this.
3. Use online tokens exclusively for the admin UI. This is where you need that associated_user information.
4. Use offline tokens for everything else: third-party services, webhooks, cron jobs, etc.
5. Crucially, don't re-initialize the app. The app should remain initialized with useOnlineTokens: true.
6. Choose which token to use on a per-request basis, not based on some global app configuration.

In essence, you're initializing your app to primarily use online tokens but also capturing and storing the offline token for other use cases. Then, within your code, you decide which token to use based on the specific task at hand. This avoids the need to constantly re-initialize the app, which isn't supported and can lead to scalability issues.

Dealing with Database-less Environments

@NicholasByDesign also mentioned they were running on Netlify without a database initially, using a cookie session adapter. While this can work, storing the access token in MongoDB, as they were planning, is definitely a more robust and scalable solution in the long run, especially as your app grows and handles more data.

Why This Approach Works

This approach is powerful because it separates concerns. Your admin UI gets the benefits of online tokens (access to associated_user), while your background tasks and third-party integrations get the stability and longevity of offline tokens. By managing the tokens separately, you avoid the headache of trying to dynamically reconfigure your app at runtime.

It's all about choosing the right tool for the job. Online tokens are great for interactive user sessions, while offline tokens are ideal for automated tasks that don't require a user to be actively logged in. Understanding this distinction is key to building scalable and reliable Shopify apps.

So, if you're wrestling with the online/offline token dilemma, remember: embrace both, manage them separately, and don't try to toggle useOnlineTokens on the fly. It's a bit of a mind-shift, but it'll save you a lot of headaches in the long run. Good luck!