我刚刚用Next.js创建了一个简单的应用程序,以了解NextAuth如何与Github提供商一起工作。
在我的开发环境中,一切都很好,但是当我在Vercel中部署我的应用程序并单击登录按钮时,我得到了这个URL:http://localhost:3000/?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch&state=1S7m46DjI2wDIuPTSeYRU-BPK0r6SyT7yXe2hRxPgso
这没有任何意义,因为我的应用程序部署在https://nextjs-auth-phi.vercel.app
中,而不是http://localhost:3000
中。
当然,在部署mi app之前,我在Vercel中添加了环境变量GITHUB_CLIENT_ID
和GITHUB_CLIENT_SECRET
(因为据我所知,Vercel不会读取我的.env
文件。
这是我的package.json
:
{
"name": "next-auth-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"autoprefixer": "10.4.14",
"eslint": "8.42.0",
"eslint-config-next": "13.4.5",
"next": "13.4.5",
"next-auth": "^4.22.1",
"postcss": "8.4.24",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.2"
}
}
这是我的next.config.js
:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ["avatars.githubusercontent.com"],
}
};
module.exports = nextConfig;
知道为什么这不管用吗
1条答案
按热度按时间w8rqjzmb1#
我修复了它。我遇到的错误是因为在我的Github帐户中注册的回调URL是
localhost:3000
,而不是我的Vercel生产URL。如何修复:
Homepage URL
选项中,输入您的Vercel生产URL。Authorization callback URL
选项中,输入Vercel生产URL。Update application
按钮。