登录与 API
移动端如何通过环境变量连接后端,配置 Better Auth 和 oRPC 客户端
你将学到
- 移动端如何通过公开地址连接 01MVP 后端,复用整套上层系统
- 环境变量该放什么、不该放什么
- 服务端和客户端分别要配哪些东西才能跑通登录和 API 请求
- 用 health、login、profile 三步验证整条链路
整体架构
移动端不单独维护后端。它通过一个公开的 URL 直接访问 01MVP Web/API,账号、数据库、会员、邮件、存储全部复用上层系统。
请求流向:
EXPO_PUBLIC_SERVER_URL → Hono / oRPC → 后端系统(数据库 / 邮件 / 存储 / 支付)移动端只需要知道后端的公开地址,不需要也不应该持有任何服务端密钥。
环境变量
移动端只放公开变量。只要一个变量会进入 App 安装包,就默认当公开信息处理。
| 可以放进移动端 | 不应该放进移动端 |
|---|---|
EXPO_PUBLIC_SERVER_URL — API 公开地址 | 数据库连接字符串 |
EXPO_PUBLIC_APP_SCHEME — App scheme | 邮件服务密钥 |
EXPO_PUBLIC_AUTH_COOKIE_PREFIX — cookie 前缀 | 对象存储 secret key |
| RevenueCat public key | 支付服务端密钥 |
| 环境名称(dev / staging / prod) | 任何签名用的私钥 |
服务端密钥放在 products/01mvp/packages/config/.env 或部署平台的环境变量里。
EXPO_PUBLIC_SERVER_URL 应该指向设备能访问到的地址。本地开发时,真机和模拟器通常不能用 localhost,需要用本机局域网 IP 或隧道工具。
服务端配置
Better Auth 配置在 products/01mvp/packages/auth/src/index.ts。移动端要求服务端具备三项配置:
createExpoAuthPlugin — 来自 @01mvp/auth/expo-server,注册到 Better Auth 的插件列表中。它负责处理移动端的 cookie 和回跳逻辑。
NATIVE_APP_SCHEME — 加入 Better Auth 的 trusted origins,让服务端认可来自 yourapp:// 的请求。
AUTH_COOKIE_PREFIX — 和移动端的 EXPO_PUBLIC_AUTH_COOKIE_PREFIX 对应,确保两边读写的是同一个 cookie。
import { createExpoAuthPlugin } from "@01mvp/auth/expo-server";
import { createAuth } from "@01mvp/auth/index";
const auth = createAuth({
cacheKey: "expo",
plugins: [createExpoAuthPlugin()],
});Auth 客户端
移动端 auth client 在 products/01mvp/apps/mobile/src/lib/auth-client.ts。
它依赖三个东西:
@better-auth/expo/client— Better Auth 的 Expo 集成expo-secure-store— 原生安全存储,登录后把 session cookie 存在这里EXPO_PUBLIC_APP_SCHEME和EXPO_PUBLIC_AUTH_COOKIE_PREFIX— 用于回跳和 cookie 匹配
登录成功后,Better Auth 自动把 session cookie 写入 SecureStore。后续请求会自动携带这个 cookie。
API 客户端
移动端 oRPC client 在 products/01mvp/packages/api/src/client/mobile/orpc.ts。
这个入口和 Web 的 TanStack Start client 是分开的,避免 Expo 打包进 Start 的 server request forwarding 逻辑。在组件里这样用:
import { orpc } from "@/lib/mobile-api";
const healthQuery = useQuery(orpc.health.live.queryOptions());
const profileQuery = useQuery(orpc.account.profile.queryOptions());模板里已经包含三个 API 调用示例:
| 调用 | 类型 | 用途 |
|---|---|---|
health.live | 公开 API | 验证 server 是不是通的 |
billing.plans | 公开 API | 获取可购买的计划列表 |
account.profile | 受保护 API | 验证登录 cookie 能被 oRPC 正确读取 |
验证流程
用三步验证整条链路是否打通:
Health — 验证网络通路
请求 health.live。如果失败,检查 EXPO_PUBLIC_SERVER_URL 是否指向正确的后端地址,以及设备是否能访问该地址。
Login — 验证登录流程
触发登录请求,确认能到达 /api/auth。登录成功后检查 SecureStore 里是否有 session cookie。
Profile — 验证受保护接口
请求 account.profile。如果返回数据,说明 cookie 携带和验证都正常。如果返回 401,进入下面的常见问题排查。
完整验证后,你还可以检查会员状态能否从后端读取,以及网络断开、地址错误、未登录时 App 是否有清晰的提示。
常见问题
登录成功但 profile 返回 401
逐项排查:
EXPO_PUBLIC_SERVER_URL是否指向同一个 Web/API 服务EXPO_PUBLIC_AUTH_COOKIE_PREFIX是否和服务端AUTH_COOKIE_PREFIX一致- 服务端是否部署了最新的
NATIVE_APP_SCHEME - 真机跑的时候,server URL 是否是设备能访问到的地址(非 localhost)
OAuth 回调不回 App
检查这四个值是否全部对齐:
app.json的expo.schemeEXPO_PUBLIC_APP_SCHEME- 服务端
NATIVE_APP_SCHEME - OAuth 提供商后台的回调 URL 是否指向
{EXPO_PUBLIC_SERVER_URL}/auth/callback/<provider>
设备无法访问 server URL
本地开发最常见的问题是真机或模拟器访问不到 localhost。解决方式:
- 用本机局域网 IP 替换(例如
http://192.168.1.100:3000) - 或用隧道工具(如 ngrok、Cloudflare Tunnel)暴露本地服务
- 确认设备和开发机在同一网络
上层系统入口
移动端依赖上层系统提供的服务,以下是相关文档:
- API 开发 — Hono 和 oRPC 的后端入口
- 环境变量 — 服务端密钥和产品级配置
- 认证系统 — 移动端登录复用的 Better Auth 后端
- 存储与文件 — 文件上传由后端签名和存储服务负责,移动端只发起请求
下一步
登录和 API 跑通后,下一步是 邮件登录与回调验证 —— 处理 Magic Link、验证邮件和 OAuth 回调在端侧的衔接。
这篇文档有问题?