NuxtJS项目无/login文件却卡在该路径404页面求助

我正在用NuxtJS开发项目，集成了Prisma与Supabase，目前碰到问题：项目卡在错误页面，显示404 Page not found: /login，但我并未创建任何/login相关文件。

相关文件内容 #

pages/auth.vue #

<template>
    <div id="auth-page" class="w-full h-[100vh] pt-32">
        <div class="w-full">
            <div class="w-full flex items-center justify-center gap-2.5 p-2">
                <img class="w-[35px]" src="/threads-logo.png" alt="">
                <span class="font-bold text-2xl text-white">Threads</span>
            </div>
            <div class="max-w-[350px] mx-auto px-2 text-white">
                <div class="text-center mb-6 mt-4">Login / Register</div>
                <button class="flex items-center justify-center gap-3 p-1.5 w-full border 
                rounded-full text-lg font-semibold" @click="login('github')">
                    <div class="flex items-center gap-2 justify-center">
                        <img class="w-full max-w-[30px] rounded-full" src="/github-logo.png" alt="">
                        Github
                    </div>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
const client = useSupabaseClient();
const user = useSupabaseUser();
watchEffect(() => {
    if (user.value) {
        return navigateTo("/")
    }
});
const login = async (prov) => {
    const {data, error} = await client.auth.signInWithOAuth({
        provider: prov,
        redirectTo: window.location.prigin
    })
    if (error) console.log(error);
};
</script>

nuxt.config.ts #

export default defineNuxtConfig({
  pages: true,
  modules: [
    "nuxt-icon",
    "@nuxtjs/tailwindcss",
    "@nuxtjs/supabase",
    "@pinia/nuxt",
    "@vite-pwa/nuxt",
  ],
  runtimeConfig: {
    public: {
      bucketUrl: process.env.BUCKET_URL
    }
  },
  devtools: { enabled: false }
})

问题原因与解决方案 #

核心问题 #

1. Supabase OAuth 默认回调路径：Supabase 默认会在 OAuth 登录流程完成后跳转到 /login 页面处理回调逻辑，但你未创建该页面，导致404。
2. 拼写错误：代码中window.location.prigin是笔误，正确应为window.location.origin。

修复步骤 #

1. 修正拼写错误：将登录函数中的redirectTo: window.location.prigin修改为redirectTo: ${window.location.origin}/api/auth/callback``。
2. 利用 Nuxt Supabase 内置回调：@nuxtjs/supabase模块已经内置了OAuth回调处理逻辑，默认路径为/api/auth/callback，无需手动创建页面。
3. 同步 Supabase 控制台配置：在Supabase控制台的「Authentication」→「URL Configuration」中，将「Site URL」和「Redirect URLs」设置为你的项目地址（如本地开发环境为http://localhost:3000）。

优化后的登录代码 #

const login = async (prov) => {
    const {data, error} = await client.auth.signInWithOAuth({
        provider: prov,
        redirectTo: `${window.location.origin}/api/auth/callback`
    })
    if (error) console.log(error);
};

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