Merge pull request #2025 from Shopify/fix-theme-dev-auth

Fix theme dev re-authentication

Author: alvaro-shopify

.changeset/hot-schools-give.md

@@ -0,0 +1,6 @@
+---
+'@shopify/cli-kit': patch
+'@shopify/theme': patch
+---
+
+Fix theme dev re-authentication

packages/app/src/cli/services/dev.ts

@@ -316,7 +316,15 @@ function devThemeExtensionTarget(
   return {
     prefix: 'extensions',
     action: async (stdout: Writable, stderr: Writable, signal: AbortSignal) => {
-      await execCLI2(['extension', 'serve', ...args], {adminSession, storefrontToken, token, stdout, stderr, signal})
+      await execCLI2(['extension', 'serve', ...args], {
+        store: adminSession.storeFqdn,
+        adminToken: adminSession.token,
+        storefrontToken,
+        token,
+        stdout,
+        stderr,
+        signal,
+      })
     },
   }
 }

packages/cli-kit/assets/cli-ruby/lib/project_types/theme/cli.rb

@@ -20,6 +20,7 @@ class Command < ShopifyCLI::Command::ProjectCommand
     subcommand :Share, "share", Project.project_filepath("commands/share")
     subcommand :LanguageServer, "language-server", Project.project_filepath("commands/language_server")
     subcommand :Console, "console", Project.project_filepath("commands/console")
+    subcommand :Token, "token", Project.project_filepath("commands/token")
   end
   ShopifyCLI::Commands.register("Theme::Command", "theme")
 

packages/cli-kit/assets/cli-ruby/lib/project_types/theme/commands/token.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Theme
+  class Command
+    class Token < ShopifyCLI::Command::SubCommand
+      options do |parser, flags|
+        parser.on("--admin ADMIN_TOKEN") { |token| flags[:admin_token] = token }
+        parser.on("--sfr STOREFRONT_RENDERER_TOKEN") { |token| flags[:sfr_token] = token }
+      end
+
+      def call(_args, _name)
+        admin_token = options.flags[:admin_token]
+        sfr_token = options.flags[:sfr_token]
+        ShopifyCLI::DB.set(shopify_exchange_token: admin_token) if admin_token
+        ShopifyCLI::DB.set(storefront_renderer_production_exchange_token: sfr_token) if sfr_token
+      end
+    end
+  end
+end

packages/cli-kit/src/public/node/ruby.ts

@@ -8,7 +8,6 @@ import {getEnvironmentVariables} from './environment.js'
 import {isSpinEnvironment, spinFqdn} from './context/spin.js'
 import {firstPartyDev} from './context/local.js'
 import {pathConstants} from '../../private/node/constants.js'
-import {AdminSession} from '../../public/node/session.js'
 import {outputContent, outputToken} from '../../public/node/output.js'
 import {isTruthy} from '../../private/node/context/utilities.js'
 import {coerceSemverVersion} from '../../private/node/semver.js'
