fix(fe2): using SSR apiOrigin instead of CSR apiOrigin in vue templates (#2326)

packages/frontend-2/components/auth/third-party/LoginBlock.vue

@@ -5,7 +5,7 @@
         :is="getButtonComponent(strat)"
         v-for="strat in thirdPartyStrategies"
         :key="strat.id"
-        :to="buildAuthUrl(strat)"
+        to="javascript:;"
         @click="() => onClick(strat)"
       />
     </div>
@@ -93,10 +93,15 @@ const getButtonComponent = (strat: StrategyType) => {
 }
 
 const onClick = (strat: StrategyType) => {
+  if (!process.client) return
+
+  const redirectUrl = buildAuthUrl(strat)
   mixpanel.track('Log In', {
     isInvite: !!inviteToken.value,
     type: 'action',
     provider: strat.name
   })
+
+  window.location.href = redirectUrl
 }
 </script>

packages/frontend-2/components/developer-settings/SectionHeader.vue

@@ -9,6 +9,7 @@
           :key="index"
           v-bind="button.props"
           class="shrink-0 whitespace-nowrap"
+          @click="($event) => button.onClick?.($event)"
         >
           {{ button.label }}
         </FormButton>
@@ -21,9 +22,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { FormButton } from '@speckle/ui-components'
+
+type FormButtonProps = InstanceType<typeof FormButton>['$props']
+
 interface Button {
   label: string
-  props: Record<string, unknown>
+  props: Record<string, unknown> & FormButtonProps
+  onClick?: (e: MouseEvent) => void
 }
 
 withDefaults(

packages/frontend-2/composables/env.ts

@@ -1,3 +1,7 @@
+/**
+ * IMPORTANT: Don't use this directly in Vue templates that may render in SSR, cause this may cause the backend API origin to be rendered instead of the clientside one,
+ * at least until the app finishes hydrating. If people click on links based on this too early, they may end up in the wrong place.
+ */
 export const useApiOrigin = () => {
   const {
     public: { apiOrigin, backendApiOrigin }

packages/frontend-2/pages/developer-settings.vue

@@ -12,11 +12,10 @@
         :buttons="[
           {
             props: {
-              color: 'primary',
-              to: apiOrigin + '/explorer',
               target: '_blank',
               external: true
             },
+            onClick: goToExplorer,
             label: 'Explore GraphQL'
           }
         ]"
@@ -40,7 +39,6 @@
             },
             {
               props: {
-                color: 'primary',
                 iconLeft: PlusIcon,
                 onClick: openCreateTokenDialog
               },
@@ -120,7 +118,6 @@
             },
             {
               props: {
-                color: 'primary',
                 onClick: openCreateApplicationDialog,
                 iconLeft: PlusIcon
               },
@@ -376,4 +373,9 @@ const handleApplicationCreated = (applicationId: string) => {
     }
   })
 }
+
+const goToExplorer = () => {
+  if (!process.client) return
+  window.location.href = new URL('/explorer', apiOrigin).toString()
+}
 </script>