URL generation (front&back) + fixed authJWT for SSR

client/components/pages/forms/show/EmbedFormAsPopupModal.vue

@@ -103,6 +103,7 @@
 
 <script setup>
 import { ref, defineProps, computed } from 'vue'
+import {appUrl} from "~/lib/utils.js";
 
 const { copy } = useClipboard()
 const crisp = useCrisp()
@@ -135,7 +136,7 @@ let embedPopupCode = computed(() => {
     width: advancedOptions.value.width
   }
   previewPopup(nfData)
-  return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + embedScriptUrl + '\'></scrip' + 't>'
+  return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + appUrl(embedScriptUrl) + '\'></scrip' + 't>'
 })
 
 onMounted(() => {

client/composables/useOpnApi.js

@@ -18,13 +18,18 @@ function addPasswordToFormRequest(request, options) {
 }
 
 export function getOpnRequestsOptions(request, opts) {
+  const config = useRuntimeConfig()
+
   opts.headers = {accept: 'application/json', ...opts.headers}
 
+  // Authenticate requests coming from the server
+  if (process.server && config.apiSecret) {
+    opts.headers['x-api-secret'] = config.apiSecret
+  }
+
   addAuthHeader(request, opts)
   addPasswordToFormRequest(request, opts)
 
-  const config = useRuntimeConfig()
-
   return {
     baseURL: config.public.apiBase,
     onResponseError({response}) {

client/lib/utils.js

@@ -13,3 +13,21 @@ export const hash = (str, seed = 0) => {
 
   return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 }
+
+export const appUrl = (path = '/') => {
+  let baseUrl = useRuntimeConfig().public.appUrl
+  if (!baseUrl) {
+    console.warn('appUrl not set in runtimeConfig')
+    return path
+  }
+
+  if (path.startsWith('/')) {
+    path = path.substring(1)
+  }
+
+  if (!baseUrl.endsWith('/')) {
+    baseUrl += '/'
+  }
+
+  return baseUrl + path
+}

client/pages/index.vue

@@ -86,11 +86,11 @@
           class="w-full mt-12 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center"
         >
           <div
-            class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
+            class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4 w-full"
           >
-            <NuxtImg src="/img/pages/welcome/product-cover.jpg" placeholder
-                     sizes="320px sm:650px lg:900px"
-                 alt="Product screenshot" loading="lazy" class="rounded-md shadow-2xl ring-1 ring-gray-900/10"
+            <NuxtImg src="/img/pages/welcome/product-cover.jpg"
+                     sizes="320px sm:650px lg:896px"
+                 alt="Product screenshot" loading="lazy" class="rounded-md w-full shadow-2xl ring-1 ring-gray-900/10"
             />
           </div>
         </div>

client/runtimeConfig.js

@@ -13,5 +13,10 @@ export default {
     s3Enabled: process.env.NUXT_PUBLIC_S3_ENABLED || false,
     paidPlansEnabled: process.env.NUXT_PUBLIC_PAID_PLANS_ENABLED || false,
     customDomainsEnabled: process.env.NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED || false,
-  }
+  },
+
+  /**
+   * Used to authenticate that the requests are coming from the server - not from a client.
+   */
+  apiSecret: process.env.NUXT_API_SECRET || '',
 }