使用Next.js集成Auth0时redirect_uri参数无效问题求助

以下是几个常见的排查方向和解决方法：

• 检查实际请求的redirect_uri与配置是否完全匹配

  • 开发环境下，你可能用的是http://localhost:3000这类本地域名，但如果Auth0控制台只配置了生产域名http://name.com，实际请求的redirect_uri会是本地地址，自然不匹配。需要把本地开发地址也添加到Allowed Callback URLs中，比如http://localhost:3000/api/auth/callback。
  • 确认协议一致：如果你的站点实际用的是HTTPS，配置的Callback URL也必须是HTTPS，反之亦然，协议不匹配会直接触发错误。
  • 核对路径拼写：@auth0/nextjs-auth0默认的回调路径是/api/auth/callback，要确保配置的路径和这个完全一致，注意不要多打斜杠、出现大小写错误。

• 检查Next.js环境变量配置

  • 确认.env.local中的AUTH0_BASE_URL变量值和Allowed Callback URLs的域名完全一致。比如本地开发时设为http://localhost:3000，生产环境设为http://name.com。如果这个变量错误，SDK会生成不符合配置的redirect_uri。
  • 检查环境变量是否拼写正确，比如有没有把AUTH0_BASE_URL写成AUTH0_BASEURL这类错误。

• 核对Auth0控制台的配置位置

  • 确保你是在Auth0控制台的应用设置里配置的Allowed Callback URLs，不要误配置到Allowed Logout URLs或其他字段里。
  • 确认所有可能用到的环境地址都已添加，比如测试环境、预发布环境的域名，不要只加生产地址。

• 排查Azure端配置的影响

  • 如果你是将Auth0作为Azure的身份提供商，Azure端的redirect URIs配置可能不需要重复添加Auth0的回调地址，甚至可能导致冲突。可以暂时移除Azure端的相关配置，测试是否恢复正常，再进一步调整。

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