Fix the issue that prevents password-protected storefronts with an ampersand & from logging in

.changeset/forty-beans-peel.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix the issue that prevents password-protected storefronts with an ampersand `&` from logging in, and improve the password prompt message to disambiguate passwords

packages/cli-kit/src/private/node/ui/components/TextPrompt.tsx

@@ -11,7 +11,7 @@ import {Box, useApp, useInput, Text} from 'ink'
 import figures from 'figures'
 
 export interface TextPromptProps {
- message: string
+ message: TokenItem
  onSubmit: (value: string) => void
  defaultValue?: string
  password?: boolean

packages/cli-kit/src/public/node/themes/urls.test.ts

@@ -1,4 +1,4 @@
-import {codeEditorUrl, storeAdminUrl, themeEditorUrl, themePreviewUrl} from './urls.js'
+import {codeEditorUrl, storeAdminUrl, storePasswordPage, themeEditorUrl, themePreviewUrl} from './urls.js'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
 import {test, describe, expect} from 'vitest'
 
@@ -42,6 +42,14 @@ describe('storeAdminUrl', () => {
  })
 })
 
+describe('storePasswordPage', () => {
+ test('returns the store password page', async () => {
+ const url = storePasswordPage(session.storeFqdn)
+
+ expect(url).toEqual('https://my-shop.myshopify.com/admin/online_store/preferences')
+ })
+})
+
 function theme(id: number, role: string) {
  return {id, role, name: `theme ${id}`} as Theme
 }

packages/cli-kit/src/public/node/themes/urls.ts

@@ -24,3 +24,7 @@ export function storeAdminUrl(session: AdminSession) {
  const store = session.storeFqdn
  return `https://${store}/admin`
 }
+
+export function storePasswordPage(store: AdminSession['storeFqdn']) {
+ return `https://${store}/admin/online_store/preferences`
+}

packages/theme/src/cli/utilities/theme-environment/storefront-password-prompt.ts

@@ -6,7 +6,8 @@ import {
  setStorefrontPassword,
 } from '../../services/local-storage.js'
 import {ensureThemeStore} from '../theme-store.js'
-import {renderTextPrompt} from '@shopify/cli-kit/node/ui'
+import {renderTextPrompt, TokenItem} from '@shopify/cli-kit/node/ui'
+import {storePasswordPage} from '@shopify/cli-kit/node/themes/urls'
 
 export async function ensureValidPassword(password: string | undefined, store: string) {
  /*
@@ -17,7 +18,18 @@ export async function ensureValidPassword(password: string | undefined, store: s
  ensureThemeStore({store})
  }
 
- let finalPassword = password || getStorefrontPassword() || (await promptPassword('Enter your store password'))
+ let finalPassword =
+ password ||
+ getStorefrontPassword() ||
+ (await promptPassword([
+ 'Enter your',
+ {
+ link: {
+ label: 'store password',
+ url: storePasswordPage(store),
+ },
+ },
+ ]))
  let isPasswordRemoved = false
 
  // eslint-disable-next-line no-await-in-loop
@@ -27,14 +39,26 @@ export async function ensureValidPassword(password: string | undefined, store: s
  isPasswordRemoved = true
  }
  // eslint-disable-next-line no-await-in-loop
- finalPassword = await promptPassword('Incorrect password provided. Please try again')
+ finalPassword = await promptPassword([
+ 'Incorrect',
+ {
+ link: {
+ label: 'store password',
+ url: storePasswordPage(store),
+ },
+ },
+ {
+ char: '.',
+ },
+ 'Please try again',
+ ])
  }
 
  setStorefrontPassword(finalPassword)
  return finalPassword
 }
 
-async function promptPassword(prompt: string): Promise<string> {
+async function promptPassword(prompt: TokenItem): Promise<string> {
  return renderTextPrompt({
  message: prompt,
  password: true,

packages/theme/src/cli/utilities/theme-environment/storefront-session.test.ts

@@ -148,10 +148,19 @@ describe('Storefront API', () => {
  )
 
  // When
- const result = await isStorefrontPasswordCorrect('correct-password', 'store.myshopify.com')
+ const result = await isStorefrontPasswordCorrect('correct-password-&', 'store.myshopify.com')
 
  // Then
  expect(result).toBe(true)
+ expect(fetch).toBeCalledWith('https://store.myshopify.com/password', {
+ body: 'form_type=storefront_password&utf8=%E2%9C%93&password=correct-password-%26',
+ headers: {
+ 'cache-control': 'no-cache',
+ 'content-type': 'application/x-www-form-urlencoded',
+ },
+ method: 'POST',
+ redirect: 'manual',
+ })
  })
 
  test('returns false when the password is incorrect', async () => {

packages/theme/src/cli/utilities/theme-environment/storefront-session.ts

@@ -17,12 +17,18 @@ export async function isStorefrontPasswordProtected(storeURL: string): Promise<b
  * If the password is correct, SFR will respond with a 302 to redirect to the storefront
  */
 export async function isStorefrontPasswordCorrect(password: string | undefined, store: string) {
+ const params = new URLSearchParams()
+
+ params.append('form_type', 'storefront_password')
+ params.append('utf8', '✓')
+ params.append('password', password ?? '')
+
  const response = await fetch(`${prependHttps(store)}/password`, {
  headers: {
  'cache-control': 'no-cache',
  'content-type': 'application/x-www-form-urlencoded',
  },
- body: `form_type=storefront_password&utf8=%E2%9C%93&password=${password}`,
+ body: params.toString(),
  method: 'POST',
  redirect: 'manual',
  })