NextAuth /api/auth/* 在 Vercel 部署上始终返回 404，但在本地工作

Question

每当我尝试导航到登录页面时，它都会重定向到 vercel 部署上的

/api/auth/error

。在本地，它按预期导航和工作。

通过检查网络选项卡，第一个失败的网络请求是

/api/auth/providers

不太确定哪里出了问题。

/pages/api/auth/[...nextauth].ts

import { PrismaAdapter } from '@next-auth/prisma-adapter';
import NextAuth from 'next-auth';
import GithubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
import LinkedInProvider from 'next-auth/providers/linkedin';

import prisma from 'utils/prismaClient';

export default NextAuth({
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_CLIENT_ID as string,
            clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        }),
        LinkedInProvider({
            clientId: process.env.LINKEDIN_CLIENT_ID as string,
            clientSecret: process.env.LINKEDIN_CLIENT_SECRET as string,
        }),
    ],
    adapter: PrismaAdapter(prisma),
    pages: {
        signIn: '/sign-in',
        error: '/sign-in',
    },
});

/pages/sign-in.tsx

：

type Props = {
    providers: Provider[];
};

const SignIn: NextPage<Props> = ({ providers }) => {
    const router = useRouter();

    const [authCallbackUrl, setAuthCallbackUrl] = useState<string | undefined>(undefined);
    const [error, setError] = useState<string | undefined>(undefined);

    useEffect(() => {
        if (!router.isReady) return;

        setAuthCallbackUrl(('/' + router.query.callbackUrl) as string);
        setError(router.query.error as string);
    }, [router.isReady, router.query.callbackUrl, router.query.error]);

    return (
        <div>
            <div>
                {Object.values(providers).map((provider) => (
                    <button
                        key={provider.name}
                        type="button"
                        onClick={async () => {
                            await signIn(provider.id, {
                                callbackUrl: authCallbackUrl,
                            });
                        }}
                    >
                        {getSvgByProvider(provider.name)}
                        Sign in with {provider.name}{' '}
                    </button>
                ))}
            </div>
            {error && <SignInError error={error as keyof typeof SIGNIN_ERRORS} />}
        </div>
    );
};

export async function getServerSideProps() {
    const providers = await getProviders();
    return {
        props: { providers },
    };
}

export default SignIn;

Github 提供商回调 URL：

${VERCEL_URL}/api/auth/callback/github

我想我的 OAuth 设置没有任何内容，因为它在本地工作？但不确定。

我尝试过在 Vercel 的环境变量中使用或不使用

NEXTAUTH_URL

进行部署，但它没有达到预期的效果。根据文档

此处部署时，不需要显式设置NEXTAUTH_URL环境变量。

知道出了什么问题吗？它在本地工作，但是当我部署它时，只要我从主页调用

signIn();

，它就会导航到

api/auth/error

编辑：在登录页面内console.logging

providers

之后，它返回null。知道为什么会这样吗？

编辑 2：这似乎与在 Vercel 上部署它有关？我在 Netlify 上部署了相同的应用程序，并定义了

NEXTAUTH_URL

env 变量，并且它可以工作

Answer 1

嗨，我遇到了同样的问题，你必须输入 Vercel 环境变量： NEXTAUTH_URL="yourdomainevercel" 最重要的是，您必须重新部署您的应用程序，以便它考虑到变量，它不是动态的。 您还必须在 Vercel 设置中具有： 自动公开系统环境变量已选中 完成后，它与 NEXTAUTH 和 Vercel 配合得很好 希望我能帮忙。