01MVP 早鸟价限时开放中,产品还在打磨中,感谢信任

00 / 00

登录与 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_SCHEMEEXPO_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.jsonexpo.scheme
  • EXPO_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 回调在端侧的衔接。

这篇文档有问题?