OAuth重定向后卡在确认页面（Nuxt/Supabase/Ionic）

问题分析 #

你遇到的核心问题是OAuth登录完成跳转至confirm页面后，无法自动导航到首页，路由守卫出现“Navigation cancelled with new navigation error”错误。这是因为通过watch(useSupabaseUser())监听用户状态的方式存在滞后性，且未正确处理Nuxt与Ionic路由的兼容逻辑，导致导航操作被拦截。

解决方案 #

改用Supabase官方推荐的auth.onAuthStateChange方法监听认证状态，该方法能精准捕获登录会话完成的事件，避免状态同步延迟问题；同时结合Nuxt路由实例执行导航，确保操作被正确处理。

修改后的confirm.vue代码 #

<script setup lang="ts">
const supabase = useSupabaseClient()
const router = useRouter()

onMounted(async () => {
  // 先手动检查当前会话，避免状态监听延迟
  const { data: session } = await supabase.auth.getSession()
  if (session?.user) {
    router.push('/')
    return
  }

  // 监听认证状态变化
  const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
    if (session?.user) {
      router.push('/')
    }
  })

  // 组件卸载时取消订阅，避免内存泄漏
  onUnmounted(() => {
    subscription.unsubscribe()
  })
})
</script>

<template>
  <ion-page>
    <ion-content>
      Authenticating...
    </ion-content>
  </ion-page>
</template>

关键调整说明 #

1. 替换状态监听方式：放弃watch(useSupabaseUser())，改用auth.onAuthStateChange直接监听Supabase的认证事件，确保在会话完全建立后触发导航。
2. 手动检查会话：在组件挂载时先调用getSession()，处理已完成认证但监听事件未触发的边界情况。
3. 正确使用路由实例：用useRouter()获取Nuxt路由实例执行push操作，比navigateTo更适配Ionic与Nuxt的路由协同逻辑。
4. 清理订阅：在组件卸载时取消认证状态监听，避免内存泄漏。

额外检查点 #

• 确认login.vue中的redirectTo配置正确，确保回调地址与Supabase控制台、Google Cloud凭证中的授权域名一致。
• 若仍存在路由冲突，可尝试在导航时添加force: true参数：router.push('/', { force: true })，强制触发路由跳转。

内容的提问来源于stack exchange，提问作者Depka