React + Supabase Web应用在iPhone和Safari浏览器中的密码重置功能异常问题

我之前也踩过类似Safari和Supabase Auth兼容的坑，结合你的代码和描述来看，大概率是Safari严格的隐私策略和Supabase Auth的Cookie机制冲突导致的，咱们一步步拆解排查：

先解决iPhone Safari第一步发送重置邮件就卡住的问题 #

• Safari智能跟踪预防(ITP)的限制：Safari的ITP会严格限制第三方Cookie的存储和读取，而Supabase Auth依赖Cookie来处理会话状态。检查你的customSupabaseClient配置里的cookieOptions，如果设置了sameSite: 'none'，必须同时加上secure: true（而且你的网站必须是HTTPS协议，Safari不允许非HTTPS站点使用SameSite=None的Cookie）。比如你的客户端配置应该类似：

  const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
    auth: {
      cookieOptions: {
        sameSite: 'none',
        secure: true,
        maxAge: 31536000,
      },
    },
  });
  

• 动态Origin的潜在问题：你代码里用window.location.origin作为redirectTo的前缀，在Safari的某些场景下（比如页面从非同源跳转过来），这个值可能会出现异常。可以先尝试硬编码你的生产环境HTTPS域名（比如https://your-app-domain.com/reset-password），排除动态Origin的影响。
• 异步时序检查：虽然你的代码里finally块已经重置了isSubmitting和loading，但可以在finally里加个console.log('提交流程结束')，看在iPhone Safari里是不是真的执行到了这里——如果没执行，说明请求被卡在了网络层面，不是代码逻辑的问题。

再解决Mac Safari点击重置链接后提交新密码卡住的问题 #

• 重置页面的Cookie读取问题：用户从邮件点击链接跳转到/reset-password时，Safari会把这个跳转标记为跨站请求，限制第三方Cookie的写入。你可以在重置页面的代码里先打印window.location.search，确认Supabase的重置token（?token=xxx&type=recovery）是不是正确传递过来了。如果token存在，但提交卡住，那就是调用supabase.auth.updateUser时因为Cookie问题无法完成请求。
• 重置页面的错误捕获：检查你的重置密码页面代码，有没有给updateUser添加完整的错误捕获？比如：

  try {
    const { error } = await supabase.auth.updateUser({ password: newPassword });
    if (error) throw error;
  } catch (error) {
    console.error('重置密码错误:', error);
    // 这里打印具体错误，看是不是Cookie相关的
  }
  

代码细节和配置的额外检查 #

• DOMPurify的兼容性：你用DOMPurify处理邮箱，虽然安全，但Safari对某些字符串的处理和Chrome有差异，可以在handleSubmit里打印sanitizedEmail，确认邮箱没有被意外修改（比如+号被过滤？）。
• Supabase控制台配置：登录Supabase控制台，检查Auth -> URL配置里的「站点URL」和「重定向URL」是不是已经正确添加了你的HTTPS域名，没有的话会导致Auth请求被拦截。
• Supabase版本升级：如果你的@supabase/supabase-js是v1版本，建议升级到最新的v2版本，v2对Safari的兼容性做了不少优化。

调试小技巧 #

• 打开Safari的开发者工具（Mac上可以在偏好设置里开启「开发」菜单，iPhone上可以用Mac的Safari远程调试）：
  • 看网络标签页，检查Supabase的Auth请求（比如/auth/v1/reset-password）的状态：是一直pending？还是返回403/401？
  • 看存储 -> Cookie标签页，有没有sb-开头的Supabase Cookie，如果没有，就是被Safari的隐私策略阻止了。

内容来源于stack exchange