# 📚 Supabase Examples

Supabase 前端示例合集（登录、上传、下载）。已合并原有文档并清理测试脚本，重点保留可运行页面和关键调试记录。

## 目录与功能
- `login.html`：邮箱 OTP 登录，登录态保存在 `supabase.auth` session 中。
- `upload.html`：TUS 断点续传上传，自动修正 Location，使用 JWT + `apikey` 头，上行路径为 `<user_id>/<sanitized_filename>`，固定 bucket `test-public`。
- `manage.html`：文件管理（单 bucket `test-public`），支持 1 天签名下载链接、批量下载、批量删除（不可恢复），可跳转至上传页面。
- `index.html` / `test_frontend_config.html`：简单入口与前端配置测试。
- 依赖：`supabase.js`（本地优先，CDN 兜底）、`tus.min.js`。

## 快速使用
1. 浏览器打开 `login.html`，完成邮箱 OTP 登录。
2. 进入 `upload.html`，固定 bucket `test-public`，上传文件；路径自动带上 `user_id`。
3. 打开 `manage.html`，点击“刷新列表”后对 `test-public` 中属于当前用户的文件批量下载/删除（签名链接有效期 1 天）。
4. 如需本地预览，可在本目录运行 `python3 -m http.server 8000` 后访问 `http://localhost:8000/login.html` 等页面。

## 配置
- `SUPABASE_URL = https://amiap.hzau.edu.cn/supa`
- `SUPABASE_ANON_KEY`：从 `supabase-stack/.env` 读取；当前页面内置同一值，保持与后端一致。
- Storage 路径：物理上在 RustFS 的 `stub/test-public/<user_id>/...`（`GLOBAL_S3_BUCKET=stub`）；逻辑上通过 Supabase Storage API 读写。
- 文件名已做 ASCII 清理和小写化，避免 TUS 校验错误。

## 调试记录（精简自历史 MD）
- Bucket 健康：可用 bucket 列表 `test-public`、`test-https`、`test-file-backend`、`testrustfs`（验证于线上）。
- TUS 修复：Location 需强制 `/supa/storage/v1/upload/resumable`；XHR 重新 `open` 后补回所有请求头，避免 JWT 丢失；元数据由 tus 自动 Base64。
- 认证修复：统一使用 `Authorization: Bearer <token>` 搭配 `apikey`；曾用无效 token 会触发 “Invalid Compact JWS”。
- 路径说明：上传成功的逻辑路径 `bucket/user_id/filename`，RustFS 后台会看到版本目录（例如 `mlx.py/<uuid>`），属于正常版本化存储。
- SMTP 证书历史问题已通过开启 `GOTRUE_SMTP_SKIP_VERIFY=true` 规避。
- 最新验证（2025-12-07）：TUS PATCH 204 成功，文件可通过签名 URL 下载；直传降级逻辑仍保留备用。

## 注意
- 只保留最终版 `upload.html`；旧上传示例和测试 py/sh 已移除。
- 签名下载链接默认有效期 1 天，如需调整修改 `download.html` 中的 `createSignedUrl(..., 86400)`。

```javascript
const SUPABASE_URL = 'https://amiap.hzau.edu.cn/supa';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIs...';
```

**重要**: `login.html` 和 `upload.html` 必须使用相同的配置，否则 Session 无法正确传递。

## 🧪 测试清单

使用快速测试脚本验证：
```bash
./quick_test.sh
```

测试内容：
- ✅ Supabase API 连通性
- ✅ 必要文件完整性
- ✅ 配置一致性检查
- ✅ Python 环境检测

## 🐛 调试技巧

### 浏览器控制台 (F12)
```javascript
// 检查当前 session
const { data } = await supabase.auth.getSession();
console.log(data);

// 列出存储桶
const { data: buckets } = await supabase.storage.listBuckets();
console.log(buckets);

// 查看 token
console.log(localStorage.getItem('supabase.auth.token'));
```

### Docker 日志
```bash
# Auth 服务日志
docker logs supabase-auth -f

# Storage 服务日志  
docker logs supabase-storage -f

# 所有服务
docker-compose logs -f
```

## ❓ 常见问题

### Q: 收不到验证码邮件？
**A**: 检查 SMTP 配置或查看垃圾邮件箱
```bash
docker logs supabase-auth | grep -i smtp
```

### Q: 上传页面显示"未登录"？
**A**: Session 已过期，需要重新登录

### Q: 上传失败？  
**A**: 检查：
1. 是否选择了存储桶
2. Storage Policy 是否正确配置
3. 查看浏览器控制台错误信息

### Q: API 调用返回 401？
**A**: 检查 ANON_KEY 是否正确，或 Session 是否有效

## 📖 更多资源

- **Supabase 官方文档**: https://supabase.com/docs
- **TUS 协议说明**: https://tus.io/
- **Supabase JS SDK**: https://github.com/supabase/supabase-js

## 🤝 贡献

欢迎提交问题和改进建议！

## 📝 许可

本示例代码遵循项目主许可证。

---

**🎉 开始探索 Supabase 的强大功能吧！**

运行 `python3 serve.py` 启动服务器，或查看 [QUICK_START.md](QUICK_START.md) 快速上手。