use csrf token

app/pages/login.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
+import type { AuthProvider } from '#auth'
+
 definePageMeta({
   auth: false
 })
 
-const { signIn, status } = useAuth()
+const route = useRoute()
+const { getCsrfToken, getProviders } = useAuth()
 
-const isLoading = ref(false)
-const isAuthenticated = computed(() => status.value === 'authenticated')
+const csrfToken = ref('')
+const provider = ref<AuthProvider | undefined>(undefined)
+const error = ref('')
+const loading = ref(true)
 
-watch(isAuthenticated, (authenticated) => {
-  if (authenticated) {
-    navigateTo('/')
+const callbackUrl = computed(() => (route.query.callbackUrl as string) || '/')
+
+onMounted(async () => {
+  try {
+    const [providersData, tokenData] = await Promise.all([
+      getProviders(),
+      getCsrfToken()
+    ])
+    const token = tokenData || ''
+    csrfToken.value = token
+    provider.value = (providersData as Record<string, AuthProvider>)?.zitadel
+  } catch (e: any) {
+    error.value = e?.message || 'Failed to load authentication'
+  } finally {
+    loading.value = false
   }
 })
-
-async function loginWithZitadel() {
-  try {
-    isLoading.value = true
-    await signIn('zitadel', { callbackUrl: '/' })
-  } catch (error) {
-    console.error('Login failed:', error)
-    isLoading.value = false
-  }
-}
 </script>
 
 <template>
@@ -37,17 +44,38 @@ async function loginWithZitadel() {
         </p>
       </div>
 
+      <template v-if="error">
+        <div class="text-sm text-red-500 mb-4">{{ error }}</div>
+      </template>
+
+      <template v-else-if="provider">
+        <form :action="provider.signinUrl" method="POST" class="space-y-4">
+          <input type="hidden" name="csrfToken" :value="csrfToken" />
+          <input type="hidden" name="callbackUrl" :value="callbackUrl" />
+          <input type="hidden" name="provider" value="zitadel" />
+
           <button
-        type="button"
-        :disabled="isLoading"
-        @click="loginWithZitadel"
+            type="submit"
             class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             style="background: var(--brand); color: white;"
           >
-        <UIcon v-if="isLoading" name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin" />
-        <UIcon v-else name="i-heroicons-lock-closed" class="h-5 w-5" />
-        <span>{{ isLoading ? 'Signing in...' : 'Sign in with CorredorConect ID' }}</span>
+            <UIcon name="i-heroicons-lock-closed" class="h-5 w-5" />
+            <span>Sign in with CorredorConect ID</span>
           </button>
+        </form>
+      </template>
+
+      <template v-else-if="loading">
+        <button
+          type="button"
+          disabled
+          class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg font-medium"
+          style="background: var(--brand); color: white; opacity: 0.5;"
+        >
+          <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin" />
+          <span>Loading...</span>
+        </button>
+      </template>
 
       <div class="mt-6 text-center text-xs" style="color: var(--text-muted);">
         <p>Secure authentication powered by CorredorConect ID</p>