useFetch works perfectly on dev enviroment, on productions fails on pre-hydration

const { data } = await useFetch('/api/v1/comments', {
  key: 'comments-fetch',  // Add this line
  method: 'GET',
  params: {
    sitekey,
    post_id: postId,
    hostname: referer
  },
  immediate: true
})

const { data } = await useFetch('/api/v1/comments', {
  key: 'comments-fetch',  // Add this line
  method: 'GET',
  params: {
    sitekey,
    post_id: postId,
    hostname: referer
  },
  immediate: true
})

const fetchComments = async () => {
  try {
    const { data } = await useAsyncData(
      'comments',
      () => $fetch('/api/v1/comments', {
        method: 'GET',
        params: {
          sitekey,
          post_id: postId,
          hostname: referer
        }
      })
    )
    comments.value = Array.isArray(data.value) ? data.value : []
  } catch (error) {
    console.error('Error fetching comments:', error)
    comments.value = []
  }
}
await fetchComments()

const fetchComments = async () => {
  try {
    const { data } = await useAsyncData(
      'comments',
      () => $fetch('/api/v1/comments', {
        method: 'GET',
        params: {
          sitekey,
          post_id: postId,
          hostname: referer
        }
      })
    )
    comments.value = Array.isArray(data.value) ? data.value : []
  } catch (error) {
    console.error('Error fetching comments:', error)
    comments.value = []
  }
}
await fetchComments()

// In your authentication logic
const authCookie = useCookie('auth-token', {
  sameSite: 'none', // Required for cross-site cookies
  secure: true, // Required when sameSite is 'none'
  domain: '.dialoge.pro' // Use a domain that can be shared
})

// In your authentication logic
const authCookie = useCookie('auth-token', {
  sameSite: 'none', // Required for cross-site cookies
  secure: true, // Required when sameSite is 'none'
  domain: '.dialoge.pro' // Use a domain that can be shared
})

export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,
  },
})

export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true,
  },
})

// server/api/auth/proxy.js
export default defineEventHandler(async (event) => {
  // Forward authentication request to dialoge.pro
  const response = await fetch('<https://dialoge.pro/api/auth',> {
    method: 'POST',
    body: await readBody(event),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  
  // Return the response
  return await response.json()
})

// server/api/auth/proxy.js
export default defineEventHandler(async (event) => {
  // Forward authentication request to dialoge.pro
  const response = await fetch('<https://dialoge.pro/api/auth',> {
    method: 'POST',
    body: await readBody(event),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  
  // Return the response
  return await response.json()
})

// In your iframe (dialoge.pro/embed/macro)
function sendLoginStatus(status, userData) {
  window.parent.postMessage({
    type: 'auth',
    status,
    userData
  }, '<https://cordobes.fun'>)
}

// After successful login
sendLoginStatus('success', { user: 'example' })

// In your iframe (dialoge.pro/embed/macro)
function sendLoginStatus(status, userData) {
  window.parent.postMessage({
    type: 'auth',
    status,
    userData
  }, '<https://cordobes.fun'>)
}

// After successful login
sendLoginStatus('success', { user: 'example' })

// Listen for messages from the iframe
window.addEventListener('message', (event) => {
  // Verify the origin for security
  if (event.origin !== '<https://dialoge.pro'>) return
  
  if (event.data.type === 'auth' && event.data.status === 'success') {
    // Handle successful login
    console.log('User logged in:', event.data.userData)
  }
})

// Listen for messages from the iframe
window.addEventListener('message', (event) => {
  // Verify the origin for security
  if (event.origin !== '<https://dialoge.pro'>) return
  
  if (event.data.type === 'auth' && event.data.status === 'success') {
    // Handle successful login
    console.log('User logged in:', event.data.userData)
  }
})

// Install the module
// npm install nuxt-auth-utils

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-auth-utils']
})

// Install the module
// npm install nuxt-auth-utils

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-auth-utils']
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-vuefire', '@vueuse/nuxt'],
  vuefire: {
    auth: true,
    config: {
      // your firebase config
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-vuefire', '@vueuse/nuxt'],
  vuefire: {
    auth: true,
    config: {
      // your firebase config
    }
  }
})

// Create a confirm.vue page in your pages directory
// This is required for Supabase OAuth to work properly
<template>
  <div>Processing authentication...</div>
</template>

<script setup>
// This page will handle the OAuth callback
</script>

// Create a confirm.vue page in your pages directory
// This is required for Supabase OAuth to work properly
<template>
  <div>Processing authentication...</div>
</template>

<script setup>
// This page will handle the OAuth callback
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      exclude: [], // Don't exclude paths that need authentication
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      exclude: [], // Don't exclude paths that need authentication
    },
  },
})

