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 提供者回调网址： ${VERCEL_URL}/api/auth/callback/github

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

我尝试在 Vercel 的环境变量中使用和不使用 NEXTAUTH_URL 进行部署，但它没有预期的效果。根据文档

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

知道出了什么问题吗？它在本地工作，但是当我部署它时，只要我从主页调用signIn();，它就会导航到api/auth/error

编辑：在登录页面内的 console.logging providers 之后，它返回 null。知道为什么会这样吗？

Answer 1

vercel 和 session 有同样的错误。你设法解决了这个问题吗？