#622 fix shopify auth (after 1 January 2026)

Author: BranDavidSebastian

src/core/integrations/integrations/integrations-create/IntegrationCreateController.vue

@@ -45,8 +45,8 @@ import {
   createWoocommerceSalesChannelMutation,
   getAmazonRedirectUrlMutation,
   getEbayRedirectUrlMutation,
+  getShopifyRedirectUrlMutation,
   getSheinRedirectUrlMutation,
-  refreshSalesChannelWebsitesMutation,
 } from '../../../../shared/api/mutations/salesChannels.js';
 import { createWebhookIntegrationMutation } from '../../../../shared/api/mutations/webhookIntegrations.js';
 import { Toast } from '../../../../shared/modules/toast';
@@ -479,7 +479,7 @@ const handleFinish = async () => {
     if (data && data[mutationKey]) {
       Toast.success(t('integrations.create.success'));
       loading.value = false;
-      handleSalesChannelSuccess(data[mutationKey], resolvedIntegrationType.value);
+      await handleSalesChannelSuccess(data[mutationKey], resolvedIntegrationType.value);
     }
   } catch (err) {
     loading.value = false;
@@ -498,7 +498,6 @@ const handleFinish = async () => {
 const handleShopifySalesChannelSuccess = async (channelData: any) => {
   const id = channelData.id;
 
-  /*
   const { data } = await apolloClient.mutate({
     mutation: getShopifyRedirectUrlMutation,
     variables: {
@@ -513,29 +512,15 @@ const handleShopifySalesChannelSuccess = async (channelData: any) => {
     return;
   }
 
-  // If we have errors from OperationInfo
   const messages = result?.messages || [];
-  messages.forEach((msg: any) => {
-    Toast.error(msg.message);
-  });
-  */
-  try {
-    loading.value = true;
-    await apolloClient.mutate({
-      mutation: refreshSalesChannelWebsitesMutation,
-      variables: {
-        data: { id },
-      },
+  if (messages.length) {
+    messages.forEach((msg: any) => {
+      Toast.error(msg.message);
     });
-    Toast.success(t("integrations.show.pullData.success"));
-  } catch (error) {
-    Toast.error(t("integrations.show.pullData.error"));
-    console.error("Pull data failed:", error);
-  } finally {
-    loading.value = false;
+  } else {
+    Toast.error(t('integrations.salesChannel.shopify.installed.genericError'));
   }
 
-  // Redirect to show page anyway
   router.push({
     name: 'integrations.integrations.show',
     params: { type: IntegrationTypes.Shopify, id },

src/core/integrations/integrations/integrations-create/containers/integration-specific-step/shopify/ShopifyChannelInfoStep.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Label } from "../../../../../../../shared/components/atoms/label";
-import { TextInput } from "../../../../../../../shared/components/atoms/input-text";
 import { ShopifyChannelInfo } from '../../../../integrations';
 import { Icon } from "../../../../../../../shared/components/atoms/icon";
 import { Button } from "../../../../../../../shared/components/atoms/button";
@@ -14,7 +13,7 @@ import {
   FieldQuery
 } from "../../../../../../../shared/components/organisms/general-form/containers/form-fields/field-query";
 
-const props = defineProps<{
+defineProps<{
   channelInfo: ShopifyChannelInfo
 }>();
 
@@ -48,74 +47,40 @@ const propertyField = computed(() => ({
 <template>
   <div>
     <h1 class="text-2xl text-center mb-2">
-      {{ t('integrations.create.wizard.step4.magento.content') }}
+      {{ t('integrations.create.wizard.step4.shopify.content') }}
     </h1>
     <hr/>
     <Flex vertical>
       <FlexCell>
         <Flex class="mt-4 gap-4" center>
           <FlexCell center>
-            <Flex vertical class="gap-2">
+            <Flex vertical class="gap-4">
               <FlexCell>
-                <Label class="font-semibold block text-sm leading-6 text-gray-900">
-                  {{ t('integrations.labels.apiKey') }}
-                </Label>
-              </FlexCell>
-              <FlexCell>
-                <TextInput
-                    class="w-96"
-                    v-model="channelInfo.apiKey"
-                    :placeholder="t('integrations.placeholders.apiKey')"
-                />
-              </FlexCell>
-              <FlexCell>
-                <Label class="font-semibold block text-sm leading-6 text-gray-900">
-                  {{ t('integrations.labels.apiSecret') }}
-                </Label>
-              </FlexCell>
-              <FlexCell>
-                <TextInput
-                    class="w-96"
-                    v-model="channelInfo.apiSecret"
-                    :placeholder="t('integrations.placeholders.apiSecret')"
-                    :secret="true"
-                />
+                <div class="w-96 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm leading-6 text-emerald-900">
+                  {{ t('integrations.create.wizard.step1.shopifyInfoModal.section.integrationStep8') }}
+                </div>
               </FlexCell>
               <FlexCell>
                 <Label class="font-semibold block text-sm leading-6 text-gray-900">
-                  {{ t('integrations.labels.accessToken') }}
+                  {{ t('integrations.labels.vendorProperty') }}
                 </Label>
               </FlexCell>
-              <FlexCell>
-                <TextInput
-                    class="w-96"
-                    v-model="channelInfo.accessToken"
-                    :placeholder="t('integrations.placeholders.accessToken')"
-                    secret
-                />
-              </FlexCell>
-
               <FlexCell>
                 <Flex between>
                   <FlexCell grow>
-                    <Label class="font-semibold block text-sm leading-6 text-gray-900">
-                      {{ t('integrations.labels.vendorProperty') }}
-                    </Label>
+                    <div class="mt-1 text-sm leading-6 text-gray-400 w-96">
+                      <p>{{ t('integrations.salesChannel.helpText.shopifyVendorProperty') }}</p>
+                    </div>
+                  </FlexCell>
+                  <FlexCell center>
+                    <Button class="btn-primary px-1.5 py-1 rounded-full" @click="openInNewTab">
+                      <Icon name="plus"/>
+                    </Button>
                   </FlexCell>
-                    <FlexCell center>
-                      <Button class="btn-primary px-1.5 py-1 rounded-full" @click="openInNewTab">
-                        <Icon name="plus"/>
-                      </Button>
-                    </FlexCell>
                 </Flex>
-
               </FlexCell>
               <FlexCell>
                 <FieldQuery v-model="channelInfo.vendorProperty.id" :field="propertyField as QueryFormField" />
-
-                <div class="mt-1 text-sm leading-6 text-gray-400 w-96">
-                  <p>{{ t('integrations.salesChannel.helpText.shopifyVendorProperty') }}</p>
-                </div>
               </FlexCell>
             </Flex>
           </FlexCell>

src/core/integrations/integrations/integrations-shopify-entry/ShopifyEntryController.vue

@@ -81,7 +81,6 @@ const createShopifySalesChannel = async (queryParams: Record<string, any>, hostn
 const handleShopifySalesChannelSuccess = async (channelData: any) => {
   const id = channelData.id;
 
-  /*
   const { data } = await apolloClient.mutate({
     mutation: getShopifyRedirectUrlMutation,
     variables: { data: { id } },
@@ -90,15 +89,18 @@ const handleShopifySalesChannelSuccess = async (channelData: any) => {
   const result = data?.getShopifyRedirectUrl;
 
   if (result?.redirectUrl) {
-     window.location.href = result.redirectUrl;
+    window.location.href = result.redirectUrl;
     return;
   }
 
   const messages = result?.messages || [];
-  messages.forEach((msg: any) => {
-    Toast.error(msg.message);
-  });
-  */
+  if (messages.length) {
+    messages.forEach((msg: any) => {
+      Toast.error(msg.message);
+    });
+  } else {
+    Toast.error(t('integrations.salesChannel.shopify.installed.genericError'));
+  }
 
   router.push({
     name: 'integrations.integrations.show',

src/core/integrations/integrations/integrations-show/containers/general/shopify-general-tab/ShopifyGeneralInfoTab.vue

@@ -16,7 +16,6 @@ import {
   updateShopifySalesChannelMutation
 } from "../../../../../../../shared/api/mutations/salesChannels.js";
 import { processGraphQLErrors } from "../../../../../../../shared/utils";
-import { cleanShopHostname } from "../../../../configs";
 import apolloClient from "../../../../../../../../apollo-client";
 import {FieldType, PropertyTypes} from "../../../../../../../shared/utils/constants";
 import {propertiesQuerySelector} from "../../../../../../../shared/api/queries/properties";
@@ -40,8 +39,6 @@ interface EditShopifyForm {
   importOrders: boolean;
   minNameLength: number | null;
   minDescriptionLength: number | null;
-  apiKey: string;
-  apiSecret: string;
   accessToken?: string;
   state?: string;
   gptEnable: boolean;
@@ -111,6 +108,7 @@ const cleanupAndMutate = async (mutate) => {
   const payload = { ...formData.value };
 
   delete (payload as any).startingStock;
+  delete (payload as any).accessToken;
 
   if (!payload.vendorProperty?.id) {
     delete (payload as any).vendorProperty;
@@ -239,30 +237,6 @@ useShiftBackspaceKeyboardListener(goBack);
     </div>
   </div>
 
-  <div class="grid grid-cols-12 gap-4">
-    <div class="md:col-span-6 col-span-12">
-      <Label class="font-semibold block text-sm leading-6 text-gray-900 mb-1">
-        {{ t('integrations.labels.apiKey') }}
-      </Label>
-      <TextInput v-model="formData.apiKey" disabled class="w-full" />
-    </div>
-    <div class="md:col-span-6 col-span-12">
-      <Label class="font-semibold block text-sm leading-6 text-gray-900 mb-1">
-        {{ t('integrations.labels.apiSecret') }}
-      </Label>
-      <TextInput v-model="formData.apiSecret" disabled :secret="true" class="w-full" />
-    </div>
-  </div>
-
-  <div class="grid grid-cols-12 gap-4">
-    <div class="md:col-span-12 col-span-12">
-      <Label class="font-semibold block text-sm leading-6 text-gray-900 mb-1">
-        {{ t('integrations.labels.accessToken') }}
-      </Label>
-      <TextInput v-model="formData.accessToken" secret class="w-full" />
-    </div>
-  </div>
-
     <!-- Accordion -->
     <Accordion class="mt-8" :items="accordionItems">
       <!-- Throttling -->

src/core/integrations/integrations/integrations.ts

@@ -89,9 +89,6 @@ export interface MagentoChannelInfo extends SpecificChannelInfo {
 
 export interface ShopifyChannelInfo extends SpecificChannelInfo {
   vendorProperty: { id: string | null };
-  apiKey: string;
-  apiSecret: string;
-  accessToken: string;
   hmac?: string;
   host?: string;
   timestamp?: string;
@@ -152,9 +149,6 @@ export function getMagentoDefaultFields(): MagentoChannelInfo {
 export function getShopifyDefaultFields(): ShopifyChannelInfo {
   return {
     vendorProperty: { id: null },
-    apiKey: '',
-    apiSecret: '',
-    accessToken: '',
   };
 }
 

src/core/integrations/routes.ts

@@ -114,19 +114,18 @@ export const routes = [
     meta: { title: 'integrations.show.miraklIssues.show.title' },
     component: () => import('./integrations/integrations-show/containers/issues/containers/MiraklProductIssueShowController.vue'),
   },
-  // temporary commented since we no longer to oAuth
-  // {
-  //   path: '/integrations/shopify/installed',
-  //   name: 'integrations.shopify.installed',
-  //   meta: { title: 'integrations.shopify.installed.title' },
-  //   component: () => import('./integrations/integrations-installed/shopify-installed/ShopifyInstalledController.vue'),
-  // },
-  // {
-  //   path: '/integrations/shopify/entry',
-  //   name: 'integrations.shopify.entry',
-  //   meta: { title: 'integrations.shopify.entry.title' },
-  //   component: () => import('./integrations/integrations-shopify-entry/ShopifyEntryController.vue'),
-  // },
+  {
+    path: '/integrations/shopify/installed',
+    name: 'integrations.shopify.installed',
+    meta: { title: 'integrations.shopify.installed.title' },
+    component: () => import('./integrations/integrations-installed/shopify-installed/ShopifyInstalledController.vue'),
+  },
+  {
+    path: '/integrations/shopify/entry',
+    name: 'integrations.shopify.entry',
+    meta: { title: 'integrations.shopify.entry.title' },
+    component: () => import('./integrations/integrations-shopify-entry/ShopifyEntryController.vue'),
+  },
   {
     path: '/integrations/amazon/installed',
     name: 'integrations.amazon.installed',

src/locale/de.json

@@ -1153,6 +1153,14 @@
       "webhook": "Webhook",
       "mirakl": ""
     },
+    "shopify": {
+      "entry": {
+        "title": ""
+      },
+      "installed": {
+        "title": ""
+      }
+    },
     "amazon": {
       "actions": {
         "bulkForceUpdate": {

src/locale/en.json

@@ -4839,10 +4839,10 @@
               "integrationStep5Part1": "Open the new app and go to 'Configuration'.",
               "integrationStep5Part2": "Under 'Admin API integration' click 'Configure' and enable these scopes:",
               "integrationStep5Part3": "Click 'Save'.",
-              "integrationStep6Part1": "In 'API credentials' select 'Install app' and confirm. ",
-              "integrationStep6Part2": "Now the API key, API secret key and Admin API access token are ready for the last step of this wizard.",
+              "integrationStep6Part1": "In 'Configuration', set your app URL and allowed redirection URL so OneSila can send the Shopify authorization response back to the correct callback page.",
+              "integrationStep6Part2": "Use the backend-provided Shopify callback URL for the allowed redirection URL. OAuth will issue the access token after authorization, so you no longer need to copy API credentials into this wizard.",
               "integrationStep7": "From the Sales channels sidebar choose 'View your online store' and copy the URL from your browser and paste it in the step 2 of this wizard.",
-              "integrationStep8": "During step 4 of the wizard paste the API key, secret key and access token, then click Finish.",
+              "integrationStep8": "During step 4 of the wizard review the Shopify-specific settings and click Finish. OneSila will then redirect you to Shopify to authorize the connection.",
               "appUrlLabel": "App URL",
               "allowedRedirectUrlLabel": "Allowed redirection URL(s)",
               "customAppTitle": "Create Custom App",
@@ -4868,7 +4868,7 @@
           },
           "shopify": {
             "title": "Shopify Channel Details",
-            "content": "Provide Shopify-specific configuration to connect your store."
+            "content": "Review the Shopify-specific settings. When you finish, OneSila will redirect you to Shopify to authorize the connection."
           },
           "woocommerce": {
             "title": "WooCommerce Channel Details",
@@ -5074,6 +5074,14 @@
         "title": "Ebay Connected"
       }
     },
+    "shopify": {
+      "entry": {
+        "title": "Connect Shopify"
+      },
+      "installed": {
+        "title": "Shopify Connected"
+      }
+    },
     "salesChannel": {
       "shopify": {
         "installed": {

src/locale/fr.json

@@ -1150,6 +1150,14 @@
       "webhook": "Webhook",
       "mirakl": ""
     },
+    "shopify": {
+      "entry": {
+        "title": ""
+      },
+      "installed": {
+        "title": ""
+      }
+    },
     "amazon": {
       "actions": {
         "bulkForceUpdate": {

src/locale/nl.json

@@ -3909,6 +3909,14 @@
       "webhook": "Webhook",
       "mirakl": ""
     },
+    "shopify": {
+      "entry": {
+        "title": ""
+      },
+      "installed": {
+        "title": ""
+      }
+    },
     "amazon": {
       "actions": {
         "bulkForceUpdate": {