部署在Netlify的React应用Auth0登录后重定向至localhost问题

1. 修正Auth0控制台的回调URL配置 #

你的Allowed callback URLs格式错误，把域名与路径写反了，正确地址应为：

https://tubemate.netlify.app/collection

其余配置保持现有正确值即可：

• Application login URL: https://tubemate.netlify.app
• Allowed logout URLs: https://tubemate.netlify.app
• Allowed web origins: https://tubemate.netlify.app

2. 检查React代码中的重定向URI设置 #

本地开发时你大概率硬编码了localhost:3000/collection作为登录后重定向地址，部署到Netlify后需要替换为生产环境地址：

• 找到Auth0初始化代码（比如AuthProvider组件或useAuth0配置逻辑），将redirectUri的值改为https://tubemate.netlify.app/collection
• 推荐用环境变量区分开发/生产环境：
  • 本地在.env文件中设置：REACT_APP_AUTH0_REDIRECT_URI=http://localhost:3000/collection
  • Netlify控制台环境变量中添加：REACT_APP_AUTH0_REDIRECT_URI=https://tubemate.netlify.app/collection
  • 代码中通过process.env.REACT_APP_AUTH0_REDIRECT_URI获取对应环境的重定向地址

3. 清除缓存并重新部署 #

• 保存Auth0控制台的配置变更，等待配置生效
• 在Netlify控制台触发「清除缓存并重新部署」，确保新配置与代码被正确加载

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