<template>
  <div>
    <button @click="login">Log in with GitHub</button>
    <!-- Add other providers as needed -->
  </div>
</template>

<script setup lang="ts">
const supabase = useSupabaseClient();
const login = async () => {
  // Get the parent URL to redirect back to
  const parentOrigin = document.referrer || '<https://cordobes.fun';>
  
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github', // or any other provider
    options: { 
      redirectTo: `${window.location.origin}/confirm?redirect=${encodeURIComponent(parentOrigin)}` 
    },
  });

  if (error) {
    console.error('Login error:', error);
  }
};
</script>

<template>
  <div>
    <button @click="login">Log in with GitHub</button>
    <!-- Add other providers as needed -->
  </div>
</template>

<script setup lang="ts">
const supabase = useSupabaseClient();
const login = async () => {
  // Get the parent URL to redirect back to
  const parentOrigin = document.referrer || '<https://cordobes.fun';>
  
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github', // or any other provider
    options: { 
      redirectTo: `${window.location.origin}/confirm?redirect=${encodeURIComponent(parentOrigin)}` 
    },
  });

  if (error) {
    console.error('Login error:', error);
  }
};
</script>

// In your confirm.vue page
<script setup>
const route = useRoute();
const supabase = useSupabaseClient();
const user = useSupabaseUser();

// Watch for user authentication
watchEffect(() => {
  if (user.value) {
    // Get the redirect URL from query params
    const redirectUrl = route.query.redirect as string;
    
    if (redirectUrl) {
      // Send message to parent window
      window.opener?.postMessage({
        type: 'SUPABASE_AUTH_COMPLETE',
        user: user.value
      }, new URL(redirectUrl).origin);
      
      // Close popup if opened as one
      if (window.opener) {
        window.close();
      }
    }
  }
});
</script>

// In your confirm.vue page
<script setup>
const route = useRoute();
const supabase = useSupabaseClient();
const user = useSupabaseUser();

// Watch for user authentication
watchEffect(() => {
  if (user.value) {
    // Get the redirect URL from query params
    const redirectUrl = route.query.redirect as string;
    
    if (redirectUrl) {
      // Send message to parent window
      window.opener?.postMessage({
        type: 'SUPABASE_AUTH_COMPLETE',
        user: user.value
      }, new URL(redirectUrl).origin);
      
      // Close popup if opened as one
      if (window.opener) {
        window.close();
      }
    }
  }
});
</script>

<script setup>
// Listen for messages from the iframe
window.addEventListener('message', (event) => {
  // Verify the origin
  if (event.origin !== '<https://dialoge.pro'>) return;
  
  if (event.data.type === 'SUPABASE_AUTH_COMPLETE') {
    // Handle successful login
    console.log('User logged in:', event.data.user);
    // Refresh the page or update UI as needed
  }
});
</script>

<script setup>
// Listen for messages from the iframe
window.addEventListener('message', (event) => {
  // Verify the origin
  if (event.origin !== '<https://dialoge.pro'>) return;
  
  if (event.data.type === 'SUPABASE_AUTH_COMPLETE') {
    // Handle successful login
    console.log('User logged in:', event.data.user);
    // Refresh the page or update UI as needed
  }
});
</script>