@@ -25,8 +24,10 @@ export const MinWdmWindowsVersion = '0.1.0'
 const shopifyGems = envPaths('shopify-gems')
 
 interface ExecCLI2Options {
-  // Contains token and store to pass to CLI 2.0, which will be set as environment variables
-  adminSession?: AdminSession
+  // Contains store to pass to CLI 2.0 as environment variable
+  store?: string
+  // Contains token for admin access to pass to CLI 2.0 as environment variable
+  adminToken?: string
   // Contains token for storefront access to pass to CLI 2.0 as environment variable
   storefrontToken?: string
   // Contains token for partners access to pass to CLI 2.0 as environment variable
@@ -56,8 +57,8 @@ export async function execCLI2(args: string[], options: ExecCLI2Options = {}): P
   const env: NodeJS.ProcessEnv = {
     ...currentEnv,
     SHOPIFY_CLI_STOREFRONT_RENDERER_AUTH_TOKEN: options.storefrontToken,
-    SHOPIFY_CLI_ADMIN_AUTH_TOKEN: options.adminSession?.token,
-    SHOPIFY_SHOP: options.adminSession?.storeFqdn,
+    SHOPIFY_CLI_ADMIN_AUTH_TOKEN: options.adminToken,
+    SHOPIFY_SHOP: options.store,
     SHOPIFY_CLI_AUTH_TOKEN: options.token,
     SHOPIFY_CLI_RUN_AS_SUBPROCESS: 'true',
     SHOPIFY_CLI_RUBY_BIN: rubyExecutable(),

packages/cli-kit/src/public/node/session.ts

@@ -43,18 +43,20 @@ ${outputToken.json(scopes)}
  *
  * @param scopes - Optional array of extra scopes to authenticate with.
  * @param password - Optional password to use.
+ * @param forceRefresh - Optional flag to force a refresh of the token.
  * @returns The access token for the Storefront API.
  */
 export async function ensureAuthenticatedStorefront(
   scopes: string[] = [],
   password: string | undefined = undefined,
+  forceRefresh = false,
 ): Promise<string> {
   if (password) return password
 
   outputDebug(outputContent`Ensuring that the user is authenticated with the Storefront API with the following scopes:
 ${outputToken.json(scopes)}
 `)
-  const tokens = await ensureAuthenticated({storefrontRendererApi: {scopes}})
+  const tokens = await ensureAuthenticated({storefrontRendererApi: {scopes}}, process.env, forceRefresh)
   if (!tokens.storefront) {
     throw new BugError('No storefront token found after ensuring authenticated')
   }

packages/theme/src/cli/commands/theme/console.ts

@@ -44,6 +44,6 @@ export default class Console extends ThemeCommand {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     setTimeout(() => openURL(authUrl), 2000)
 
-    return execCLI2(['theme', 'console'], {adminSession, storefrontToken})
+    return execCLI2(['theme', 'console'], {store, adminToken: adminSession.token, storefrontToken})
   }
 }

packages/theme/src/cli/commands/theme/dev.ts

@@ -11,9 +11,7 @@ import {
 import {Flags} from '@oclif/core'
 import {globalFlags} from '@shopify/cli-kit/node/cli'
 import {execCLI2} from '@shopify/cli-kit/node/ruby'
-import {AbortController} from '@shopify/cli-kit/node/abort'
-import {AdminSession, ensureAuthenticatedStorefront, ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
-import {sleep} from '@shopify/cli-kit/node/system'
+import {ensureAuthenticatedStorefront, ensureAuthenticatedThemes} from '@shopify/cli-kit/node/session'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 
 export default class Dev extends ThemeCommand {
@@ -102,18 +100,18 @@ export default class Dev extends ThemeCommand {
     'notify',
   ]
 
-  // Tokens are valid for 120m, better to be safe and refresh every 110min
+  // Tokens are valid for 120 min, better to be safe and refresh every 110 min
   ThemeRefreshTimeoutInMs = 110 * 60 * 1000
 
   /**
    * Executes the theme serve command.
-   * Every 110 minutes, it will refresh the session token and restart the server.
+   * Every 110 minutes, it will refresh the session token.
    */
   async run(): Promise<void> {
     showDeprecationWarnings(this.argv)
     let {flags} = await this.parse(Dev)
     const store = ensureThemeStore(flags)
-    const adminSession = await ensureAuthenticatedThemes(store, flags.password, [], true)
+    const adminSession = await refreshTokens(store, flags.password)
 
     if (!flags.theme) {
       const theme = await new DevelopmentThemeManager(adminSession).findOrCreate()
@@ -131,31 +129,20 @@ export default class Dev extends ThemeCommand {
       return
     }
 
-    let controller = new AbortController()
+    renderLinks(store, flags.theme!, flags.host, flags.port)
 
     setInterval(() => {
-      outputDebug('Refreshing theme session token and restarting theme server...')
-      controller.abort()
-      controller = new AbortController()
+      outputDebug('Refreshing theme session tokens...')
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.execute(adminSession, flags.password, command, controller, true)
+      refreshTokens(store, flags.password)
     }, this.ThemeRefreshTimeoutInMs)
-
-    renderLinks(store, flags.theme!, flags.host, flags.port)
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.execute(adminSession, flags.password, command, controller, false)
+    await execCLI2(command, {store, adminToken: adminSession.token})
   }
+}
 
-  async execute(
-    adminSession: AdminSession,
-    password: string | undefined,
-    command: string[],
-    controller: AbortController,
-    shouldWait: boolean,
-  ) {
-    if (shouldWait) await sleep(3)
-    const storefrontToken = await ensureAuthenticatedStorefront([], password)
-    return execCLI2(command, {adminSession, storefrontToken, signal: controller.signal})
-  }
+async function refreshTokens(store: string, password: string | undefined) {
+  const adminSession = await ensureAuthenticatedThemes(store, password, [], true)
+  const storefrontToken = await ensureAuthenticatedStorefront([], password)
+  await execCLI2(['theme', 'token', '--admin', adminSession.token, '--sfr', storefrontToken])
+  return adminSession
 }

packages/theme/src/cli/commands/theme/pull.test.ts

@@ -33,7 +33,8 @@ describe('Pull', () => {
 
     function expectCLI2ToHaveBeenCalledWith(command: string) {
       expect(execCLI2).toHaveBeenCalledWith(command.split(' '), {
-        adminSession,
+        adminToken: adminSession.token,
+        store: 'example.myshopify.com',
       })
     }
 

packages/theme/src/cli/commands/theme/pull.ts

@@ -73,6 +73,6 @@ export default class Pull extends ThemeCommand {
     const flagsToPass = this.passThroughFlags(flags, {allowedFlags: Pull.cli2Flags})
     const command = ['theme', 'pull', flags.path, ...flagsToPass]
 
-    await execCLI2(command, {adminSession})
+    await execCLI2(command, {store, adminToken: adminSession.token})
   }
 }