React使用Supabase魔法链接登录跳转路径错误出现404问题求助

Supabase生成魔法链接时未拼接站点部署的子路径/movie-trend，导致跳转至根路径触发404。

1. 修正Supabase后台身份验证配置 #

• 进入对应项目的「Authentication > URL Configuration」配置页
• 将Site URL值从https://kkzio.github.io修改为完整部署路径：https://kkzio.github.io/movie-trend/
• 在「Redirect URLs」列表中添加子路径通配规则：https://kkzio.github.io/movie-trend/**，覆盖所有跳转场景

2. 前端登录接口显式指定跳转地址 #

调用魔法登录接口时，手动传入完整跳转路径，避免默认fallback到根路径，参考代码：

const { error } = await supabase.auth.signInWithOtp({
  email: 用户输入的邮箱变量,
  options: {
    emailRedirectTo: "https://kkzio.github.io/movie-trend/"
  }
})

3. 确认React子路径部署适配 #

由于站点部署在GitHub Pages子目录下，需要额外添加两项配置避免路由异常：

1. 在React Router初始化时添加basename参数（以React Router v6为例）：

import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/movie-trend">
    <App />
  </BrowserRouter>
)

2. 在项目package.json中添加homepage字段：

{
  "homepage": "https://kkzio.github.io/movie-trend"
}

完成所有配置后重新触发魔法登录，查看收到的链接是否已携带/movie-trend前缀，点击即可正常跳转至站点完成登录。

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